CSS样式表与选择器

HTML解题思路： （1）先大致写出HTML框架，即定义内容部分。 （2）然后根据需要写对应的CSS样式，即定义表现部分。 （3）根据需要可将CSS文件定义在外部，用链接样式表或导入样式表将外部CSS文件引入到当前页面，实现了表现与内容的分离。 CSS样式选择器分类： （1）标签选择器。 （2）类选择器。 （3）ID选择器。 （4）伪类选择器。 （5）包含选择器。 （6）组合选择器。 样式表与选择器用法注意事项： 1）标签选择器一般用于某个页面中具有相同类型的标签上。如： p{color:red;}则在此页面中的所有p标签的文本颜色都被设为 红色。 2）标签选择器具有同一性，而不具有特定性，若想对同一类型 的某个或若干个标签设置另一种样式，则可用类选择器帮你。 如：.blue{color:blue}在HTML中引用此类的标签的文本颜色 将被设为蓝色。 如： <p>我爱CSS</p> <p>我爱CSS</p> <p class="blue">我爱CSS</p> <p class="blue">我爱CSS</p> 而对应的样式表内容为： p{color:red;} .blue{color:blue} 则第三四个p标签的文本将被设为蓝色。 3）若只想对某个标签设置一种样式，则可用ID选择器办到这点。 如： 如： <p>我爱CSS</p> <p>我爱CSS</p> <p class="blue">我爱CSS</p> <p class="blue">我爱CSS</p> <p id="orange">我爱CSS</p> 而对应的样式表内容为： p{color:red;} .blue{color:blue;} #orange{color:orange;} 则第五个标签的颜色为桔色。只对ID为"orange"的标签起作用，这就是ID选择器。 4）包含选择器的作用主要是为了提高样式表的优先级，另外，也方便引用某个标签的子标签 对其设样式。 如： <p class="orange">我爱CSS</p> <p class="orange">我爱CSS</p> <p class="orange"> 我爱CSS <span>我爱CSS</span> </p> 而对应的样式表内容为： .orange{color:orange;} 若只设置这条，说明上述所有p标签的文本颜色将被设成桔色。若只想对最后一个p 标签内的span标记设样式，可以加上一样式规则 。 .orange span{color:red} 这样span标签内的文本将被设为红色。span标签是p标签的子标签，所以这种选择器又叫做后代选择器。 5）组合选择器主要是为了方便对多个标签元素设置样式。 如： <p class="orange">我爱CSS</p> <p class="orange">我爱CSS</p> <span>我爱CSS</span> <b>我爱CSS</b> 而对应的样式表内容为： p,span,b{ color:red; } 通过这条样式规则可将上述三种标签的文本颜色设为红色。 6) 伪类选择器在CSS1中主要是用定义链接在不同状态下的样式效果， 包括活动状态、已被访问状态、未被访问状态及鼠标悬停状态等。 如： a:hover{text-decoration:none;} 表示当鼠标移动链接上时会自动去掉下划线。 7）选择器的优先级： ID选择器>类选择器>标签选择器 8）另外样式表的优先级： 行内样式表>嵌入样式表>外部样式表 外部样式表分为两类： 链接样式表： 如： <link rel="stylesheet" type="text/css" href="a.css"/> 导入样式表： 如： <style type="text/css"> @import url("a.css"); /*注意语法不能写错*/ </style>