第2章CSS选择器与相关特性

CSS网页设计标准教程第1部分CSS核心原理第2章CSS选择器与相关特性构造CSS规则2.1基本CSS选择器2.2在HTML中使用CSS的方法2.3复合选择器2.4CSS的继承特性2.5通过上一章的学习，了解了在网页设计中引入CSS的意义。引入CSS的核心目的就是实现网页结构内容和表现形式的分离，将原来由HTML语言所承担的一些与结构无关的功能剥离出来，改由CSS来完成。本章介绍CSS是如何工作的。重点介绍CSS的“选择器”这一核心概念，以及相关的两个特性——“继承”和“层叠”。2.1构造CSS规则在具体介绍CSS之前，先思考一个生活中的问题。张飞{身高:185cm;体重:105kg;性别:男;性格:暴躁;民族:汉族;}这个表实际上是由3个要素组成的，即姓名、属性和属性值。CSS的作用就是设置网页的各个组成部分的表现形式。因此，如果把上面的表格换成描述网页上一个标题的属性表，可以设想应该大致如下：2级标题{字体:宋体;大小:15像素;颜色:红色;装饰:下划线}再进一步，如果把上面的表格用英语写出来：h2{font-family:宋体;font-size:15px;color:red;text-decoration:underline;}CSS的思想就是首先指定对什么“对象”进行设置，然后指定对该对象的哪个方面的“属性”进行设置，最后给出该设置的“值”。因此，概括来说，CSS就是由3个基本部分——“对象”、“属性”和“值”组成的。2.2基本CSS选择器在CSS的3个组成部分中，“对象”是很重要的，它指定了对哪些网页元素进行设置，因此，它有一个专门的名称——选择器（selector）。2.2.1标记选择器styleh1{color:red;font-size:25px;}/styleh1color:red;font-size:25px;选择器属性值属性值声明声明{}图2.1CSS标记选择器2.2.2类别选择器.classcolor:green;font-size:20px;类别选择器属性值属性值声明声明类别名称{}图2.2类别选择器htmlheadtitleclass选择器/titlestyletype=text/css.red{color:red;/*红色*/font-size:18px;/*文字大小*/}.green{color:green;/*绿色*/font-size:20px;/*文字大小*/}/style/headbodypclass=redclass选择器1/ppclass=greenclass选择器2/ph3class=greenh3同样适用/h3/body/html2.2.3ID选择器#idcolor:yellow;font-size:30px;ID选择器属性值属性值声明声明{}图2.6ID选择器htmlheadtitleID选择器/titlestyletype=text/css#bold{font-weight:bold;/*粗体*/}#green{font-size:30px;/*字体大小*/color:#009900;/*颜色*/}/style/headbodypid=blodID选择器1/ppid=greenID选择器2/ppid=greenID选择器3/ppid=boldgreenID选择器4/p/body/html2.3在HTML中使用CSS的方法2.3.1行内式htmlheadtitle页面标题/title/headbodypstyle=color:#FF0000;font-size:20px;text-decoration:underline;正文内容1/ppstyle=color:#000000;font-style:italic;正文内容2/ppstyle=color:#FF00FF;font-size:25px;font-weight:bold;正文内容3/p/body/html2.3.2内嵌式htmlheadtitle页面标题/titlestyletype=text/cssp{color:#0000FF;text-decoration:underline;font-weight:bold;font-size:25px;}/style/headbodyp这是第1行正文内容……/pp这是第2行正文内容……/pp这是第3行正文内容……/p/body/html2.3.3链接式htmlheadtitle页面标题/titlelinkhref=02-08.csstype=text/cssrel=stylesheet/headbodyh2CSS标题/h2p这是正文内容……/ph2CSS标题/h2p这是正文内容……/p/body/htmlh2{color:#0000FF;}p{color:#FF0000;text-decoration:underline;font-weight:bold;font-size:15px;}2.3.4导入式@importurl(sheet1.css);@importurl(sheet1.css);@importurl('sheet1.css');@importsheet1.css;@importsheet1.css;@import'sheet1.css';2.4复合选择器2.4.1交集选择器h3.classcolor:red;font-size:23px;选择器属性值属性值声明声明标记类别名称{}图2.13标记类别选择器h3.special.specialh3图2.14交集选择器示意图!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN=选择器.class/titlestyletype=text/cssp{/*标记选择器*/color:blue;}p.special{/*标记.类别选择器*/color:red;/*红色*/}.special{/*类别选择器*/color:green;}/style/headbodyp普通段落文本（蓝色）/ph3普通标题文本（黑色）/h3pclass=special指定了.special类别的段落文本（红色）/ph3class=special指定了.special类别的标题文本（绿色）/h3/body/html2.4.2并集选择器h3.specialh3,.special图2.16并集选择器示意图htmlheadtitle并集选择器/titlestyletype=text/cssh1,h2,h3,h4,h5,p{/*并集选择器*/color:purple;/*文字颜色*/font-size:15px;/*字体大小*/}h2.special,.special,#one{/*集体声明*/text-decoration:underline;/*下画线*/}/style/headbodyh1示例文字h1/h1h2class=special示例文字h2/h2h3示例文字h3/h3h4示例文字h4/h4h5示例文字h5/h5p示例文字p1/ppclass=special示例文字p2/ppid=one示例文字p3/p/body/html2.4.3后代选择器p这是最外层的文字，span这是中间层的文字，b这是最内层的文字，/b/span/p最外层是p标记，里面嵌套了span标记，span标记中又嵌套了b标记，则称span是p的子元素，b是span的子元素。•html•head•title后代选择器/title•styletype=text/css•pspan{/*嵌套声明*/•color:red;/*颜色*/•}span{color:blue;/*颜色*/}/style/headbodyp嵌套使span用CSS（红色）/span标记的方法/p嵌套之外的span标记（蓝色）/span不生效/body/html后代选择器的使用非常广泛，不仅标记选择器可以以这种方式组合，类别选择器和ID选择器都可以进行嵌套。下面是一些典型的代码：.speciali{color:red;}/*使用了属性special的标记里面包含的i*/#oneli{padding-left:5px;}/*ID为one的标记里面包含的li*/td.out.insidestrong{font-size:16px;}/*多层嵌套，同样实用*/上面的第3行使用了3层嵌套，实际上更多层的嵌套在语法上都是允许的。2.5CSS的继承特性2.5.1继承关系图2.20包含多层列表的页面htmlheadbodytitleh1ullipliulolullililililililililiem父子父子图2.21继承关系树型图