1、4.1.4 CSS选择符类型及使用方法l 标签选择符、类选择符、ID选择符、全局选择符、组合选择符、继承选择符、伪类选择符、字符串匹配的属性选择符等，其中前三者最为常用1标签选择符l 标签选择符，就是把HTML的标签作为CSS的样式来定义和描述。在HTML中使用该标签时，自动跟踪选择该标签在CSS中定义的显示样式。每个HTML标签均可用作标签选择符，如、等都能作为标签选择符。l 定义标签选择符内联样式，直接在标签内进行声明，形式为：内部样式、外部样式，则需要在CSS代码中，在被定义的标签选择符后面用花括号“”将声明括起来。形式为：标签选择符属性1:属性1的值;属性2:属性2的值;l 引用标签选
2、择符，不需要增加任何代码，正常编写HTML代码即可。l 在CSS中，属性和属性值必须符合CSS规范。如果声明的属性在CSS中没有，或者某个属性值不符合该属性的要求，则该CSS语句不能生效。下面是典型的错误语句：l 上例的错误有两处：第1行的属性“head-height”是不存在的；第2行的“color”属性的值“sky-blue”也是不存在的或超出范围的。（2）类选择符l 类选择符是非常灵活的，是由用户自己定义的。类选择符相当于自定义显示样式。类选择符中描述的属性及属性值同样必须符合CSS规范。l 例如：在一个网页中，共有3个段落，我们希望每一个段落都有不同的颜色区分，以强调网页的效果。这种情
3、况下，就无法使用标签选择符进行处理，因为只有一个段落标签，无论定义多少次标签的显示样式，都应按照最后定义的显示样式执行。所以无法采用选择符实现各个段落的不同显示效果，这个时候就需要采用类选择符来处理。l 类选择符能够在内部样式和外部样式中使用，内联样式无法使用类选择符。l 定义类选择符，需要使用“.类选择符名类选择符名”的方式来实现，定义方法为：.类选择符名属性类选择符名属性1:1:属性属性1 1的值的值;属性属性2:2:属性属性2 2的值的值;l 引用类选择符，需要使用class=类选择符名的方式实现引用，引用方法为：标签实例标签实例/类选择符示例/*type=“text/css”定义CSS
4、的内容为文本类型*/.red /*定义了名称为“red”的类选择符*/color:#FF0000;/*红色*/font-size:16px;/*文字大小*/.green /*定义了名称为“green”的类选择符*/color:#00FF00;/*绿色*/font-size:20px;/*文字大小*/该段落选用red类选择符后的显示效果 该段落选用green类选择符后的显示效果 文档标题h3也可以选用red类选择符 l 很多时候标签选择符和类选择符是组合使用的，标签选择符着重处理“某类标签统一风格”方面的事情，而类选择符在统一风格的基础上，处理个性化的事情。l 例如：一个网页共分5个段落，统一要
5、求蓝色字、20px字号，但第三段因为内容重要，要求显示为红色字、25px字号大小。类选择符与标签选择符p/*定义段落标签p选择符*/color:#0000FF;font-size:20px;.red/*定义类选择符red*/color:#FF0000;/*红色*/font-size:25px;第一段使用标签选择符的统一规则 第二段使用标签选择符的统一规则 第三段使用red类选择符的个性规则 第四段使用标签选择符的统一规则 第五段使用标签选择符的统一规则（3）ID选择符l ID选择符的定义和使用方法跟类选择符相似，但其只能在HTML中使用一次，因而更具针对性。l ID选择符同样也只能在内部样式和
6、外部样式中使用。l 定义ID选择符，需要使用“#”，定义方法为#ID选择符名属性1:属性1的值;属性2:属性2的值;l 引用ID选择符，需要在标签中使用“id=ID选择符名”的形式实现，设置方法为标签实例l ID选择符的优点并不突出，但ID选择符可以被JavaScript脚本引用。ID选择符示例/*type=text/css定义CSS的内容为文本类型*/#red /*定义了名称为“red”的ID选择符*/color:#FF0000;/*红色*/font-size:16px;/*文字大小*/#green /*定义了名称为“green”的ID选择符*/color:#00FF00;/*绿色*/fon
7、t-size:20px;/*文字大小*/该段落选用ID选择符red后的显示效果 该段落选用ID选择符green后的显示效果 文档标题h3也可以选用ID选择符red 4.1.5 CSS中的度量单位l 在CSS中，度量单位主要有颜色单位、长度单位、时间单位、角度单位和频率单位5种。其中，颜色单位、长度单位比较常用，下面予以介绍。1颜色单位l CSS中的颜色单位与HTML中的颜色单位是一致的，不仅具有英文表达、十六进制值表达、RGB代码表达方式，还增加了“inherit（继承）”属性，可以直接继承父元素的颜色属性值。在CSS中，各个属性基本都具有“inherit”属性，不仅增强了CSS样式的使用效率
8、，还能保证风格一致，简化代码，提高效率。2长度单位l 在CSS中，长度单位比较丰富，主要长度单位表达形式如表4.1.6 CSS注释l 编写CSS代码同样需要养成良好的书写习惯。对文档进行注释是一个好习惯。CSS中的注释方法与HTML不同，在CSS代码体内，用“/*注释说明*/”对文档进行注释说明。ID选择符示例 /*type=text/css定义CSS的内容为文本类型*/#red /*定义了名称为“red”的ID选择符*/color:#FF0000;/*红色*/font-size:16px;/*文字大小*/#green /*定义了名称为“green”的ID选择符*/color:#00FF00;/*绿色*/font-size:20px;/*文字大小*/该段落选用ID选择符red后的显示效果 该段落选用ID选择符green后的显示效果 文档标题h3也可以选用ID选择符red
