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>
CSS样式表与选择器
最新推荐文章于 2024-07-06 14:50:23 发布