给大家带来CSS教程：熟悉层叠划定规矩相互感化
在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识。在本书的一节已经先容过，款式表大概有三个分歧的制造者、用户和扫瞄器。这三个来历的款式表大概在局限上有堆叠，它们依据层叠划定规矩相互感化。
4.6.1层叠的按次
CSS的层叠对每个款式划定规矩指定一个权重。假如要使用多少个划定规矩，那末权重最年夜的谁人划定规矩具有优先权。层叠划定规矩根据上面几个步骤举行：
1.查找有抵触的元素
扫瞄器会找到那些存在疑问的元素和属性的声明，假如相干联的选择器婚配存在疑问的元素，则声明合用。
2.款式表的来历
依照划定规矩的主要性（一般大概主要）和来历（用户、制造者大概扫瞄器）来从低到高排序：
1)扫瞄器的缺省款式；
2)用户界说的一般款式；
3)制造者界说的一般款式；
4)制造者界说的主要性（“!important”声明）款式；
5)用户界说的主要性（“!important”声明）款式。
提醒：主要性（“!important”声明），请拜见本书一节。
关于制造者界说的内部CSS文件引进的划定规矩，它们的权重取决于它们引进的按次。比方：
<linkrel="stylesheet"href="basic.css"type="text/css"media="all"/>
<linkrel="stylesheet"href="font.css"type="text/css"media="all"/>
则font.css中的界说高于basic.css中的界说。
关于在款式表中利用@import划定规矩引进的其他款式表，优先级划定规矩一样合用。
嵌进式款式表的划定规矩高于从文件引进的款式划定规矩。行内款式表则又高于嵌进式款式表。
3.选择器的特别性
声明的第2排序基于选择器的特别性：特别的选择器超出一样平常的选择器。伪元素和伪类分离被视为一样平常元素和一样平常类。
4.划定规矩呈现的前后序次
最初，依据划定规矩呈现的前后序次来分列。假如两条划定规矩具有不异的权重，不异的来历和不异的特别性，则后呈现的划定规矩超出先呈现的划定规矩。
引进的款式表中的划定规矩被以为呈现在款式表自己的一切划定规矩之前。
除一般声明的“!important”指定，上述战略赐与制造者的款式表比用户款式表更年夜的权重。
4.6.2特别性的盘算
既然有层叠的划定规矩，那末，假如有以下代码，其在扫瞄器内会怎样显现呢？
.warning{color:red;}
p{color:green;}
<pclass=”warning”>层叠和承继的划定规矩怎样完成？</p>
此代码在扫瞄器内显现如-31所示。
-31选择器的特别性
这是因为类选择器“warning”和范例选择器“p”的“特别性”分歧。
特别性（specificity）形貌了分歧选择器的绝对权重（weight）。一个选择器的特别性是如许盘算的：
·假如CSS属性是经由过程(X)HTML元素的style属性界说的，则记为a=1，不然记为0；
因为style属性是写在(X)HTML标签内的，因而不存在选择器，以是：a=1,b=0,c=0,且d=0；
·盘算选择器中ID选择器的数目，计为b；
·盘算选择器中类选择器、属性选择器和伪类的数目，计为c；
·盘算选择器中范例选择器的数目，计为d；
·疏忽伪元素。
将这4个数字（a,b,c,d）相连（数字进制要以年夜的为准），失掉特别性。比方：
{……}特别性=0,0,0,0
li{……}特别性=0,0,0,1
ulli{……}特别性=0,0,0,2
ulol+li{……}特别性=0,0,0,3
h1+{……}特别性=0,0,1,1
ulolli.warning{……}特别性=0,0,1,3
li.menu.level{……}特别性=0,0,2,1
#x34y{……}特别性=0,1,0,0
<pstyel=”……”>特别性=1,0,0,0
特别性高的划定规矩会代替特别性低的划定规矩，不管其誊写的前后按次怎样，比方：
h1{colorred;}0,0,0,1
bodyh1{colorgreen;}0,0,0,2（胜出）
大概：
h2.grape{colorpurple;}0,0,1,1(胜出)
h2{colorsilver;}0,0,0,1
4.6.3承继和特别性
在特别性的框架下，承继的特别性为“0”。也就是说，任何显式的划定规矩声明城市掩盖失落承继的款式，比方有以下代码：
em{color:blue;}
p.list{color:gray;}
<pclass="list">承继的特别性为<em>“0”</em>。</p>
固然“p.list”的特别性为“0,0,1,1”，可是，对“em”的color声明仍是会掩盖失落从“p.list”承继的color款式，因而在扫瞄器内显现如-32所示。
-32承继与特别型
因而，假如必要让p内的em能出现和p一样的色彩，则必要以下界说：
p.list,
p.listem{colorgray;}
4.6.4主要性
固然层叠和特别性决意了CSS划定规矩的最初使用效果，可是，也能够经由过程声明某个划定规矩的“主要性”来进步此划定规矩的权重，比方-33所示。
-33主要性的体现
固然ID选择器的特别性高于范例选择器，可是因为范例选择器（div）属性值前面增加了“!important”主要性声明，因而“color:red”这条声明的特别性最高。
“!important”主要性声明的权重乃至高于内联式款式，比方有以下代码，其在扫瞄器内显现如-34所示。
div{color:red!important;}
<divstyle="color:blue;">设定了style的div</div>
-34主要性的权重高于内嵌式款式
在CSS1中，制造者的“!important”划定规矩超出用户的“!important”划定规矩。可是在CSS2中，用户的“!important”划定规矩具有最高的优先级，如许可让网页更具易用性，比方有些目力欠好的用户，大概会设定对照年夜的字体，如许就能够避免制造者界说了过小的字体而利用户浏览坚苦。
4.6.5非CSS的体现类内容
如今仍旧有一些制造者在(X)HTML文档内拔出一些体现类的内容，比方<font>标签和align属性，这些体现类的内容被以为具有0特别性，而且被看成是拔出在作者款式表的开首部分，因而大概会被前面界说的款式划定规矩掩盖。
比方以下代码在扫瞄器内显现如-35所示。
p{
background:yellow;
text-align:left;
}
<palign="right"><palign="right">，CSS：text-align:left;</p>
-35主要性的权重高于内嵌式款式
由4-35读者能够看到，固然<p>的align属性界说为“right”，即右对齐，可是因为CSS中界说了“text-align:left;”，因而笔墨仍是左对齐显现。
可是，假如是上面的代码：
.test{color:green;}
<pclass="test">p内的示例<fontcolor="blue">笔墨</font>。</p>
则<font>内的笔墨仍然是蓝色（blue），由于关于<font>，<p>的color属于承继，因而标签内的属性高于承继值，可是假如增添CSS划定规矩：
font{color:red;}
则<font>内的笔墨会变成白色（red），即“color="blue"”被CSS的“color:red;”掩盖。
提高易用性。使用CSS可以结构化HTML，例如：标签只用来控制段落，heading标签只用来控制标题，table标签只用来表现格式化的数据等等。 只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweavermxXX很难理解。 可以使用 CSS 检查工具进行设计。 Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。 Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。 HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器） 技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。 不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。 在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。
页:
[1]