HTML5+CSS3网页设计基础 第五章 CSS3选择器
网页设计与制作案例教程(HTML5+CSS3)第5章使用CSS设置图像样式
规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）。
默认。背景颜色为透明。 规定应该从父元素继承 background-color 属性的设置。
WEB
32
5.4 知识库：CSS背景样式
5.4.2 背景图像样式
第5章 使用CSS 设置图像样式
5.1 基础项目1：制作“李彦宏——众里寻他千百 度”网页 5.2 知识库：CSS图像样式
目录
5.3 基础项目2：制作“少年中国说”网页 5.4 知识库：CSS背景样式 5.5 提高项目：制作“低碳生活 从我做起”网页 5.6 拓展项目：制作“春节民俗”网页
WEB
2
background-color属性可用于设置图像或其它网页元素的背景颜色。其可 能的属性值如下：
属性值
color_name hex_number
描述
规定颜色值为颜色名称的背景颜色（比如 red）。 规定颜色值为十六进制值的背景颜色（比如 #ff0000）。
rgb_number
transparent inherit
name属性或id属性相关联，创建图像与映射之间的联系。具体
是name属性还是id属性由浏览器决定，所以应同时向<map>标 签添加name和id两个属性。
5.2.3 图像映射
<area>标签永远嵌套在<map>标签内部。<area>标签 定义图像映射中的区域，其属性及属性值如下：
必需的属性 属性 alt 属性 coords href nohref shape 值 text 描述 定义此区域的替换文本。
效果
5.2.2 CSS常用图像样式
提示： 当vertical-align的值为bottom或者sub时，IE与Firefox 的显示结果是不一样的，它们无所谓谁对谁错。在工作中，建 议尽量少地使用浏览器间显示效果不一样的属性值。
20第5章 CSS3高级选择器
德才兼备 知行合一
17
5.2.3 结构化伪类选择器
3、 :empty选择器
:empty选择器用于来选择没有内容的元素。
德才兼备 知行合一
18
5.2.3 结构化伪类选择器
4、 :target选择器
:target选择器可用于选取当前活动的目标元素。当用户单击了超链接， 而且此链接地址为本页面内的目标位置，:target选择器样式起作用。
德才兼备 知行合一
13
5.2.2 关系选择器
子代选择器（>）
相邻兄弟选择器（+）和 普通兄弟选择器（~）
德才兼备 知行合一
14
5.2.3 结构化伪类选择器
CSS3常用的结构化伪类选择器有: root选择器、:not选择器、:empty选择器、 :target选择器、:only-child选择器、 :first-child选择器、:last-child选择器、 :nth-child（n）选择器、:nth-last-child（n）选择器、 :nth-of-type（n）选择器、:nth-last-of-type（n）选择器。
:first-child选择器和:last-child选择一个子元素。如果父元素内子元素较多，我们可以用:nth-child（n）
选择器和:nth-last-child（n）选择器分别来选择第n个或者倒数第n个元素。
n可以为数值，也可以为odd（奇数）或even（偶数），odd和even分别
E[att^=val]属性选择器 E[att$=val]属性选择器 E[att*=val]属性选择器
德才兼备 知行合一
10
5.2.2 关系选择器
本节介绍3个关系选择器，分别是子代选择器（>）、 相邻兄弟选择器（+）、普通兄弟选择器（~）。
CSS3：：selection选择器
CSS3：：selection选择器⼀、介绍之前看到有些⽹站选中内容的颜⾊和背景⾊都不是平时看到的蓝⾊和⽩⾊。
今天有兴趣查看了⼀下，原来是⼀个很简单的CSS3的选择器::selection的⽤法。
上例⼦：<style>.selectColor::selection{color:#fff;background:pink;}.selectColor::-moz-selection{color:#fff;background:pink;}.selectColor::-webkit-selection{color:#fff;background:pink;}</style><body><p>普通⽂本，不设置::section,选中时⽂本的颜⾊为⽩⾊，背景⾊为蓝⾊</p><p class="selectColor">选择⽂本的颜⾊为⽩⾊，背景⾊为粉⾊</p></body>Note:只能向::selection选择器应⽤少量CSS属性：color、background、cursor以及outline。
浏览器⽀持：IE9+、Opera、Google Chrome 以及 Safari 中⽀持 ::selection 选择器。
Firefox ⽀持替代的 ::-moz-selection。
⼆、应⽤举例看过djagno⽂档的都知道，它的页⾯风格是这样的我选中⼀部分⽂字，效果是这样的可以看出，整体风格很统⼀，选中⽂字背景的浅绿⾊也让⼈感觉很舒服，这种细节的考虑⽆疑会提升⽤户体验。
它的样式也很简单，就⼀⾏我的博客现在也应⽤了这个样式，哈哈^_^。
css3选择题使用方法详解
css3选择题使用方法详解css3选择题使用方法详解一通用选择器1 *{}通配选择符(CSS2)：适合所有元素对象。
2 E类型(HTML)选择符（CSS1）：以文档语言对象类型DOM作为选择符。
3 E#myid是id选择符（CSS1）：以唯一标识符id属性等于myid 的E对象作为选择符。
4 E.myclass是类class选择符(CSS1)：以class属性包含myclass 的E对象作为选择符。
5 E F：包含选择符(CSS1)：选择所有被E元素包含的F元素。
CSS3新增的通用选择器：同级元素通用选择器：1 通用选择器E~F{}：匹配的是E元素之后的同级F元素匹配E后边所有的F，EF同级。
只要F在E的后边，E只是作为一个参考。
E~F { background:#ff0; }2 临近(相邻)选择器(css2)：E+F{}：EF元素相邻，即选择紧贴在E 元素之后F元素。
3 包含（子）选择器(css2)：E>F{}：EF不可以隔代，E只能匹配到下一个相邻辈F。
二属性选择器1．E[att^="val"]：选择具有att属性且属性值为以val开头的字符串的E元素。
2．E[att$="val"]：选择具有att属性且属性值为以val结尾的字符串的E元素。
3．E[att*="val"]：选择具有att属性且属性值为包含val的字符串的E元素。
4．E[att|="val"] 选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。
5．E[att] 选择具有att属性的E元素。
6．E[att="val"]选择具有att属性且属性值等于val的E元素。
7．E[att~="val"]选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。
HTML5+CSS3网站设计CSS3选择器
第4章CSS3选择器《HTML5+CSS3网站设计基础教程》学习目地/Target掌握CSS3新增加地属性选择器,能够运用属性选择器为页面地元素添加样式。
理解关系选择器地用法,能够准确判断元素与元素间地关系。
掌握常用地结构化伪类选择器,能够为相同名称地元素定义不同样式。
掌握伪元素选择器地使用,能够在页面插入所需要地文字或图片内容。
掌握CSS伪类,会使用CSS伪类实现超链接特效。
章节概述/Summary选择器是CSS3一个重要地内容,使用它可以大幅度提高开发员书写与修改样式表地效率。
实际上,在上一章已经介绍过一些常用地选择器,这些选择器基本上能够满足Web设计师常规地设计需求。
本章将向读者介绍CSS3新增地多种选择器。
通过本章地学习,读者可以更轻松地控制网页元素。
/Contents01 02属性选择器关系选择器03结构化伪类选择器/Contents04链接伪类05伪元素选择器06阶段案例—制作网页设计软件列表01属性选择器属性选择器可以根据元素地属性及属性值来选择元素。
CSS3新增了3种属性选择器:E[att^=value],E[att$=value]与E[att*=value],本节将详细介绍这3种选择器。
掌握E[att^=value]属性选择器地用法,能够选择包含指定前缀字符地字符串。
学习目地1.E[att^=value]属性选择器1.E[att^=value]属性选择器E[att^=value]属性选择器是指选择名称为E地标记,且该标记定义了att属性,att属性值包含前缀为value 地子字符串。
E是可以省略地,如果省略则表示可以匹配满足条件地任意元素。
掌握E[att$=value]属性选择器地用法,能够选择包含指定后缀字符地字符串。
学习目地2.E[att$=value]属性选择器2.E[att$=value]属性选择器E[att$=value]属性选择器是指选择名称为E地标记,且该标记定义了att属性,att属性值包含后缀为value 地子字符串。
HTML5+CSS3网页制作智慧树知到答案章节测试2023年海南职业技术学院
第一章测试1.HTML是（）。
A:超文本传输协议B:超文本标记语言C:其余都不是D:可扩展标记语言答案:B2.浏览器标题栏里显示的文本在（）元素中输入。
A:h1B:titleC:PD:body答案:B3.下面哪个不是HTML标签。
（）A:B:C:D:答案:C4.在浏览器客户区中显示的文本在（）元素中输入。
A:headB:bodyC:metaD:title答案:B5.head元素和body元素的父元素必须是（）元素A:pB:htmlC:titleD:meta答案:B6.HTML文档被浏览器解析后呈现为网页。
（）A:对B:错答案:A7.超文本是指页面内可以包含图片、链接、音乐、视频、程序等非文本元素。
（）A:对B:错答案:A8.所有的浏览器都支持HTML5的网页。
（）A:错B:对答案:A9.HTML5是HTML语言的新版本。
（）A:对B:错答案:A10.HTML负责网页的表现，CSS负责网页的结构。
（）A:对B:错答案:B11.记事本不可以用于编辑网页。
（）A:对B:错答案:B12.HTML标签是指由一对尖括号包围的HTML关键词。
（）A:错B:对答案:B13.<!DOCTYPE>属于单标签元素。
（）A:对B:错答案:A14.在带Emmet插件的编辑器中输入html:5，按TAB键，可以快速生成HTML文档的基本结构。
（）A:对B:错答案:A15.“开始标签”、“结束标签”，以及它们所包围的内容，代表一个完整的内容，叫做双标签元素。
（）A:对B:错答案:A第二章测试1.下列HTML元素中，哪个不是单标签元素。
（）。
A:imgB:hrC:brD:h1答案:D2.最大的标题是（）。
A:h2B:h5C:H6D:h1答案:D3.自定义列表用（）元素表示。
A:ddB:ulC:dlD:ol答案:C4.HTML5表格用（）元素表示。
A:inputB:formC:tableD:lable答案:C5.从一个网页跳转到另一个网页可以用（）元素。
CSS3中的子元素选择器
CSS3中的⼦元素选择器⽬录：1.⼦元素选择器>，⽤来选中某个元素的第⼀级⼦元素，也就是⼉⼦元素<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">/* ⼦代选择器,只对⼉⼦元素有效 */p>strong{color: red;}</style></head><body><p>这是p标签，<strong>表⽰⼀个段落</strong></p><p>这是p标签，嵌套了<i>b标签和<strong>i标签</strong></p></body></html>2.兄弟选择器+，两个元素有同⼀个⽗元素，只对邻近的第⼀个元素起作⽤<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">/* 兄弟选择器,只对相邻的⼀个元素起作⽤ */h3+p{color: #008000;font-size: 18px;font-family: "楷体";}</style></head><body><h3>望庐⼭瀑布</h3><p>⽇照⾹炉⽣紫烟，遥看瀑布挂前川。
</p><p>飞流直下三千尺，疑是银河落九天。
HTML5+CSS3 使用选择器来插入文字
HTML5+CSS3 使用选择器来插入文字
在CSS 3中，可以使用before在标签前面插入内容，使用after选择器在标签后面插入内容，然后使用选择器中的content属性设置要插入的内容。
在上述代码中，使用before标签在p标签前插入内容，使用after标签在p标签后插入内容，使用content属性设置插入内容。
before元after元
从上述代码可以看出，在页面中为P标签使用after和before选择器，所以该页面上如果有多个p标签，则所有p标签前面或后面会被插入内容。
如果要解决这个问题，可以在content属性中追加一个none属性值。
属性值设定为“none”。
这时，该标签将不在插入内容。
设置content属性值为none
在CSS 3中，除了none属性值外，还为content属性添加一个“normal”属性值，其作用与使用none属性值的方法相同。
css3多类选择器用法
css3多类选择器用法================CSS3的出现，无疑为网页设计带来了更多的可能性。
其中，多类选择器（MultipleClassSelectors）是一种非常实用的新特性，它允许我们在同一个元素上应用多个类。
这对于那些需要动态改变样式，或者需要在不同的地方使用同一元素的不同样式的情况来说，是非常有用的。
###多类选择器的定义和用法在CSS中，类选择器以点（.）开始，后面跟着的是类的名称。
多类选择器允许你在一个元素上应用多个类。
只需在类名之间用空格分隔即可。
例如，假设我们有一个div元素，我们希望根据其内容和状态应用不同的样式：```html<divclass="class1class2class3">我是一个div元素</div>```我们可以在CSS中使用多类选择器来为这个元素应用不同的样式：```css.class1{color:red;}.class2{background-color:yellow;}.class3{font-size:20px;}```这样，当这个div元素的类为"class1"时，它的文字颜色会是红色；当它的类为"class2"时，背景色会变成黄色；当它的类为"class3"时，字体大小会变为20px。
###多类选择器的优势使用多类选择器，你可以在一个元素上应用多个样式，而无需为每个样式创建单独的元素。
这大大提高了代码的效率和可读性，也使得网页布局更加灵活和动态。
此外，多类选择器还允许你在不同的地方使用同一元素的不同样式，这在响应式设计中尤其重要。
###多类选择器的限制和注意事项虽然多类选择器非常有用，但也有一些限制和注意事项：1.类的数量：理论上，你可以在同一个元素上应用无限个类，但是这可能会影响网页的性能，因为每个额外的类都需要额外的CSS规则和渲染成本。
css3中选择器的基本概念
css3中选择器的基本概念CSS3中选择器是用来选取HTML文档中的元素的一种方式。
选择器允许开发者根据元素的标签名、类名、ID等属性来选择特定的元素，然后对其应用样式。
在CSS3中，选择器的基本概念包括以下几种：1. 元素选择器（Element Selector），通过元素的标签名来选择元素。
例如，p选择器将选择所有的段落元素。
2. 类选择器（Class Selector），通过元素的class属性值来选择元素。
类选择器以英文句点（.）开头，后面跟着类名。
例如，.red将选择所有class属性值为red的元素。
3. ID选择器（ID Selector），通过元素的id属性值来选择元素。
ID选择器以井号（#）开头，后面跟着id名。
例如，#header将选择id属性值为header的元素。
4. 属性选择器（Attribute Selector），通过元素的属性值来选择元素。
属性选择器以方括号（[]）包裹属性名和属性值。
例如，[type="text"]将选择所有type属性值为text的元素。
5. 后代选择器（Descendant Selector），通过元素的嵌套关系来选择元素。
后代选择器使用空格来表示元素之间的嵌套关系。
例如，div p将选择所有嵌套在div元素内部的段落元素。
6. 相邻兄弟选择器（Adjacent Sibling Selector），通过元素之间的相邻关系来选择元素。
相邻兄弟选择器使用加号（+）表示两个元素之间的相邻关系。
例如，h1 + p将选择紧接在h1元素后面的段落元素。
7. 伪类选择器（Pseudo-class Selector），通过元素的特定状态或行为来选择元素。
伪类选择器以英文冒号（:）开头，后面跟着伪类名。
例如，:hover将选择鼠标悬停在元素上的状态。
8. 伪元素选择器（Pseudo-element Selector），通过元素的特定部分来选择元素。
html5和css3入门知识
HTML5移除的元素 移除的元素
▪ font, center, strike, big, s, u, acronym, applet, dir... 移除的属性
▪ 如link和a元素的rev属性, link元素的target属性, td的scope属性，script元素的language属性, body元素的alink， link，text和vlink属性...
3
HTML5是什么 下一代 Web 语言，它不单单是一种标记语言，更为下一代 Web 提供了全新功能，并将引领下一代 Web 实
现类似桌面的应用体验。
4
HTML5是什么 HTML5将使网络标准达到符合当代的网络需求，为桌面和移动平台带来无缝衔接的丰富内容。
HTML5是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点，如video、audio和canvas 标 记。
5
HTML5是什么
新增的功能： ▪ 本地音频视频播放 ▪ 动画 ▪ 地理信息 ▪ 硬件加速 ▪ 本地运行（即使在 Internet 连接中断之后） ▪ 本地存储 ▪ 从桌面拖放文件到浏览器上传 ▪ 语义化标记
6
7
8
HTML发展历史
HTML4.0
XHTML1
XHTML2
WHATG
HTML5
1998
2000
2002
2004
2007
Web Hypertext Application Technology Working Group 很多浏览器支持html5：Safari 3.1+，FireFox 3.1+，Internet Explorer 8.0+，Google等
9
(完整版)《HTML5+CSS3网站设计基础教程》_教学大纲(可编辑修改word版)
《HTML5+CSS3 网站设计基础教程》课程教学大纲（课程英文名称）课程编号：201601210011学分：5 学分学时：76 学时（其中：讲课学时：47 学时上机学时：26 学时）先修课程：计算机基础、计算机网络、计算机应用后续课程：UI 设计、 JavaScript 网页特效适用专业：信息技术及其计算机相关专业开课部门：计算机系一、课程的性质与目标《HTML5+CSS3 网站设计基础教程》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML 标记、CSS 样式、网页布局、变形与动画等内容，通过本课程的学习，学生能够了解网页 web 发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。
二、课程设计理念与思路课程设计理念：高职教育的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展，不能局限于单纯的技能训练。
单纯的技能训练不是提高高等职业教育的理想课程。
以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念。
课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例（项目）实训为手段，设计除理论学习与技能掌握相融合的课程内容体系。
教学整体设计“以职业技能培养为目标，以案例（项目）任务实现为载体、理论学习与时间操作相结合”。
三、教学条件要求开发工具：Dreamweaver CS6四、课程的主要内容及基本要求第一章初识 HTML5第二章HTML5 页面元素及属性第三章CSS3 入门第四章CSS3 选择器第五章CSS 盒子模型第六章浮动与定位第七章表单的应用第八章多媒体技术第九章CSS3 高级应用第十章实战开发—制作电商网站首页面…………………………………………………………………五、学时分配六、考核模式与成绩评定办法本课程为考试课程，期末考试采用百分制的闭卷考试模式。
CSS3选择器——属性选择器、关系选择器、结构化伪类选择器、伪元素选择器、伪链接
CSS3选择器——属性选择器、关系选择器、结构化伪类选择器、伪元素选择器、伪链接属性选择器 属性选择器可以根据元素的属性及属性值来选择元素。
CSS3中新增了 3 种属性选择器：E[att^=value]、E[att$=value] 和 E[att*=value]1.E[att^=value] 属性选择器 E[att^=value] 属性选择器是指选择名称为 E 的标记，且该标记定义了 att 属性，att 属性值包含前缀为 value 的⼦字符串。
其中 E 是可以省略的，如果省略则表⽰可以匹配满⾜条件的任意元素。
如：div[id^=section] 表⽰匹配包含 id 属性，且 id 属性值是以 “section” 字符串开头的 div 元素。
2.E[att$=value] 属性选择器 E[att$=value] 属性选择器是指选择器名称为 E 的标记，且该选择器定义了 att 属性，att 属性值包含后缀为 value 的⼦字符串。
与E[att$=value]选择器⼀样，E元素可以省略，如果省略则表⽰可以匹配满⾜条件的任意元素。
如：div[id$=section]表⽰匹配包含 id 属性，且 id 属性值是以 “section” 结尾的 div 元素。
3.E[att*=value] 属性选择器 E[att*=value] 选择器⽤于选择名为 E 的标记，且该标记定义了 att 属性，att 属性值包含 value ⼦字符串，该选择器与前两个选择器⼀样，E 元素也可以省略，如果省略则表⽰可以匹配满⾜条件的任意元素。
如：div[id*=section] 表⽰匹配包含 id 属性，且 id 属性包含 “section” 字符串的 div 元素。
关系选择器 CSS3中的关系选择器主要包括⼦代选择器和兄弟选择器，其中⼦代选择器由符号 “>” 连接，兄弟选择器由符号 “+”和 “~” 连接。
1.⼦代选择器（>） ⼦代选择器主要⽤来选择某个元素的第⼀级⼦元素，如希望选择只作为 h1 元素⼦元素的 strong 元素，可以写为：h1 > strong。
响应式Web设计：HTML5和CSS3实战
关于作者译者序前言第1章HTML5、CSS3和响应式网页设计入门∙ 1.1 为什么智能手机很重要（而老版的IE不再重要）∙ 1.2 响应式设计一定是最佳选择吗∙ 1.3 响应式网页设计的定义∙ 1.4 为什么要在响应式设计上停滞不前1.5 响应式网页设计示例∙ 1.5.1 下载视口调试工具∙ 1.5.2 在线创意源泉1.6 为什么HTML5很优秀∙ 1.6.1 省时省力∙ 1.6.2 新增了语义化标签元素1.7 CSS3为响应式设计和更多创新奠定了基础∙ 1.7.1 底线：CSS3不破坏任何东西∙ 1.7.2 CSS3如何解决日常设计问题1.8 看呐，不用图片∙CSS3还带来了什么∙ 1.9 HTML5和CSS3现在就能用吗∙ 1.10 响应式网页设计不是灵丹妙药∙ 1.11 引导客户：网站不必在所有浏览器中表现一致∙ 1.12 小结第2章媒体查询：支持不同的视口∙ 2.1 现在就能使用媒体查询∙ 2.2 为什么响应式设计需要媒体查询∙ 2.2.1 媒体查询语法∙ 2.2.2 媒体查询能检测那些特性∙ 2.2.3 用媒体查询改造我们的设计∙ 2.2.4 加载媒体查询的最佳方法∙ 2.3 我们的第一个响应式设计∙ 2.3.1 我们的设计是固定宽度的，不要惊讶∙ 2.3.2 响应式设计中要保证图片尽可能精简∙ 2.3.3 小视口下的内容剪切∙ 2.4 阻止移动浏览器自动调整页面大小∙ 2.5 针对不同视口宽度修正设计∙ 2.6 响应式设计中内容始终优先∙ 2.7 媒体查询只是必要条件之一∙我们需要流动布局∙ 2.8 小结第3章拥抱流式布局∙ 3.1 固定布局经不起未来考验∙ 3.2 为什么响应式设计需要百分比布局∙ 3.3 将网页从固定布局修改为百分比布局∙ 3.3.1 需要牢记的公式∙ 3.3.2 设置百分比元素的上下文∙ 3.3.3 必须时刻牢记上下文∙ 3.4 用em替换px∙ 3.5 弹性图片∙ 3.5.1 让图片随视口缩放∙ 3.5.2 为特定图片指定特定规则∙ 3.5.3 给弹性图片设置阈值∙ 3.5.4 超级全能的max-width属性∙ 3.6 为不同的屏幕尺寸提供不同的图片∙设置自适应图片∙ ··把背景图片放在其他地方∙ 3.7 流动网格布局和媒体查询的默契配合∙ 3.8 CSS网格系统∙使用网格系统快速搭建网站∙ 3.9 小结第4章响应式设计中的HTML5∙ 4.1 HTML5的哪些部分现在就能用∙ 4.1.1 大多数网站可以用HTML5编写∙ 4.1.2 腻子脚本和Modernizr ∙ 4.2 如何编写HTML5网页∙ 4.2.1 HTML5的精简之道∙ 4.2.2 HTML5标签的合理写法∙ 4.2.3 伟大的<a>标签万岁∙ 4.2.4 HTML的废弃零件∙ 4.3 HTML5的全新语义化元素∙ 4.3.1 <section>∙ 4.3.2 <nav>∙ 4.3.3 <article>∙ 4.3.4 <aside>∙ 4.3.5 <hgroup>∙ ··HTML5的大纲结构算法∙ 4.3.6 <header>∙ 4.3.7 <footer>∙ 4.3.8 <address>∙ 4.4 HTML5结构元素的实际用法∙网站的主体内容怎么办？∙ 4.5 HTML5的文本级语义元素∙ 4.5.1 <b>∙ 4.5.2 <em>∙ 4.5.3 <i>∙ 4.5.4 在页面中应用文本层语义元素∙ 4.6 遵循WAI-ARIA实现无障碍站点∙ARIA的地标角色∙ 4.7 在HTML5中嵌入媒体∙ 4.8 用HTML5的方法为页面添加视频或音频∙ 4.8.1 提供备用的媒体源文件∙ 4.8.2 针对老版本浏览器的备用方案∙ 4.8.3 <audio>和<video>标签的用法基本一致∙ 4.9 响应式视频∙ 4.10 离线Web应用∙ 4.10.1 离线Web应用概述∙ 4.10.2 让网页可离线使用∙ 4.10.3 理解manifest文件∙ 4.10.4 页面被自动加载到离线缓存∙ 4.10.5 版本注释的用途∙ 4.10.6 离线访问网站∙ 4.10.7 离线Web应用的故障诊断∙ 4.11 小结第5章CSS3：选择器、字体和颜色模式∙ 5.1 CSS3给前端开发人员带来了什么∙ 5.1.1 Internet Explorer 6到8对CSS3的支持∙ 5.1.2 使用CSS3设计和开发页面∙ 5.2 CSS规则解析∙ 5.3 私有前缀及其用法∙ 5.4 快速而有效的CSS技巧∙ 5.4.1 CSS3多栏布局∙ ··增加栏位间隙和分割线∙ 5.4.2 文字换行∙ 5.5 CSS3的新增选择器及其用法∙ 5.5.1 CSS3属性选择器∙ ··1. CSS3的子字符串匹配属性选择器∙ ··2. 一个活生生的例子∙ 5.5.2 CSS3结构伪类∙ ··1. :last-child选择器∙ ··2. nth-child选择器∙ ··3. 理解nth规则的作用∙ ··4. 否定（:not）选择器∙ 5.5.3 对伪元素的修正∙ ··:first-line对响应式设计来说好用吗∙ 5.6 自定义网页字体∙ 5.6.1 @font-face规则∙ 5.6.2 使用@font-face嵌入网页字体∙ 5.7 帮帮我，标题模糊怎么办∙在响应式设计中使用自定义@font-face字体的注意事项∙ 5.8 新的CSS3颜色格式和透明度∙ 5.8.1 RGB颜色∙ 5.8.2 HSL颜色∙ 5.8.3 针对IE6、IE7和IE8提供备用颜色值∙ 5.8.4 透明通道∙ 5.9 小结第6章用CSS3创造令人惊艳的美∙ 6.1 文字阴影∙ 6.1.1 HEX、HSL或RGB颜色都可以∙ 6.1.2 px、em或rem都行∙ 6.1.3 取消文字阴影∙ ··左上方阴影∙ 6.1.4 制作浮雕文字阴影效果∙ 6.1.5 多重文字阴影∙ 6.2 盒阴影∙ 6.2.1 内阴影∙ 6.2.2 多重阴影∙ 6.3 背景渐变∙ 6.3.1 线性背景渐变∙ ··分解线性渐变语法∙ 6.3.2 径向背景渐变∙ ··分解径向渐变语法∙ 6.3.3 重复渐变∙ 6.4 背景渐变图案∙ 6.5 CSS3的响应性∙ 6.6 组合使用CSS3属性∙ 6.7 多重背景图片∙ 6.7.1 背景图片大小∙ 6.7.2 背景图片位置∙ 6.7.3 背景属性的缩写语法∙ 6.8 更多CSS特性∙ 6.9 可缩放图标：响应式设计中的完美选择∙ 6.10 小结第7章CSS3过渡、变形和动画∙7.1 什么是CSS3过渡以及如何使用它∙7.1.1 过渡相关的属性∙ ··1. 过渡的简写语法∙ ··2. 在不同时间段内过渡不同属性∙ ··3. 理解过渡调速函数∙7.1.2 响应式网站中的有趣过渡∙7.2 CSS3的2D变形∙我们能做哪些变形∙ ··1. scale∙ ··2. translate∙ ··3. rotate∙ ··4. skew∙ ··5. matrix∙ ··6. transform-origin属性∙7.3 尝试CSS3的3D变形∙7.3.1 分析3D变形效果∙7.3.2 3D变形尚未成熟∙7.4 CSS3动画效果∙组合使用CSS3变形和动画∙7.5 小结第8章用HTML5和CSS3征服表单∙8.1 HTML5表单∙8.1.1 理解HTML5表单中的元素∙8.1.2 placeholder∙8.1.3 required∙8.1.4 autofocus∙8.1.5 autocomplete∙8.1.6 list（及对应的datalist元素）∙8.1.7 HTML5的新输入类型∙ 1. email∙ ··2. number∙ ··3. url∙ ··4. tel∙ ··5. search∙ 6. pattern∙7. color∙8.1.8 日期和时间输入类型∙ 1. date∙ 2. month∙ 3. week∙ 4. time∙ 5. datetime和datetime-local∙ 6. range∙8.2 如何给不支持新特性的浏览器打补丁∙8.3 使用CSS3美化HTML5表单∙针对表单的CSS3伪类选择器∙8.4 小结第9章解决跨浏览器问题∙9.1 渐进增强与优雅降级∙现状∙9.2 该不该修复老版本IE∙9.2.1 统计数据（再看看世界的变化）∙9.2.2 个人选择∙9.3 前端的瑞士军刀：Modernizr∙9.3.1 使用Modernizr辅助修正样式问题∙9.3.2 使用Modernizr让老版本IE支持HTML5元素∙9.3.3 给IE6、7、8追加min/max媒体查询功能∙9.3.4 使用Modernizr按需加载资源∙9.4 必要时将导航链接转换为下拉菜单∙9.5 高分辨率设备（未来趋势）∙9.6 小结附录∙附录1：响应式Web设计（HTML5和CSS3）工具集∙附录2：响应式Web设计（HTML5和CSS3）范例网站∙附录3：本书涉及的HTML5及CSS3标准索引∙附录4：本书提到的电影索引关于作者Ben Frain是一名具有十多年经验的网页设计师和前端工程师，直接与世界各地的客户和设计机构并肩工作。
css3中的三种选择器
css3中的三种选择器1. 选择器：CSS3新增了许多灵活查找元素的⽅法，极⼤的提⾼了查找元素的效率和精准度。
CSS3选择器与jQuery中所提供的绝⼤部分选择器兼容1. ⼀属性选择器：a) E[attribute] 表⽰存在attr属性即可；div[class]b) E[attr=val] 表⽰属性值完全等于val；div[class=mydemo]c) E[attr*=val] 表⽰的属性值⾥包含val字符并且在“任意”位置；div[class*=mydemo]d) E[attr^=val] 表⽰的属性值⾥包含val字符并且在“开始”位置；div[class^=mydemo]e) E[attr$=val] 表⽰的属性值⾥包含val字符并且在“结束”位置；div[class$=demos]2. ⼆伪类选择器-伪元素选择器：a) 之前学习的：a:hover a:link a:active a:visitedb) 以某元素相对于其⽗元素或兄弟元素的位置来获取⽆素的结构伪类f) E:first-child:查找E这个元素的⽗元素的第⼀个⼦元素Eg) E:last-child:最后⼀个⼦元素h) E:nth-child(n): 第n个⼦元素，计算⽅法是E元素的全部兄弟元素i) E:nth-last-child(n): 同E:nth-child(n) 相似，只是倒着计算j) E:nth-child(even): 所有的偶数k) E:nth-child(odd): 所有的奇数l) E:nth-of-type(n):指定类型m) E:empty 选中没有任何⼦节点的E元素，注意，空格也算⼦元素n) E:target 结合锚点进⾏使⽤，处于当前锚点的元素会被选中o) 重点说明：n遵循线性变化，其取值0、1、2、3、4、... 但是当n<=0时，选取⽆效p) 案例代码：/*第⼀个li元素*/li:first-child{color: red;}/*最后⼀个元素*/li:last-child{color: green;}/*获取第10个元素*/li:nth-child(10){color: orange;}/*获取倒数第3个li元素*/li:nth-last-child(3){color: purple;}/*获取索引顺序为6的倍数的li元素*/li:nth-child(6n){text-decoration: underline;border: 1px solid red;}/*获取所有索引为偶数的li元素*/li:nth-child(even){border: 1px solid black;}/*获取前5个li元素*/li:nth-child(-n+5){background-color: #ddd;}3. /*获取除了第⼀个外的元素*/li:nth-child(n+2){}c) n可是多种形式：nth-child(2n)、nth-child(2n+1)、nth-child(-n+5)等三伪元素选择器：a) 重点：E::before、E::afteri. 是⼀个⾏内元素，需要转换成块:display:block float:** position:ii. 必须添加content,哪怕不设置内容，也需要content:””iii. E:after、E:before 在旧版本⾥是伪类，在新版本⾥是伪元素，新版本下E:after、E:before会被⾃动识别为E::after、E::before，按伪元素来对待，这样做的⽬的是⽤来做兼容处理iv. E::before: 定义在⼀个元素的内容之前插⼊属性定义的内容与样式v. E::after: 定义在⼀个元素的内容之后插⼊属性定义的内容与样式vi. 注意：1. IE6、IE7与IE8（怪异模式Quirks mode）不⽀持此伪元素2. CSS2中 E:before或者E:after，是属于伪类的，并且没有伪元素的概念，CSS3中提出伪元素的概念 E::before和E::after，并且归属到了伪元素当中，伪类⾥就不再存在E:before或者 E:after伪类b) E::first-letter⽂本的第⼀个字母或字(不是词组)c) E::first-line ⽂本第⼀⾏d) E::selection 可改变选中⽂本的样式。
HTML5+CSS3 Web前端设计基础教程 第3版(第5章)
relative 相对，元素虽然偏移某个距离，但仍然占据原来的空间
absolute 绝对，元素在文档中的位置会被删除，定位后元素生成一个块级元素
5.2 CSS 定位
5.2.1 静态定位和固定定位 1．静态定位（static） 2．固定定位（fixed）
图5-10 鼠标为滚动时左侧导航固定
图5-11 页面滚动后左侧导航仍然固定
图5-5 父级容器宽度不够的情况
图5-6 浮动的容器相互拥挤的情况
5.1 浮动与清除浮动
5.1.2 清除浮动的三种方法
1．方法一：额外增加应用“clear: both;”规则的空容器 在浮动元素后额外增加一个空容器，比如“<div class="clear"></div>”，然后在CSS中 赋予.clear{clear:both;}属性即可清理浮动。
2．方法二：使用“overflow: ”规则清除浮动 向浮动容器的父容器添加“overflow:hidden;”或“overflow:auto;”可以清除浮动，在添 加overflow属性后，浮动的容器又回到了容器层，把容器高度撑起，达到了清理浮动的效果。
3．方法三：使用:after伪元素清除浮动 :after伪元素能够在被选元素的内容后面插入另一内容。在实际执行时，首先给浮动的容器添 加一个名为“clearfix”的Class，然后给这个Class添加一个:after伪元素实现在容器末尾添加一 个看不见的容器以清理浮动。
5.2 CSS 定位
CSS有关定位的属性包括position、z-index（层叠顺序）、top、 left、right、bottom和clip。
表5-1 position属性的取值及其含义
《HTML5网页设计》大纲
HTML5课程教学大纲课程编号：课程名称：HTML5网页设计编写教师：审核教师：编制日期：2021年4月17日一、课程基本信息1、课程编号：G4952、课程属性：岗位技能3、学时/学分：80学时/5学分4、先修课程：Office高效办公，网路技术与应用5、适用专业：软件技术二、课程简介与目标（一）课程简介《HTML5网页设计》是高职学院软件技术专业的岗位技能课，是该专业必修课程。
重点讲述了使用。
通过本课程的教学，一方面要使学生掌握HTML5、CSS3及JavaScript进行网页制作的技巧；另一方面，使学生能够熟悉网页设计流程、掌握网络中常见的网页布局效果，掌握一定的Web前端开发知识，为后续深入学习夯实基础。
本课程注重理论与实践相结合，通过实践性教学和案例教学，使学生掌握任务中的知识点，循序渐进地全面掌握网页设计中的所有内容，挖掘学生的创造性思维，支撑专业学习成果中相应指标点的达成。
（二）课程目标课程目标对学生的能力要求如下：课程目标1. 了解网页制作的流程。
课程目标2. 掌握HTML标签和HTML5基本结构，掌握CSS样式设计。
课程目标3. 探究教引导学生主动学内容，培养学生主动观察分析网页的能力，进而掌握合适的布局技巧和内容体现。
课程目标4. 掌握网页制作的知识和技能，和一定的欣赏与制作技巧，懂得从构图、色彩、形式上分析并了解网页的特征，并动手制作有自己想法的网页。
课程目标5. 掌握网络嵌入动画效果。
课程目标6. 了解过渡、变形、动画课程目标7. 学会制作各种企业、门户、电商类网站。
深刻地感受网页的魅力，形成正确的审美观和价值观。
课程目标8.培养学生的大局观，合作意识，团队合作能力。
三、课程目标对学习成果的支撑关系根据课程对各项毕业要求的支撑强度分别用“H（高）、M（中）、L（弱）”表示，支撑强度的含义是：该课程覆盖毕业要求指标点的多少，H至少覆盖80%，M至少覆盖50%，L至少覆盖30%。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
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实现的功能相同。
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
第24页
5.4.1 案例分析
【案例展示】网页底部导航的设计。 【知识要点】文本样式定义、链接伪类的应用。 【学习目标】掌握链接伪类的作用和用法。 参考代码：5-4.html
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第25页
5.4.2 案例制作
制作完成演示案例:网页底部导航的设计。 参考代码 5-4.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]选择器
: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选择器
第7页
5.1.3 E[attribute$=value]选择器
E[attribute$=value] 选择器匹配属性值以指定值value结尾 的每个元素。即选择名称为E的标签，且该标签定义了 attribute属性，attribute属性值包含后缀为value的字符串 。E可以省略，省略时表示匹配满足条件的任意元素。
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第17页
5.2.7 案例制作
制作完成演示案例:动态新闻列表局部页面。 参考代码 5-2.html
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第18页
5.3 伪元素选择器
本节主要内容：
案例分析
:before选择器
:after选择器
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
第五章 CSS3选择器
本章概述 本章的学习目标 主要内容
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第1页
本章概述
选择器是一种模式，用于选择需要添加样式的元 素。网页设计时使用选择器选择某些元素进行样 式定义，实现灵活的样式控制。本章将具体介绍 常用的CSS3选择器的功能和用法。
HTML5+ห้องสมุดไป่ตู้SS3网页设计基础
【案例展示】动态新闻列表局部页面的设置。 【知识要点】字体类型、大小、颜色、对齐方式、行间距 、结构化伪类选择器等。 【学习目标】掌握CSS文本修饰的常用属性和伪类选择器 的作用并灵活应用。 参考代码：5-2.html
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第12页
5.2.2 :first-child和:last-child选择器
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选择器
第9页
5.1.5 案例码 5-1.html
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第10页
5.2 伪类选择器
本节主要内容：
案例分析
:first-child和:last-child选择器
:first-child 选择器用于选取属于其父元素的首个子元素。 :last-child 选择器用于选择属于其父元素的最后一个子元 素。 参考代码：5-2-1.html
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第13页
5.2.3 :nth-child(n)和:nth-last-child(n)选择器
第5章 CSS3选择器
第20页
5.3.2 :before选择器
:before 选择器实现在被选元素的内容前面插入内容。 格式： E:before{ content:”文字”/url(); } content属性来指定要插入的内容，可以是用双引号括起来 的文本或用url()指定路径的图片。 参考代码：5-3-1.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选择器
第8页
5.1.4 E[attribute*=value]选择器
[attribute*=value] 选择器匹配属性值包含指定值value的 每个元素。即选择名称为E的标签，且该标签定义了 attribute属性，attribute属性值包含value的字符串。E可 以省略，省略时表示匹配满足条件的任意元素。
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第26页
5.5 实训
用CSS样式及属性选择器的知识设计客户案例展 示局部页面。 参考代码 5-5.html
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第27页
5.6 本章小结
本章介绍了常用的CSS3选择器，包括新增的3种属性选 择器、伪类选择器、微元素选择器和链接伪类等各种选择 器的功能和用法，并结合实例介绍了应用各种选择器对页 面元素进行样式定义的方法。
HTML5+CSS3网页设计基础
第5章 CSS3选择器
第6页
5.1.2 E[attribute^=value]选择器
E[attribute^=value]选择器匹配属性值以指定值value开头 的每个元素。即选择名称为E的标签，且该标签定义了 attribute属性，attribute属性值包含前缀为value的字符串 。E可以省略，省略时表示匹配满足条件的任意元素。
第5章 CSS3选择器
第2页
本章的学习目标
掌握CSS3中新增属性选择器的用法，能运用属 性选择器选择页面上的元素添加样式。
掌握常用的伪类选择器的用法，能够为名称相同 或类型相同的子元素定义不同的样式。