版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
Web前端技术签到扫码下载文旌课堂APP扫码签到签到方式教师通过“文旌课堂APP”生成签到二维码，并设置签到时间，学生通过“文旌课堂APP”扫描“签到二维码”进行签到。
CSS3基础第五章随着人们对网页美观度的要求越来越高，HTML增加了很多新功能。而这些功能的增加导致HTML变得越来越杂乱，HTML页面也越来越臃肿。于是，CSS诞生了，它为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS3是CSS的最新版本，是科技发展、时代进步的产物。本章将介绍CSS3的基础知识。章节导读掌握CSS3的基本语法。掌握在网页中引入CSS3样式的方式，包括行内样式、内嵌样式表和链接样式表。熟悉CSS3选择器的含义，掌握不同种类选择器的使用方法。熟悉CSS3的特性，包括继承性、层叠性和优先级。学习目标学习CSS3的基础知识，激发专业思维，夯实知识基础。感受中国优秀传统文化，增强爱国意识，提升民族自豪感。素质目标第五章CSS基础/章节导航/5.1
CSS3的基本语法5.2在网页中引入CSS3样式5.3CSS3选择器5.4
CSS3的继承性和层叠性实战演练————为“金企鹅教育”网站主页链接样式表CSS3的基本语法5.1CSS3是一种用于设置网页样式并允许将样式信息与网页内容分离的标记性语言。使用CSS3样式表可以使网页文件更小、下载速度更快、更新和维护网页更加方便，因此CSS3样式表在网页制作中得到了广泛的应用。CSS3样式表是由一个或多个CSS3样式组成的。CSS3样式是由选择器和声明组成的，其基本格式如图所示。5.1CSS3的基本语法CSS3样式的基本格式CSS3样式通过选择器匹配HTML5文档中的不同元素，并对它们应用声明中设置的样式属性。5.1CSS3的基本语法在CSS3样式表中，空格符号是不被解析的，因此可以利用空格键、Tab键、Enter键对CSS3代码进行格式化排版，以方便阅读和管理。XIAOJIQIAO小技巧5.1CSS3的基本语法此外，为了提高CSS3样式表的可读性，编写代码时一般都需要添加必要的注释。CSS3注释由“/*”开始，由“*/”结束，具体格式为：/*注释内容*/
在网页中引入CSS3样式5.2HTML5与CSS3是两个作用不同的语言，要让它们同时对一个网页产生作用，必须在HTML5页面中引入CSS3样式，常用的方式有行内样式、内嵌样式表和链接样式表。5.2在网页中引入CSS3样式行内样式又称内联样式，它直接为HTML5标签设置style属性，具体格式为：其中，style是标签的属性，它自身又包括了多个属性，这些属性与属性值的规范与CSS3样式规则相同。例如，使用行内样式设置段落标签<p>的样式，代码如下：行内样式的形式简单，只对其所在的标签起作用。但是，行内样式也存在着一些缺陷，每一个标签在设置样式时都需要添加style属性，增加的代码会使页面体积变大，这无法解决HTML5页面臃肿的问题。5.2.1行内样式5.2在网页中引入CSS3样式/*注释内容*/<pstyle="font-size:30px;color:green;">段落</p>内嵌样式表又称内部样式表，在这种样式表中，所有样式代码都写在<style>…</style>标签中。内嵌样式表放置在HTML5文档的<head>…</head>标签中，具体格式为：其中，type的属性值为“text/css”，表示<style>标签中的内容是CSS3样式，该属性只有这一个属性值，在HTML5中可以将其省略。5.2.2内嵌样式表5.2在网页中引入CSS3样式<styletype="text/css">
选择器{属性1:属性值1;属性2:属性值2;…}</style>超链接虽然<style>标签可以写在HTML5文档的任意位置，但由于浏览器是从上到下解析文档的，所以一般会将CSS3样式代码放在文档头部，便于浏览器提前识别解析。因此，<style>标签一般放置在<head>标签中的<title>标签之后。Gaoshoudianbo高手点拨5.2在网页中引入CSS3样式内嵌样式表相对于行内样式的优势是可以作用于其所在的整个页面，但是当需要制作一个含有多个页面的网站时，使用内嵌样式表仍然不能发挥出CSS3的最大优势。链接样式表是将所有样式放在一个或多个扩展名为“.css”的外部样式表文件中，然后使用<link/>标签将样式表文件链接至HTML5文档中，具体格式为：
其中，<link/>标签需放在<head>标签中；href属性表示链接文件的位置；type属性表示链接文件的类型，其值“text/css”表示样式表文件；rel表示当前文档与链接文档之间的关系，其值“stylesheet”表示文档的外部样式表。链接样式表最大的特点是将CSS3代码和HTML5代码分离开，这样可以将一个CSS3文件链接到不同的HTML5文档中，从而极大限度地重复使用CSS3样式代码，降低网站的页面代码冗余度，提高网站的可维护性。5.2.3链接样式表5.2在网页中引入CSS3样式<linkhref="CSS3文件位置"type="text/css"rel="stylesheet"/>CSS3选择器5.3选择器是CSS3的重要组成部分，使用它可以指明CSS3样式对HTML5文档中的哪些标签生效。CSS3选择器包括基本选择器、复合选择器、伪类选择器、伪元素选择器和属性选择器等。5.3CSS3选择器基本选择器中包括标签选择器、类选择器和ID选择器，下面对它们进行详细介绍。5.3.1基本选择器1.标签选择器标签选择器是指直接引用标签名称的选择器，其基本格式为：使用标签选择器可以统一设置HTML5文档中某类标签的样式。例如，使用标签选择器设置<p>标签的样式，代码如下：标签选择器是最常用的选择器，通常用它来统一设置某些元素的基本样式。5.3CSS3选择器标签名{属性1:属性值1;属性2:属性值2;…}
p{font-size:20px;color:lightblue;}
超链接CSS3中有一个特殊的选择器——通配选择器，用“*”表示，用于匹配HTML5文档中的所有标签。例如，使用通配选择器重置浏览器的部分默认样式，代码如下：ZISHIKU知识库*{margin:0;padding:0;border:0;list-style:0;}
5.3CSS3选择器2.标签选择器类选择器以“.”为前缀，跟随一个自定义的类选择器名，其基本格式为：可以通过设置class属性将类选择器样式应用于标签，就是在定义好类选择器后，为标签设置class属性（class属性可以设置多个属性值，各属性之间用空格隔开），并将其属性值设置为事先定义好的类选择器名。类选择器可以使不同的元素拥有相同的样式，也可以使相同的元素拥有不同的样式。5.3CSS3选择器.类选择器名{属性1:属性值1;属性2:属性值2;…}3.ID选择器ID选择器以“#”为前缀，跟随一个自定义的ID选择器名，其基本格式为：可以通过设置id属性将ID选择器样式应用于标签，就是在定义好ID选择器后，为标签设置id属性，并将其属性值设置为事先定义好的ID选择器名。ID选择器的使用方式与类选择器基本相同，区别在于ID选择器只能应用于一个元素，而类选择器可以应用于多个元素。5.3CSS3选择器#ID选择器名{属性1:属性值1;属性2:属性值2;…}超链接类选择器可以应用于页面中任意数量的标签，适合用来标识样式相同的对象。而ID选择器一般用于标识页面上具有唯一性的元素。zISHIku知识库5.3CSS3选择器
<head>
<metacharset="utf-8">
<title>例5-1</title>
<style>
/*使用ID选择器设置标题文本的样式，文本居中对齐，字体类型为楷体*/
#title{text-align:center;font-family:"楷体";}
/*使用类选择器设置作者文本的样式，文本居中对齐，字体类型为楷体，字体大小为20px，字体加粗*/
.author{text-align:center;font-family:"楷体";font-size:20px;font-weight:bold;}
/*使用标签选择器设置词句文本的样式，首行缩进2个字符，字体类型为宋体，字体大小为20px*/【例5-1】
使用基本选择器设置网页元素样式（以下提供部分代码）。5.3CSS3选择器
p{text-indent:2em;font-family:"宋体";font-size:20px;} </style> </head> <body> <h1id="title">沁园春·雪</h1> <h2class="author">毛泽东</h2> <p>北国风光，千里冰封，万里雪飘。望长城内外，惟余莽莽；大河上下，顿失滔滔。山舞银蛇，原驰蜡象，欲与天公试比高。须晴日，看红装素裹，分外妖娆。</p> <p>江山如此多娇，引无数英雄竞折腰。惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。一代天骄，成吉思汗，只识弯弓射大雕。俱往矣，数风流人物，还看今朝。</p> </body>【例5-1】
使用基本选择器设置网页元素样式（以下提供部分代码）。5.3CSS3选择器【例5-1】页面效果如图所示。5.3CSS3选择器使用基本选择器设置网页元素样式的页面效果5.3.2复合选择器1.标签选择器交集选择器是由两个选择器直接连接构成的，其基本格式为：其中，第一个选择器必须是标签选择器，第二个选择器必须是类选择器或ID选择器，两个选择器名必须连续写，中间不能有空格，如p.p1{…}、p#p2{…}等。交集选择器的作用范围是同时满足前后两个选择器定义的元素，就是要求前者定义的元素必须同时设置了类属性或id属性，且属性值为后者的类选择器名或ID选择器名，该元素的样式是3个选择器样式（即第一个选择器、第二个选择器、交集选择器）的层叠效果。5.3CSS3选择器标签名.类选择器名{属性1:属性值1;属性2:属性值2;…}标签名#ID选择器名{属性1:属性值1;属性2:属性值2;…}2.并集选择器并集选择器又称分组选择器，由两个或两个以上的任意选择器组成，不同选择器之间用“,”隔开，用于实现“集体声明”，就是同时对多个选择器进行定义，其基本格式为：使用并集选择器还可以将不同选择器的相同样式定义抽取出来放在同一个地方集中定义，从而极大地减少CSS3的代码量，降低代码的冗余度，提高网页加载的速度。5.3CSS3选择器选择器1,选择器2,…{属性1:属性值1;属性2:属性值2;…}3.后代选择器后代选择器又称包含选择器，它通过空格连接不同选择器，用于匹配指定元素的所有后代元素，其基本格式为：其中，左边的选择器端包含两个或多个用空格隔开的选择器，这些选择器既可以是基本选择器，也可以是复合选择器。例如，divp{…}表示选择div元素后代中的所有p元素，并为其设置样式。5.3CSS3选择器选择器1选择器2…{属性1:属性值1;属性2:属性值2;…}4.子代选择器子代选择器通过“>”连接两个选择器，用于匹配某元素的子元素，其基本格式为：其中，选择器1表示要匹配的父元素，选择器2表示父元素的子元素。例如，在HTML5文档中有<div><p>…</p></div>，可使用div>p{…}选择div元素中的p元素，并为其设置样式；在HTML5文档中有<div><span><p>…</p></span></div>，则使用div>p{…}设置的样式对其中的p元素无效，因为该p元素不属于div元素的下一级元素。5.3CSS3选择器选择器1>选择器2{属性1:属性值1;属性2:属性值2;…}超链接相对于子代选择器而言，后代选择器的作用范围更广，在祖先元素之下的所有后代元素都将受影响。子代选择器只能影响父元素下一级的元素。zhIDIANMIJIN指点迷津超链接5.3CSS3选择器5.相邻选择器相邻选择器通过“+”连接两个选择器，用于匹配紧接在某元素后的一个元素，且这两个元素有相同的父元素，其基本格式为：例如，在HTML5文档中有<div><h1>…</h1><p>…</p></div>，可使用h1+p{…}选择紧接在h1元素后出现的p元素，并为其设置样式，其中h1元素和p元素拥有相同的父元素。5.3CSS3选择器选择器1+选择器2{属性1:属性值1;属性2:属性值2;…}6.兄弟选择器兄弟选择器通过“~”连接两个选择器，它在相邻选择器的基础上，通过连接顺序匹配相邻的元素之后，会将后续同级别的该类型元素一同匹配，其基本格式为：
例如，在HTML5文档中有<div><h1>…</h1><p>…</p><p>…</p></div>，可使用h1~p{…}选择紧邻在h1元素后出现的p元素，以及其后出现的所有同级p元素，无论它们是否被其他元素隔开。5.3CSS3选择器选择器1~选择器2{属性1:属性值1;属性2:属性值2;…}超链接相邻选择器与兄弟选择器的区别在于，相邻选择器会严格按照连接顺序匹配相邻的元素，成功匹配后不会匹配该元素的后续元素，而是继续检索页面对象，直到再次出现符合连接顺序的元素，才会再次匹配相邻元素。兄弟选择器会按照连接顺序匹配相邻的元素，成功匹配后会接着匹配后续元素中与该元素相同的同级元素。Gaoshoudianbo高手点拨5.3CSS3选择器<head> <metacharset="utf-8"> <title>例5-2</title> <style> /*使用类选择器设置作者文本的样式，字体大小为20px，字体加粗*/ .author{font-size:20px;font-weight:bold;} /*使用标签选择器设置所有词句文本的样式，首行缩进2个字符，字体类型为宋体，字体大小为20px*/ p{text-indent:2em;font-family:"宋体";font-size:20px;} /*使用并集选择器设置标题和作者文本的相同样式，文本居中对齐，字体为楷体*/ #title,.author{text-align:center;font-family:"楷体";} /*使用后代选择器设置“山舞……比高。”和“须晴日，”的样式，字体大小为30px*/ .p1strong{font-size:30px;} /*使用子代选择器设置“一代……大雕。”的样式，字体大小为30px*/ .p2>strong{font-size:30px;} /*使用相邻选择器设置“北国……雪飘。”的样式，文本下画线*/ h2+p{text-decoration:underline;} /*使用并集选择器设置“山舞……妖娆。”的样式，文本上画线*/【例5-2】
使用复合选择器设置网页元素样式（以下提供部分代码）。5.3CSS3选择器
p.p1{text-decoration:overline;}
/*使用兄弟选择器设置“江山……今朝。”的样式，文本下画线*/
hr~p{text-decoration:underline;}
</style>
</head>
<body>
<h1id="title">沁园春·雪</h1>
<h2class="author">毛泽东</h2>
<p>北国风光，千里冰封，万里雪飘。</p>
<p>望长城内外，惟余莽莽；大河上下，顿失滔滔。</p>
<pclass="p1"><strong>山舞银蛇，原驰蜡象，欲与天公试比高。
</strong><em><strong>须晴日，</strong>看红装素裹，分外妖娆。</em></p>
<hr/>
<p>江山如此多娇，引无数英雄竞折腰。</p>
<p>惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。</p>
<pclass="p2"><strong>一代天骄，成吉思汗，只识弯弓射大雕。
</strong><em><strong>俱往矣，</strong>数风流人物，还看今朝。</em></p>
</body>【例5-2】
使用复合选择器设置网页元素样式（以下提供部分代码）。5.3CSS3选择器【例5-2】
页面效果如图所示。5.3CSS3选择器使用复合选择器设置网页元素样式的页面效果伪类用于定义元素的特殊状态。伪类选择器以英文冒号“:”为前缀，跟随伪类名，在冒号前可以使用其他选择器限制伪类应用的范围，其基本格式为：伪类选择器包括动态伪类选择器、结构伪类选择器、否定伪类选择器、状态伪类选择器等。5.3.3
伪类选择器选择器名:伪类名{属性1:属性值1;属性2:属性值2;…}5.3CSS3选择器动态伪类选择器用于设置行为类样式，就是用户与页面进行交互时页面的样式。动态伪类选择器包括两种形式。（1）锚点伪类，只用于设置链接的样式，有“:link”和“:visited”。其中，“:link”表示链接被访问前的样式；“:visited”表示链接被访问后的样式。例如，将链接访问前的字体颜色设置为黑色使用a:link{color:black;}；将链接访问后的字体颜色设置为红色使用a:visited{color:red;}。1．动态伪类选择器5.3CSS3选择器（2）行为伪类，也称为用户操作伪类，可用于设置任意元素的样式，有“:hover”“:active”和“:focus”。其中，“:hover”表示鼠标指针移动至元素上时的样式“:active”表示鼠标指针单击元素区域但不松开时的样式；“:focus”表示某个元素获得焦点时的样式，常用于表单元素上。例如，将鼠标指针移至链接上方时的样式设置为浅蓝色背景使用a:hover{background_x0002_color:lightblue;}；将鼠标指针单击链接但不松开时的样式设置为绿色背景使用a:active{background_x0002_color:green;}；将表单控件获得焦点时的样式设为黄色背景使用input:focus{background_x0002_color:yellow;}。1．动态伪类选择器5.3CSS3选择器超链接同时使用“:link”“:visited”“:hover”和“:active”设置超链接的样式时，“:hover”必须定义在“:link”和“:visited”之后，否则“:hover”选择器设置的样式将无法显示；“:active”必须定义在“:hover”之后，否则“:active”选择器设置的样式将无法显示。Gaoshoudianbo高手点拨5.3CSS3选择器结构伪类选择器可以根据文档的结构匹配元素，常见的结构伪类选择器及其说明如表所示。结构伪类选择器示例描述:first-childp:first-child匹配属于其父元素的首个子元素的每个p元素:last-childp:last-child匹配属于其父元素的最后子元素的每个p元素:nth-child(n)p:nth-child(2)匹配属于其父元素的第二（n）个子元素的每个p元素:nth-last-child(n)p:nth-last-child(2)匹配属于其父元素的倒数第二（n）个子元素的每个p元素（从最后一个子元素开始计数）:nth-of-type(n)p:nth-of-type(2)匹配属于其父元素的第二（n）个p元素的每个p元素
5.3CSS3选择器表
常见的结构伪类选择器及其说明2．结构伪类选择器2．结构伪类选择器结构伪类选择器示例描述:nth-last-of-type(n)p:nth-last-of-type(2)匹配属于其父元素的倒数第二个p元素的每个p元素（从最后一个子元素开始计数）:first-of-typep:first-of-type匹配属于其父元素的首个p元素的每个p元素:last-of-typep:last-of-type匹配属于其父元素的最后p元素的每个p元素:only-childp:only-child匹配属于其父元素的唯一子元素的每个p元素:only-of-typep:only-of-type匹配属于其父元素的唯一p元素的每个p元素:emptyp:empty匹配没有任何内容的每个p元素
5.3CSS3选择器表
常见的结构伪类选择器及其说明:not()表示否定伪类选择器，用于匹配非指定元素或选择器的每个元素。例如，匹配非p元素的每个元素使用:not(p)。3．动态伪类选择器CSS3中包含十几种状态伪类选择器，常用的有以下3种。
:enabled，用于匹配每个已启用的元素（大多用在表单元素上）。
:disabled，用于匹配每个被禁用的元素（大多用在表单元素上）。
:checked，用于匹配每个已被选中的input元素（只用于单选按钮和复选框）。4．状态伪类选择器5.3CSS3选择器/*使用动态伪类选择器设置样式*/a:link{color:black;}
/*将链接访问前的字体颜色设置为黑色*/a:visited{color:red;}
/*将链接访问后的字体颜色设置为红色*/h1:hover{background-color:lightblue;}
/*将鼠标指针移至h1标题上方时的背景颜色变为浅蓝色*//*使用结构伪类选择器设置样式*/p:nth-child(3){font-size:15px;}p:nth-child(4){font-size:20px;}p:nth-child(5){font-size:25px;}p:nth-child(6){font-size:30px;}/*使用状态伪类选择器设置样式*/input[type="text"]:enabled{background:lightblue;}
/*将可用的文本框的背景颜色设置为浅蓝色*/input[type="text"]:disabled{background:gray;}
/*将不可用的文本框的背景颜色设置为灰色*/【例5-3】
使用伪类选择器设置网页元素样式（以下提供部分代码）。5.3CSS3选择器【例5-3】
页面效果如图所示。5.3CSS3选择器使用伪类选择器设置网页元素样式的页面效果伪元素选择器用于定义元素指定部分的样式，以双冒号为前缀，跟随伪类或伪类对象，在双冒号前可以使用其他选择器限制伪类应用的范围，其基本格式为：5.3.4伪元素选择器选择器名::伪类名{属性1:属性值1;属性2:属性值2;…}在CSS3中，常用的伪元素选择器有::before选择器和::after选择器。
::before选择器用于在选定的元素前插入内容。使用该选择器时，需使用content属性指定要插入的内容。例如，在p元素前插入内容“CSS3”使用p::before{content:"CSS3";}。
::after选择器用于在选定的元素后插入内容。使用该选择器时，同样需使用content属性指定要插入的内容。例如，在p元素后插入内容“CSS3”使用p::after{content:"CSS3";}。5.3CSS3选择器
/*使用::before选择器在h2元素前插入内容“作者：”*/
h2::before{content:"作者：";}
/*使用::after选择器在h2元素后插入内容“（词人）”*/
h2::after{content:"（词人）";}【例5-4】使用伪元素选择器在指定元素前后插入指定内容（以下提供部分代码），页面效果如图所示。使用伪元素选择器设置网页元素样式的页面效果5.3CSS3选择器属性选择器根据标签的属性匹配元素。CSS3中共有7种属性选择器，为便于后面讲解，此处先创建一个简单的HTML5页面，本节中的所有选择器都将针对该页面进行操作。5.3.5属性选择器5.3CSS3选择器<head>
<metacharset="utf-8">
<title>例5-5</title>
<!--设置超链接的样式-->
<style>
a{
font-size:30px;
…（省略部分代码，详见“素材与案例\第5章\例5-5.html”）
}
</style>
</head>
<body>
<navalign="center">
<!--标记10个超链接标签-->
<ahref="#"title="w3c"id="first">1</a>【例5-5】
创建一个简单的导航示例。在<body>标签中构建导航示例的结构，在<head>标签中添加<style>标签，并使用标签选择器设置导航示例的样式（以下提供部分代码）。5.3CSS3选择器
<ahref="#"title="testweb"lang="zh">2</a>
<ahref="#"title="thisisalink"lang="zh-cn">3</a>
<ahref="#"lang="zh-tw">4</a>
<ahref="#"title="zh-cn">5</a>
<ahref="#"title="weblink"lang="zh">6</a>
<ahref="#"title="opentheweb"lang="cn">7</a>
<ahref="#"title="closetheweb"lang="en-zh">8</a>
<ahref="#"title="">9</a>
<ahref="#"id="last">10</a>
</nav></body>【例5-5】
创建一个简单的导航示例。在<body>标签中构建导航示例的结构，在<head>标签中添加<style>标签，并使用标签选择器设置导航示例的样式（以下提供部分代码），页面效果如图所示。导航示例的页面效果5.3CSS3选择器E[attr]选择器是最基本的属性选择器，用于匹配所有拥有attr属性的E元素，无论attr属性值是什么。例如，匹配所有拥有id属性的a元素，设置其边框、背景、字体颜色，页面效果如所示。代码如下：
E[attr]选择器不仅能够匹配单一属性，还可以匹配多个属性，如E[attr1][attr2]。1．E[attr]选择器5.3CSS3选择器
a[id]{border:2pxsolid#2f4f4f;background:white;color:cadetblue;}应用E[attr]选择器的页面效果E[attr="value"]选择器用于匹配attr属性值为“value”的E元素，它缩小了匹配范围，能够更加精确地匹配需要的元素。例如，匹配id属性值为“first”的a元素，设置其边框、背景、字体颜色，页面效果如图所示。代码如下：与E[attr]选择器相同，E[attr="value"]选择器也可以匹配多个属性，如E[attr1="value1"][attr2="value2"]。2．E[attr="value"]选择器5.3CSS3选择器
a[id="first"]{border:2pxsolid#2f4f4f;background:white;color:cadetblue;}应用E[attr="value"]选择器的页面效果E[attr~="value"]选择器用于匹配attr属性值列表中包含了“value”的E元素，不需要完全匹配。如果“value”是一个列表，需要用空格隔开。例如，匹配所有title属性值列表中包含了“web”的a元素，设置其背景、字体颜色，页面效果如图所示。代码如下：3．E[attr~="value"]选择器5.3CSS3选择器
a[title~="web"]{background:lightcyan;color:#2f4f4f;}应用E[attr~="value"]选择器的页面效果E[attr^="value"]选择器用于匹配attr属性值以“value”开头的E元素。例如，匹配title属性值以“http”开头的a元素，设置其背景、字体颜色，页面效果如图所示。代码如下：4．E[attr^="value"]选择器5.3CSS3选择器a[title^=http]{background:#ffffff;color:#2f4f4f;}应用E[attr^="value"]选择器的页面效果E[attr$="value"]选择器用于匹配attr属性值以“value”结尾的E元素。例如，匹配title属性值以“link”结尾的a元素，设置其背景、字体颜色。代码如下：5．E[attr$="value"]选择器5.3CSS3选择器a[title$="link"]{background:lightcyan;color:#2f4f4f;}应用E[attr^="value"]选择器的页面效果E[attr*="value"]选择器用于匹配attr属性值中包含字符串“value”的E元素，无论“value”在属性值的什么位置。例如，匹配title属性值中含有“t”的a元素，设置其背景、字体颜色，页面效果如图所示。代码如下：6．E[attr*="value"]选择器5.3CSS3选择器a[title*="t"]{background:lightcyan;color:#2f4f4f;}应用E[attr*="value"]选择器的页面效果超链接E[attr*="value"]选择器与E[attr~="value"]选择器的不同之处在于，E[attr~="value"]选择器匹配的值需要包含在值列表中并用空格隔开，而E[attr*="value"]选择器没有这个限制，“value”字符串出现在属性值的任意位置都能够匹配成功。Gaoshoudianbo高手点拨5.3CSS3选择器E[attr|="value"]选择器用于匹配attr属性值为“value”或以“value”开头的元素。例如，匹配lang属性值为“zh”或以“zh”开头的a元素，设置其背景、字体颜色，页面效果如图所示。代码如下：7．E[attr|="value"]选择器5.3CSS3选择器a[lang|="zh"]{background:#ffffff;color:darkolivegreen;}应用E[attr|="value"]选择器的页面效果CSS3的继承性和层叠性5.45.4CSS3的继承性和层叠性5.4.1继承性继承性是指在HTML5结构中，后代元素会继承祖先元素的CSS3样式。能够被继承的属性包括字体类型、字号、字体颜色、行距等，不能被继承的属性包括边框、边界、背景、定位、布局、尺寸等。例如，设置body元素的字号为20px，那么在网页中除了单独设置过字号样式的元素外，其他元素都将继承该属性。5.4CSS3的继承性和层叠性5.4.2层叠性层叠性是指当为一个元素设置了多个样式时，这些样式会根据各自的权重来确定呈现的优先级，然后其中一个值会层叠/覆盖掉其他值，并显示最终效果。下面详细介绍各类选择器的权重值。
ID选择器：100。
类、伪类与属性选择器：10。
标签选择器：1。
通配选择器：0。除此之外，行内样式的优先级是最高的，权重值为1000。继承样式的优先级是最低的，没有权重值。当权重值相同时，遵循就近原则。
<style> #dividp{color:red;} /*权重值为100+1=101*/ .divclass.pclass{color:green;}/*权重值为10+10=20*/</style>…（省略部分代码，具体内容详见“素材与案例\第5章\例5-6.html”）<body> <divclass="divclass"id="divid"> <pclass="pclass">权重值的计算</p> </div><!--权重值计算：101>20，故字体颜色显示为红色--></body>【例5-6】
创建HTML5文档，参照以下代码段分别在<style>和<body>标签中输入代码，并为p元素设置两种样式，然后查看网页运行效果。5.4CSS3的继承性和层叠性超链接CSS3中含有一个特殊的声明“!important”，写在样式代码的最后，用于提高指定样式规则的优先级，它的权重值为正无穷。Tuozhanyuedu拓展阅读超链接5.4CSS3的继承性和层叠性超链接前几章中已经为“金企鹅教育”网站主页添加了多个模块，但是由于该网页文件未链接CSS样式表，导致网页的页面效果杂乱无章。下面就带领大家一起为“金企鹅教育”网站主页链接样式表，并为网页中的不同元素设置样式。——为“金企鹅教育”网站主页链接样式表实战演练WEB扫一扫超链接步骤1
在HBuilderX中导入本书配套素材“素材与案例\第5章\实战演练\JinqieProject”文件夹，右击HBuilderX主界面左侧栏中的“JinqieProject”文件夹，在弹出的快捷菜单中选择“新建(N)”→“6.css文件”，如图所示。——为“金企鹅教育”网站主页链接样式表实战演练WEB新建css文件超链接步骤2
弹出“新建css文件”对话框，输入css文件名称“index”，选择模板“default”，然后单击“创建(N)”按钮，如图所示。——为“金企鹅教育”网站主页链接样式表实战演练WEB“新建css文件”对话框超链接步骤3
“金企鹅教育”网站主页的样式表创建成功，文档显示在编辑窗口中，如图所示。其中，“index.css”文档位于“JinqieProject”项目文件夹中。——为“金企鹅教育”网站主页链接样式表实战演练WEB
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 老年人护理跨学科合作
- 神经系统护理：评估与康复
- 2026年碳封存工程环境安全评估与减排量核算数据支持体系构建
- 2026年生物医学新技术临床应用条例合规指引
- 2026年量子隐形传态与量子纠缠分发技术进展
- 2026年月球资源勘测系统工程卫星星座部署方案
- 2026年电堆功率密度提升与贵金属用量降低平衡
- 烟雾病并发症的预防与护理
- 护理专业职业发展
- 2026年高风险机构有序退出：市场化退出与保护金融消费者权益的平衡术
- 体检报告书写规范
- 2024年10月自考02160流体力学试题及答案含评分参考
- 《冠心病》课件(完整版)
- JBT 8688-2013 塑料离心泵标准规范
- 《准备单元雪地上的“足迹”》教学课件
- 2015年10月浙江省自考00504艺术概论试题及答案含解析
- 心理健康家庭教育指导活动
- 玻镁板吊顶施工工艺
- 防电信诈骗（课件）小学生主题班会通用版
- 高一物理必修一实验题
- 高考日语基础归纳总结与练习(一轮复习)
评论
0/150
提交评论