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中引用此类的标签的文本颜色
       将被设为蓝色。
       如:
	

我爱CSS

我爱CSS

我爱CSS

我爱CSS

而对应的样式表内容为: p{color:red;} .blue{color:blue} 则第三四个p标签的文本将被设为蓝色。 3)若只想对某个标签设置一种样式,则可用ID选择器办到这点。 如: 如:

我爱CSS

我爱CSS

我爱CSS

我爱CSS

我爱CSS

而对应的样式表内容为: p{color:red;} .blue{color:blue;} #orange{color:orange;} 则第五个标签的颜色为桔色。只对ID为"orange"的标签起作用,这就是ID选择器。 4)包含选择器的作用主要是为了提高样式表的优先级,另外,也方便引用某个标签的子标签 对其设样式。 如:

我爱CSS

我爱CSS

我爱CSS 我爱CSS

而对应的样式表内容为: .orange{color:orange;} 若只设置这条,说明上述所有p标签的文本颜色将被设成桔色。若只想对最后一个p 标签内的span标记设样式,可以加上一样式规则 。 .orange span{color:red} 这样span标签内的文本将被设为红色。span标签是p标签的子标签,所以这种选择器又叫做后代选择器。 5)组合选择器主要是为了方便对多个标签元素设置样式。 如:

我爱CSS

我爱CSS

我爱CSS 我爱CSS 而对应的样式表内容为: p,span,b{ color:red; } 通过这条样式规则可将上述三种标签的文本颜色设为红色。 6) 伪类选择器在CSS1中主要是用定义链接在不同状态下的样式效果, 包括活动状态、已被访问状态、未被访问状态及鼠标悬停状态等。 如: a:hover{text-decoration:none;} 表示当鼠标移动链接上时会自动去掉下划线。 7)选择器的优先级: ID选择器>类选择器>标签选择器 8)另外样式表的优先级: 行内样式表>嵌入样式表>外部样式表 外部样式表分为两类: 链接样式表: 如: 导入样式表: 如:

 

你可能感兴趣的:(CSS)