商务网页第13课.pptVIP

4.1.4 CSS选择符类型及使用方法 标签选择符、类选择符、ID选择符、全局选择符、组合选择符、继承选择符、伪类选择符、字符串匹配的属性选择符等，其中前三者最为常用 1．标签选择符 标签选择符，就是把HTML的标签作为CSS的样式来定义和描述。在HTML中使用该标签时，自动跟踪选择该标签在CSS中定义的显示样式。每个HTML标签均可用作标签选择符，如h4、font、table等都能作为标签选择符。 定义标签选择符 内联样式，直接在标签内进行声明，形式为： 标签 style=属性1:属性1的值;属性2:属性2的值;…… 内部样式、外部样式，则需要在CSS代码中，在被定义的标签选择符后面用花括号“｛｝”将声明括起来。形式为： 标签选择符｛属性1:属性1的值;属性2:属性2的值;……｝ 引用标签选择符，不需要增加任何代码，正常编写HTML代码即可。 在CSS中，属性和属性值必须符合CSS规范。如果声明的属性在CSS中没有，或者某个属性值不符合该属性的要求，则该CSS语句不能生效。下面是典型的错误语句： 上例的错误有两处： 第1行的属性“head-height”是不存在的； 第2行的“color”属性的值“sky-blue”也是不存在的或超出范围的。 （2）类选择符 类选择符是非常灵活的，是由用户自己定义的。类选择符相当于自定义显示样式。类选择符中描述的属性及属性值同样必须符合CSS规范。 例如：在一个网页中，共有3个段落，我们希望每一个段落都有不同的颜色区分，以强调网页的效果。这种情况下，就无法使用标签选择符进行处理，因为只有一个段落标签p，无论定义多少次标签p的显示样式，都应按照最后定义的显示样式执行。所以无法采用p选择符实现各个段落的不同显示效果，这个时候就需要采用类选择符来处理。 类选择符能够在内部样式和外部样式中使用，内联样式无法使用类选择符。 定义类选择符，需要使用“.类选择符名”的方式来实现，定义方法为： .类选择符名｛属性1:属性1的值;属性2:属性2的值;……｝ 引用类选择符，需要使用class=类选择符名的方式实现引用，引用方法为： 标签 class=类选择符名标签实例/标签 html head title类选择符示例/title style type=text/css /* type=“text/css”定义CSS的内容为文本类型 */ .red /*定义了名称为“red”的类选择符 */ { color: #FF0000; /* 红色 */ font-size:16px; /* 文字大小 */ } .green /*定义了名称为“green”的类选择符 */ { color: #00FF00; /* 绿色 */ font-size:20px; /* 文字大小 */ } /style /head body p class=red !-- class=“red”表示使用了类选择符“red” -- 该段落选用red类选择符后的显示效果 /p p class=green !-- class=“green”表示使用了类选择符“green”-- 该段落选用green类选择符后的显示效果 /p h3 class=red !-- 对于同属于文本类的标题标签h3等均适用。标题默认为粗体字 -- 文档标题h3也可以选用red类选择符 /h3 /body /html 很多时候标签选择符和类选择符是组合使用的，标签选择符着重处理“某类标签统一风格”方面的事情，而类选择符在统一风格的基础上，处理个性化的事情。 例如：一个网页共分5个段落，统一要求蓝色字、20px字号，但第三段因为内容重要，要求显示为红色字、25px字号大小。 html head title类选择符与标签选择符/title style type=text/css p{ /* 定义段落标签p选择符 */ color: #0000FF; font-size:20px; } .red{ /* 定义类选择符red */ color: #FF0000; /* 红色 */ font-size:25px; } /style /head body p第一段使用标签选择符的统一规则/p p第二段使用标签选择符的统一规则/p p class=red第三段使用red类选择