CSS样式在网页设计中遵循3个基本规则：继承性、层叠性和特殊性，这些规则确保CSS样式能够准确、高效地发挥作用。
CSS继承性在网页设计中最典型的应用就是在body元素中定义整个页面的字体大小、字体颜色等基本页面属性，这样包含在body元素内的其他元素都将继承该基本属性，以实现页面显示效果的统一。
【示例1】启动Dreamweaver，新建文档，保存为test.html。切换到代码视图下，在<body>标签中输入下面HTML代码：
<div id="wrap">
<div id="header">
<div id="menu">
<ul>
<li><span>首页</span>
</li>
<li>菜单项</li>
</ul>
</div>
</div>
<div id="main">
<p>主体内容</p>
</div>
</div>
然后，在<head>标签中输入<style type="text/css">标签，定义一个内部样式表。
接着，在内部样式表中输入下面CSS代码，定义一个标签样式，在body上定义字体大小为12像素，通过继承性，包含在body元素的所有其他元素都将继承该属性，并设置包含的字体大小为12像素。body { font-size:12px;}最后，保存文档，按F12键，在浏览器中预览。
灵活利用CSS继承性，可以优化CSS代码，节省开发时间，但是继承也有其局限性。首先，有些属性是不能继承的。例如，background属性用来设置元素的背景，它是没有继承性的。实际上它也不应该有继承性，如果在网页设计时所有包含元素都继承了背景属性，那么文档看起来就会很怪异。CSS强制规定部分属性不具有继承特性，分类说明如下：
•边框属性。
•边界属性。
•补白属性。
•背景属性。
•定位属性。
•布局属性。
•元素宽高属性。、
继承是非常重要的，使用它可以简化代码，降低CSS样式的复杂性。但是，如果在网页中所有元素都大量继承样式，那么判断样式的来源就会变得很困难。一般对于字体、文本类属性等涉及网页中通用属性可以使用继承。例如，网页显示字体、字号、颜色、行距等可以在body元素中统一设置，然后通过继承影响文档中所有文本。
下级标签通过继承性获取上级对象的样式，但是这些样式影响力是非常弱的，如果元素本身包含了相冲突的样式，则将忽略继承得来的样式。对于相同CSS起源来说，不同位置的样式其优先级也是不同的：一般来说，行内样式会优先于内嵌样式表，内部样式表会优先于外部样式表。而被附加了!important关键字的声明会拥有最高的优先级。
【示例2】在下面示例中，分别在p元素行内定义一个内嵌属性样式（style="font-size:14px"），然后在文档的头部定义一个内部样式p { font-size:24px;}，最后在外部样式表文件（style1.css）中定义一个外部样式p { font-size:36px;}，并利用<link>标签链接到文档中。在浏览器中预览，则根据CSS样式的优先级，最终显示结果为14像素。
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>示例代码
</title>
<style type="text/css">p {font-size:24px;}
</style>
<link href="style1.css" rel="stylesheet" type="text/css" />
</head><body>
<p style="font-size:14px">段落文本
</p></body>
</html>
对于常规选择器它们都拥有一个优先级加权值，说明如下。
•标签选择器：优先级加权值为1。
•伪元素或伪对象选择器：优先级加权值为1。
•类选择器：优先级加权值为10。
•属性选择器：优先级加权值为10。
•ID选择器：优先级加权值为100。
•其他选择器：优先级加权值为0，如通配选择器等。然后，以上面加权值数为起点来计算每个样式中选择器的总加权值数。计算的规则是：
•统计选择器中ID选择器的个数，然后乘以100。
•统计选择器中类选择器的个数，然后乘以10。
•统计选择器中的标签选择器的个数，然后乘以1。依此方法类推，最后把所有加权值数相加，即可得到当前选择器的总加权值，最后根据加权值来决定哪个样式的优先级大。
【示例3】在下面代码中，把每个选择器的特殊性进行加权，希望读者好好研究一下，它们都具有比较实用的典型性，其他选择器的特殊性也将依此类推。
/*[选择器特殊性加权值]*/
div{/*特殊性加权值＝1*/
color:Green;}
div h2{/*特殊性加权值：1+1＝2*/
color:Red;}.blue{
/*特殊性加权值：10＝10*/
color:Blue;}
div.blue{/*特殊性加权值：1+10＝11*/
color:Aqua;}
div.blue .dark{/*特殊性加权值：1+10+10＝21*/
color:Maroon;}#header{/*特殊性加权值：100＝100*/
color:Gray;}
#header span{/*特殊性加权值：100＋1＝101*/
color:Black;}
提示：
•被继承的值加权值为0。一个元素显示声明的样式都可以覆盖继承来的样式。
•内联样式优先。带有style属性的元素，其内联样式的特殊性可以为100或者更高，总之，它拥有比上面提到的选择器具有更大的优先权。 •在相同加权值下，CSS将遵循就近原则，也就是说靠近元素的样式具有最大优先权，或者说排在最后的样式具有最大优先权。
•CSS定义了一个!important命令，该命令被赋予最大权力。也就是说不管特殊性如何，以及样式位置的远近，!important都具有最大优先权。
当前文章标题：网站建设时的CSS特性
当前URL：http://www.lyjtt.cn/news/wzzz/3057.html
上一篇：网页设计时的CSS属性
下一篇：网页设计时的文本输入和编辑
