书接上回... <从分类到结构之CSS选择器>
-------------------------------------------回顾---------------------------------------------------------------------
上一次我们说了两点内容,一起来回顾一下
1 css的分类:
a 外部样式:
(独立存在的后缀为.css的文件。需要在页面内用链接或者导入的方式引入,才能对该页面生效;可作用的范围甚大,甚至另外一台服务器上的CSS文件都可以被当前页连接调用;实现了页面内容和样式在文件上的分离。)
b 内嵌样式
(写在当前页面内的<head></head>标记中的<style></style>标记中,作用的范围只是当前页面。实现了页面内容和样式在标记结构上的分离【样式在head 部分内容在body部分】)
c 行内样式
(写在标记内,用style属性引出,作用范围只针对该标记内容生效。)
以上三种CSS样式写的位置不同,作用范围也不同。而其中外部样式和内嵌样式都很好的体现了样式表的作用 :内容和样式的分离。
2 选择器
a 标记选择器(针对某一个标记生效,如例子中针对当前页面内的所有h1标记生效):
b 类别选择器(在内容标记中用class属性引出,并对该标记的内容生效)
c id选择器(在某个标记的属性中,用id 属性引出,并针对该标记的内容生效)
------------------------------------------回顾完毕--------------------------------------------------------------
说到声明我们来看下面这个图解
那么我们今天关心的就是声明部分:
声明分为两种:
一 集体声明
二 全局声明(*特殊的集体声明)
一 下面我们来看看集体声明的例子:
h1, h2, h3, h4, h5, p{ /* 集体声明 */
color:purple; /* 文字颜色 */
font-size:15px; /* 字体大小 */
}
h2.special, .special, #one{ /* 集体声明 */
text-decoration:underline; /* 下划线 */
}
上面就是针对前面的几个选择器进行了依次集体声明.定义他们的文字颜色\字体大小等属性.
所以,声明就是一种对于选择器进行的动作(概念).
二 接着再看全局声明:
*{ /* 全局声明 */
color: purple; /* 文字颜色 */
font-size:15px; /* 字体大小 */
}
h2.special, .special, #one{ /* 集体声明 */
text-decoration:underline; /* 下划线 */
}
color: purple; /* 文字颜色 */
font-size:15px; /* 字体大小 */
}
h2.special, .special, #one{ /* 集体声明 */
text-decoration:underline; /* 下划线 */
}
以上用*号表示全局,针对所有选择器进行声明,但是全局声明的优先级最低,所以一旦定义的属性冲突,那么全局声明就退位让闲了.
好了今天就说这么两个例子.
关于CSS选择器的嵌套,继承等关系...我们下回分解.....
本文转自 angerfire 51CTO博客,原文链接:http://blog.51cto.com/angerfire/117364,如需转载请自行联系原作者