本站原创摘 要：在网站的前台界面设计中,页面的布局起着至关重要的作用,而对于DIV+CSS网页布局技术,主要是应用CSS样式来实现页面的布局效果控制.本文从CSS样式应用类型和优先关系两个方面对CSS样式的应用进行了分析.
关 键 词 ：CSS样式表；CSS选择器；优先级
中图分类号：G642 文献标识码：A
在网页设计中,我们通常利用CSS来定义页面中各元素的样式,使之呈现出我们所需要的效果.而在WEB标准中,有一点很重要的就是要实现内容与格式的分离,通常将内容用HTML标记来定义,内容的显示形式则利用CSS样式来实现.在网页中使用到的CSS样式有着不同的类型和运用方式.
1.CSS样式表的类型及优先级
1.1 浏览器默认的CSS样式表
当我们在设计网页时,如果没有对网页中的相关元素设置CSS样式,那么,在浏览器中浏览网页时,将根据浏览器缺省的样式来显示网页内容.
1.2 外部样式表文件
外部样式表就是将所定义的CSS样式单独存储在一个扩展名为.css的文件中,当网页中需要应用指定的.css文件时,就通过标记来引用.
如果定义了一个外部样式表文件11.css,在网页中引用这个CSS文件的方法如下所示：
1.3 内部样式表
内部样式表指的是将CSS样式的定义放置在网页文件的标记之间,如：
1.4 内联样式表
内联样式表是将CSS样式的定义直接放置在HTML标记的属性STYLE之中,如：
标题内容
1.5 CSS样式表的优先级
以下四种CSS样式表如果应用在同一个网页中,它们的优先级别是不一样的.
一般情况下,它们的优先级别由低到高依次是：浏览器默认的样式表、外部样式表、内部样式表、内联样式表[2].
但要注意的是内部样式表和外部样式表的优先关系并不总是如此,如果外部样式表的引用放在内部样式表的定义之后,那么,外部样式表的优先级将高于内部样式表[2].
2.不同CSS选择器的优先级
在页面元素上应用CSS样式时,还应考虑CSS选择器的优先问题.CSS选择器一般分为两大类,一类是基本选择器,包括标签选择器、类选择器、ID选择器这三种；另一类是组合选择器,组合选择器是将三种基本选择器按一定的方式组合在一起而构成的选择器[1].
我们先来看如下的代码： 网页设计
在以上代码中我们可以发现,作用于
标记的CSS样式都不止一种,而不同的CSS样式中文字的颜色都是不一样的,那么这些段落中的文字究竟应该按哪一种格式显示呢?
当这几种不同的选择器同时作用于网页中的同一个元素时,它们所定义的样式之间有可能会存在冲突.当样式之间产生冲突后,就要通过它们的优先级来决定到底由哪些样式会产生作用,这一点同样取决于它们的优先级.
CSS选择器的优先级一般按以下方法判断：
2.1 比较CSS选择器的权重值,权重越大,优先级越高
几种基本CSS选择器的权重值如图1所示.
图1 不同CSS选择器的权重值
那么,组合选择器的权重又是多少呢?
我们知道,组合选择器其实就是由三种基本选择器按一定的方式组合在一起而形成的,所以组合选择器的权重值就是将里面所包含的不同选择器根据组合的数目和各自的权重值进行累加而得到的.
如：#main p.font1{ }就是一个组合样式,它的权重值就是100+1+10等于111.
2.2 权重值相等时,位置越靠后,优先级越高
对于权重值相等的CSS选择器,我们可以通过它们在CSS样式表中定义时出现的先后位置来判断.在样式表文件中出现的位置越靠后,它的优先级别就越高[1].
如：
网页设计与制作
在以上代码中,段落中同时使用了两个类样式,这两个样式文字颜色的设置上存在冲突,而它们的权重值则是相等的.但我们注意到,在样式表文件中font2定义的位置比.font1靠后,所以它的优先级高于.font1,文字显示为绿色.
2.3 通过!important可以改变选择器的优先级
在定义CSS规则时,如果在属性值后面加上!important,那么它的优先级将是最大的[2].如：
.font1{color：#f00!important； /*红色*/} 网页设计与制作
这时,虽然内联样式的权重值为1000font1的权重值为1,但是在.font1样式中,我们在color属性中加上了!important,这时它的优先级将超越内联样式,所以段落文字显示为.font1中所设置的红色.
3.结语
在使用DIV+CSS技术进行网页布局时,我们一定要熟悉各种CSS样式表的类型及它们应用于同一个网页时的优先顺序；同时,对于多种CSS选择器作用于同一页面元素时,如果样式属性产生了冲突,一定要考虑清楚它们的优先级别,这样才不会出现设置的CSS样式在页面中无效的情况,所以,只有熟练掌握了CSS样式在网页中的应用,在进行页面设计时才不会出错,不会走弯路.