商务网页第13课.pptxVIP

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代码即可。（1）外部导入样式外部导入样式与外部链接样式的基本作用是相同的，CSS源文件的代码规则也完全相同，只是引用CSS代码文件的技术实现方式不同：一种是外部链接方式，一种是外部导入方式。但外部导入样式也有其优点，不仅可以导入到HTML中，也可以导入到CSS样式中。外部导入样式特别适用于对IO访问要求高、网页响应速度快的场景。定义并引用外部导入样式，需要使用“@import”来实现，导入到文件头中的style与/style之间。也可以理解为，把内部样式中的定义中的“选择符”和“声明”部分打包成CSS源文件，用导入的方法将其导回来。定义和引用外部导入样式与定义和引用外部链接样式类似，同样分两部分：一部分是在HTML文档头中做外部导入样式的声明；另一部分是在CSS源文件中定义选择符及其声明。在CSS中，属性和属性值必须符合CSS规范。如果声明的属性在CSS中没有，或者某个属性值不符合该属性的要求，则该CSS语句不能生效。下面是典型的错误语句：上例的错误有两处：第1行的属性“head-height”是不存在的；第2行的“color”属性的值“sky-blue”也是不存在的或超出范围的。（2）类选择符类选择符是非常灵活的，是由用户自己定义的。类选择符相当于自定义显示样式。类选择符中描述的属性及属性值同样必须符合CSS规范。例如：在一个网页中，共有3个段落，我们希望每一个段落都有不同的颜色区分，以强调网页的效果。这种情况下，就无法使用标签选择符进行处理，因为只有一个段落标签p，无论定义多少次标签p的显示样式，都应按照最后定义的显示样式执行。所以无法采用p选择符实现各个段落的不同显示效果，这个时候就需要采用类选择符来处理。类选择符能够在内部样式和外部样式中使用，内联样式无法使用类选择符。定义类选择符，需要使用“.类选择符名”的方式来实现，定义方法为：.类选择符名｛属性1:属性1的值;属性2:属性2的值;……｝引用类选择符，需要使用class=类选择符名的方式实现引用，引用方法为：标签 class=类选择符名标签实例/标签htmlheadtitle类选择符示例/titlestyle type=text/css /* type=“text/css”定义CSS的内容为文本类型 */.red /*定义了名称为“red”的类选择符 */{ color: #FF0000; /* 红色 */ font-size:16px; /* 文字大小 */}.green /*定义了名称为“green”的类选择符 */{ color: #00FF00; /* 绿色 */ font-size:20px; /* 文字大小 */}/style/headbody 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字号大小。htmlheadtitle类选择符与标签选择符/titlestyle type=text/cssp{ /* 定义段落标签p选择符 */ color: #0000FF; font-size:20px;}.red{ /* 定义类选择符red */ color: #FF0000; /* 红