HTML5+CSS3网页设计基础 第五章 CSS3选择器
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
E[attribute$=value]选择器 E[attribute*=value]选择器 案例制作
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第5页
5.1.1 案例分析
【案例展示】百度新闻-热点要闻局部页面的设计。 【知识要点】CSS3属性选择器[attribute^=value]、 [attribute$=value]和[attribute*=value]的功能、选择元 素的方法。 【学习目标】掌握CSS3属性选择器的作用并灵活应用。 参考代码：5-1.html
第5章 CSS3选择器
HTML5+CSS3网页设计基础
第3页
主要内容
5.1 属性选择器 5.2 伪类选择器
5.3 伪元素选择器
5.4 链接伪类 5.5 实训 5.6 本章小结
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第4页
5.1 属性选择器
本节主要内容：
案例分析
E[attribute^=value]选择器
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第6页
5.1.2 E[attribute^=value]选择器
E[attribute^=value]选择器匹配属性值以指定值value开头 的每个元素。即选择名称为E的标签，且该标签定义了 attribute属性，attribute属性值包含前缀为value的字符串 。E可以省略，省略时表示匹配满足条件的任意元素。
第24页
5.4.1 案例分析
【案例展示】网页底部导航的设计。 【知识要点】文本样式定义、链接伪类的应用。 【学习目标】掌握链接伪类的作用和用法。 参考代码：5-4.html
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第25页
5.4.2 案例制作
制作完成演示案例:网页底部导航的设计。 参考代码 5-4.html
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第8页
5.1.4 E[attribute*=value]选择器
[attribute*=value] 选择器匹配属性值包含指定值value的 每个元素。即选择名称为E的标签，且该标签定义了 attribute属性，attribute属性值包含value的字符串。E可 以省略，省略时表示匹配满足条件的任意元素。
:nth-child(n)和:nth-last-child(n)选择器
:nth-of-type(n)和:nth-last-of-type(n) 选择器
:empty选择器
:target选择器 案例制作
第5章 CSS3选择器
HTML5+CSS3网页设计基础
第11页
5.2.1 案例分析
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第28页
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第22页
5.3.4 案例制作
制作完成演示案例:超链接按钮设计。 参考代码 5-3.html
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第23页
5.4 链接伪类
本节主要内容：
案例分析
案例制作
HTML5+CSS3网页设计基础
第5章 CSS3选择器
使用:first-child和:last-child选择器，可以选择父元素中第 一个或最后一个元素。但如果想选择其他位置的元素就不 行了。为此，CSS3中引入了:nth-child(n)和:nth-lastchild(n)选择器，用来选择父元素的第n个或倒数第n个子元 素。使用:nth-last-child(1)和:last-child实现的功能相同。
第五章 CSS3选择器
本章概述 本章的学习目标 主要内容
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第1页
本章概述
选择器是一种模式，用于选择需要添加样式的元 素。网页设计时使用选择器选择某些元素进行样 式定义，实现灵活的样式控制。本章将具体介绍 常用的CSS3选择器的功能和用法。
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第20页
5.3.2 :before选择器
:before 选择器实现在被选元素的内容前面插入内容。 格式： E:before{ content:”文字”/url(); } content属性来指定要插入的内容，可以是用双引号括起来 的文本或用url()指定路径的图片。 参考代码：5-3-1.html
第5章 CSS3选择器
第2页
本章的学习目标
掌握CSS3中新增属性选择器的用法，能运用属 性选择器选择页面上的元素添加样式。
掌握常用的伪类选择器的用法，能够为名称相同 或类型相同的子元素定义不同的样式。
掌握伪元素选择器的用法，能够在页面上特定位 置插入需要的文字或图片。 掌握链接伪类的用法，能够用链接伪类实现页面 上超链接的特效。
【案例展示】动态新闻列表局部页面的设置。 【知识要点】字体类型、大小、颜色、对齐方式、行间距 、结构化伪类选择器等。 【学习目标】掌握CSS文本修饰的常用属性ቤተ መጻሕፍቲ ባይዱ伪类选择器 的作用并灵活应用。 参考代码：5-2.html
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第12页
5.2.2 :first-child和:last-child选择器
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第9页
5.1.5 案例制作
制作完成演示案例:百度新闻-热点要闻局部页面 的设计。 参考代码 5-1.html
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第10页
5.2 伪类选择器
本节主要内容：
案例分析
:first-child和:last-child选择器
案例制作
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第19页
5.3.1 案例分析
【案例展示】超链接按钮设计。 【知识要点】设置文本样式、伪元素选择器的用法。 【学习目标】掌握CSS设置文本样式的方法和伪元素选择 器的用法。 参考代码：5-3.html
HTML5+CSS3网页设计基础
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第26页
5.5 实训
用CSS样式及属性选择器的知识设计客户案例展 示局部页面。 参考代码 5-5.html
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第27页
5.6 本章小结
本章介绍了常用的CSS3选择器，包括新增的3种属性选 择器、伪类选择器、微元素选择器和链接伪类等各种选择 器的功能和用法，并结合实例介绍了应用各种选择器对页 面元素进行样式定义的方法。
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第17页
5.2.7 案例制作
制作完成演示案例:动态新闻列表局部页面。 参考代码 5-2.html
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第18页
5.3 伪元素选择器
本节主要内容：
案例分析
:before选择器
:after选择器
:first-child 选择器用于选取属于其父元素的首个子元素。 :last-child 选择器用于选择属于其父元素的最后一个子元 素。 参考代码：5-2-1.html
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第13页
5.2.3 :nth-child(n)和:nth-last-child(n)选择器
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第7页
5.1.3 E[attribute$=value]选择器
E[attribute$=value] 选择器匹配属性值以指定值value结尾 的每个元素。即选择名称为E的标签，且该标签定义了 attribute属性，attribute属性值包含后缀为value的字符串 。E可以省略，省略时表示匹配满足条件的任意元素。
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第15页
5.2.5 :empty选择器
:empty 选择器匹配没有子元素或文本内容为空的每个元素。 参考代码：5-2-3.html
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第16页
5.2.6 :target选择器
:target 选择器用于选取当前活动的目标元素，为页面上的 某个target元素（该元素的id被用做页面中超链接的锚记名 称来是先用）指定样式。当目标元素的id和:target伪选择 器指定的id匹配上时，它的样式就会在这个id元素上生效， 即只有当用户单击了页面上的超链接，并且跳转到目标元 素后，:target选择器所设置的样式才会起作用。 参考代码：5-2-4.html
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第21页
5.3.3 :after选择器
:after 选择器实现在被选元素的内容后面插入内容。 格式： E: after { content:”文字”/url(); } content属性用法同:before 选择器中的content。 参考代码：5-3-2.html
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第14页
5.2.4 :nth-of-type(n)和:nth-last-of-type(n) 选择器
使用:nth-of-type(n)和:nth-last-of-type(n) 选择器可以选 择父元素中特定类型的第n个和倒数第n个子元素，而使用 :nth-child(n)和:nth-last-child(n)选择器选择父元素中的第 n个和倒数第n个子元素时，与元素类型无关。 参考代码：5-2-2.html
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第5页
5.1.1 案例分析
【案例展示】百度新闻-热点要闻局部页面的设计。 【知识要点】CSS3属性选择器[attribute^=value]、 [attribute$=value]和[attribute*=value]的功能、选择元 素的方法。 【学习目标】掌握CSS3属性选择器的作用并灵活应用。 参考代码：5-1.html
第5章 CSS3选择器
HTML5+CSS3网页设计基础
第3页
主要内容
5.1 属性选择器 5.2 伪类选择器
5.3 伪元素选择器
5.4 链接伪类 5.5 实训 5.6 本章小结
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第4页
5.1 属性选择器
本节主要内容：
案例分析
E[attribute^=value]选择器
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第6页
5.1.2 E[attribute^=value]选择器
E[attribute^=value]选择器匹配属性值以指定值value开头 的每个元素。即选择名称为E的标签，且该标签定义了 attribute属性，attribute属性值包含前缀为value的字符串 。E可以省略，省略时表示匹配满足条件的任意元素。
第24页
5.4.1 案例分析
【案例展示】网页底部导航的设计。 【知识要点】文本样式定义、链接伪类的应用。 【学习目标】掌握链接伪类的作用和用法。 参考代码：5-4.html
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第25页
5.4.2 案例制作
制作完成演示案例:网页底部导航的设计。 参考代码 5-4.html
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第8页
5.1.4 E[attribute*=value]选择器
[attribute*=value] 选择器匹配属性值包含指定值value的 每个元素。即选择名称为E的标签，且该标签定义了 attribute属性，attribute属性值包含value的字符串。E可 以省略，省略时表示匹配满足条件的任意元素。
:nth-child(n)和:nth-last-child(n)选择器
:nth-of-type(n)和:nth-last-of-type(n) 选择器
:empty选择器
:target选择器 案例制作
第5章 CSS3选择器
HTML5+CSS3网页设计基础
第11页
5.2.1 案例分析
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第28页
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第22页
5.3.4 案例制作
制作完成演示案例:超链接按钮设计。 参考代码 5-3.html
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第23页
5.4 链接伪类
本节主要内容：
案例分析
案例制作
HTML5+CSS3网页设计基础
第5章 CSS3选择器
使用:first-child和:last-child选择器，可以选择父元素中第 一个或最后一个元素。但如果想选择其他位置的元素就不 行了。为此，CSS3中引入了:nth-child(n)和:nth-lastchild(n)选择器，用来选择父元素的第n个或倒数第n个子元 素。使用:nth-last-child(1)和:last-child实现的功能相同。
第五章 CSS3选择器
本章概述 本章的学习目标 主要内容
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第1页
本章概述
选择器是一种模式，用于选择需要添加样式的元 素。网页设计时使用选择器选择某些元素进行样 式定义，实现灵活的样式控制。本章将具体介绍 常用的CSS3选择器的功能和用法。
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第20页
5.3.2 :before选择器
:before 选择器实现在被选元素的内容前面插入内容。 格式： E:before{ content:”文字”/url(); } content属性来指定要插入的内容，可以是用双引号括起来 的文本或用url()指定路径的图片。 参考代码：5-3-1.html
第5章 CSS3选择器
第2页
本章的学习目标
掌握CSS3中新增属性选择器的用法，能运用属 性选择器选择页面上的元素添加样式。
掌握常用的伪类选择器的用法，能够为名称相同 或类型相同的子元素定义不同的样式。
掌握伪元素选择器的用法，能够在页面上特定位 置插入需要的文字或图片。 掌握链接伪类的用法，能够用链接伪类实现页面 上超链接的特效。
【案例展示】动态新闻列表局部页面的设置。 【知识要点】字体类型、大小、颜色、对齐方式、行间距 、结构化伪类选择器等。 【学习目标】掌握CSS文本修饰的常用属性ቤተ መጻሕፍቲ ባይዱ伪类选择器 的作用并灵活应用。 参考代码：5-2.html
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第12页
5.2.2 :first-child和:last-child选择器
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第9页
5.1.5 案例制作
制作完成演示案例:百度新闻-热点要闻局部页面 的设计。 参考代码 5-1.html
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第10页
5.2 伪类选择器
本节主要内容：
案例分析
:first-child和:last-child选择器
案例制作
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第19页
5.3.1 案例分析
【案例展示】超链接按钮设计。 【知识要点】设置文本样式、伪元素选择器的用法。 【学习目标】掌握CSS设置文本样式的方法和伪元素选择 器的用法。 参考代码：5-3.html
HTML5+CSS3网页设计基础
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第26页
5.5 实训
用CSS样式及属性选择器的知识设计客户案例展 示局部页面。 参考代码 5-5.html
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第27页
5.6 本章小结
本章介绍了常用的CSS3选择器，包括新增的3种属性选 择器、伪类选择器、微元素选择器和链接伪类等各种选择 器的功能和用法，并结合实例介绍了应用各种选择器对页 面元素进行样式定义的方法。
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第17页
5.2.7 案例制作
制作完成演示案例:动态新闻列表局部页面。 参考代码 5-2.html
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第18页
5.3 伪元素选择器
本节主要内容：
案例分析
:before选择器
:after选择器
:first-child 选择器用于选取属于其父元素的首个子元素。 :last-child 选择器用于选择属于其父元素的最后一个子元 素。 参考代码：5-2-1.html
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第13页
5.2.3 :nth-child(n)和:nth-last-child(n)选择器
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第7页
5.1.3 E[attribute$=value]选择器
E[attribute$=value] 选择器匹配属性值以指定值value结尾 的每个元素。即选择名称为E的标签，且该标签定义了 attribute属性，attribute属性值包含后缀为value的字符串 。E可以省略，省略时表示匹配满足条件的任意元素。
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第15页
5.2.5 :empty选择器
:empty 选择器匹配没有子元素或文本内容为空的每个元素。 参考代码：5-2-3.html
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第16页
5.2.6 :target选择器
:target 选择器用于选取当前活动的目标元素，为页面上的 某个target元素（该元素的id被用做页面中超链接的锚记名 称来是先用）指定样式。当目标元素的id和:target伪选择 器指定的id匹配上时，它的样式就会在这个id元素上生效， 即只有当用户单击了页面上的超链接，并且跳转到目标元 素后，:target选择器所设置的样式才会起作用。 参考代码：5-2-4.html
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第21页
5.3.3 :after选择器
:after 选择器实现在被选元素的内容后面插入内容。 格式： E: after { content:”文字”/url(); } content属性用法同:before 选择器中的content。 参考代码：5-3-2.html
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第14页
5.2.4 :nth-of-type(n)和:nth-last-of-type(n) 选择器
使用:nth-of-type(n)和:nth-last-of-type(n) 选择器可以选 择父元素中特定类型的第n个和倒数第n个子元素，而使用 :nth-child(n)和:nth-last-child(n)选择器选择父元素中的第 n个和倒数第n个子元素时，与元素类型无关。 参考代码：5-2-2.html