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

单元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/headbody……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......值n4．通用选择器*{属性:值;……属性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]img[alt^=r]{width:300px;}选取带有alt属性且属性值以r开头的元素设置宽度[attribute$=value]img[alt$=r]{width:300px;}选取带有alt属性且属性值以r结尾的元素设置宽度[attribute*=value]img[alt*=r]{width:300px;}选取带有alt属性且属性值包含r的元素设置宽度

3.3.3关系选择器1.后代选择器（空格）基础选择器标签名{属性:值;……属性n:值}2.子选择器（）基础选择器标签名{属性:值;……属性n:值}3.相邻兄弟选择器（+）基础选择器+标签名{属性:值;……属性n:值}4.通用兄弟选择器（~）基础选择器~标签名{属性:值;……属性n:值}

3.3.4伪类选择器选择器:伪类{属性:值;……属性n:值}

选择器例子例子描述:activea:active选择活动的链接:checkedinput:checked选择每个被选中的input元素:disabledinput:disabled选择每个被禁用的input元素:emptyp:empty选择没有子元素的每个p元素:enabledinput:enabled选择每个已启用的input元素:first-childp:first-child选择作为其父的首个子元素的每个p元素:first-of-typep:first-of-type选择作为其父的首个p元素的每个p元素:focusinput:focus选择获得焦点的input元素:hovera:hover选择鼠标悬停其上的链接:in-rangeinput:in-range选择具有指定范围内的值的input元素:invalidinput:invalid选择所有具有无效值的input元素:lang(language)p:lang(it)选择每个lang属性值以“it