Web 前端开发案例与实战单元3 CSS和CSS选择器.pdfVIP

单元3CSS和CSS选择器

知识入门

循序渐进

3.1CSS基础术语

3.2CSS语法基础

3.3CSS选择器

知识拓展

知识入门

1.CSS层叠样式

2.开发CSS的历史原因

3.CSS发展史

4.CSS版本历史

5.CSS语言的优点

6.CSS的缺点

循序渐进

3.1CSS基础术语

3.2CSS语法基础

3.3CSS选择器

3.1CSS基础术语

1.选择符

2.注释

3.长度单位

4.百分比长度值

5.长度值

6.颜色值

7.属性

8.创建CSS文件

9.什么是伪类？

10.什么是伪元素？

3.2CSS语法基础

3.2.1CSS样式规则

3.2.2CSS样式的引入

3.2.3CSS样式表的特性

3.2.1CSS样式规则

CSS样式表的基本语法形式如下所示。

选择器{属性1:值1;属性2:值2;……;属性n:值n}

3.2.2CSS样式的引入

1．行内样式

标签style=属性:属性值;/标签

2．内部样式

head

……

style

样式表内容

/style

/head

body

……

3．外部样式

linkrel=stylesheettype=text/csshref=xxxx.css/

3.2.3CSS样式表的特性

1.继承性

2.层叠性

3.优先级

【任3-1】制作《静夜思》欣赏页

面

【任务描述】

（1）使用3种方式引入CSS样式表。

（2）使用3种方式对P元素的文本颜色进行设置。

（3）使用3种方式对HTML中的元素添加样式。

3.3CSS选择器

3.3.1基础选择器

3.3.2属性选择器

3.3.3关系选择器

3.3.4伪类选择器

3.3.5伪元素选择器

3.3.1基础选择器

1．元素选择器

标签名{属性:值;……属性n:值}

2．ID选择器

#id属性的值{属性:值;……属性n:值}

3．类选择器

标签class=值1值2值n

4．通用选择器

*{属性:值;……属性n:值}

5．分组选择器

选择元素1,选择元素2,……,选择元素n{属性:值;……属性n:值}

3.3.2属性选择器

元素名[attribute]{color:blue;}

选择器示例功能

[attribute]img[alt]{width:300px;}选取带有alt属性的img元素设置宽度

[attribute=value]img[alt=玫瑰]{width:300px;}选取带有alt属性且属性值为“玫瑰”的元素设置宽度

[attribute~=value]img[alt~=花]{width:300px;}选取带有alt属性且属性值中包含花的元素设置宽度，花必须是单独的词汇。

[attribute|=value]img[alt|=tree]{width:300px;}选取带有alt属性且属性值以tree开头的元素设置宽度tree必须是单独的单词，

[attribute^=value]i