来讲讲:CSS款式表层叠(cascade)处置抵触
如果单独使用DIV而不加任何CSS,那么它在网页中的效果和使用是一样的。原文毗连:http://www.dudo.org/article.asp?id=252
即便在不太庞大的款式表中,也大概会有两个大概更多个划定规矩找到统一元素。CSS经由过程一个叫做层叠(cascade)的历程处置这类抵触。层叠给每一个划定规矩分派一个主要水平指数。作者界说的款式具有最高的主要性指数,其次是用户界说的款式。可是为了加强用户的把持才能,用户能够经由过程为任何划定规矩增添一个!important来进步它的主要性指数,让它的优先级高于任何划定规矩,乃至是比作者的!important还要高。
因而,层叠主要性指数的序次顺次为:
[*]标志为!important的用户款式
[*]标志为!important的作者款式
[*]作者款式
[*]用户款式
[*]扫瞄器/用户代办署理的默许款式
为了盘算划定规矩的优先级,每品种型的选择符都有一个响应的数值,因为每一个选择器都由多少选择符构成,以是选择器的优先指数由选择符对应的数值相加而成,数值越高,优先级越高。CSS中的选择符有四类:
[*]行内款式(InlineStyle),如<spanstyle="color:red">...</span>
[*]ID选择符(IDselectors),如#myid
[*]类、属性选择符、伪类(Classes,attributesandpseudo-classes),如.class{...}、、:hover
[*]元素(elements)、伪元素选择符(pseudo-elements),如p{...}、:first-line{...}
怎样来丈量呢?如前所述,它们每类都有分歧的数值暗示,个中:
行内款式为:1000
ID选择符为:0100
类选择符为:0010
元素款式为:0001
这里要指出的是,一切这些数值都不是10进制数字,1000只是代码它是一个行内款式,
比方,body#wrapp{...},那末它的优先级指数就是1+100+1=102,而bodydiv#wrapp{...}的优先级指数就是1+1+100+1=103。
再看一下别的的例子:
*{}0
li:first-line{}2(oneelement,onepseudo-element)
ulol+li{}3(threeelements)
ulolli.red{}13(oneclass,threeelements)
style=””1000(oneinlinestyling)
divp{}2(twoHTMLselectors)
divp.sith{}12(twoHTMLselectorsandaclassselector)
body#darkside.sithp{}112(HTMLselector,idselector,classselector,HTMLselector;1+100+10+1)
看这段代码:
[*]#wrap#content{color:blue;}
[*]#content{color:red;}
[*]<divid="wrap">
[*]<divid="content">thisisatexthere</div>
[*]</div>
[*]
终极文本会显现甚么样的色彩呢?
是的,款式掩盖只会产生在具有不异优先级的情形下。这个例子中#wrap#content为200,而#content为100,纵使后设定color:red,也不会掩盖失落先前设定的color:blue;。别的,你能够为#content{color:red;}增添!important来看看效果。
以上都是在少于10个选择符的情形下,能够把这些数值看成十进制来利用和对照,可是,中选择符凌驾10个(固然大概性很小)又会怎样呢?我们参考一个Eric的例子:
[*].hello{color:red;}/*specificity=10*/
[*]HTMLBODYDIVULLIOLLIULLIOLLIULLIOLLI{color:green;}
[*]/*specificity=15*/
这里的10并非“十”,它仅仅代表是一个烦选择符,以是的它的优先级仍然要比15个范例选择符构成的选择器要高。假如换成十六进制的话,就是这个模样
[*].hello{color:red;}/*specificity=10*/
[*]HTMLBODYDIVULLIOLLIULLIOLLIULLIOLLI{color:green;}
[*]/*specificity=15*/
可是成绩,假如你再增加两个元素,就又酿成了11了,仍是呈现后面的情形。不外你应当一直记得,即便数值“看起来”对照年夜,它们的排序起首依照范例优先级来决意。
样式的调整更加方便。内容和样式的分离,使页面和样式的调整变得更加方便。 AdobeDreamweaver(前称MacromediaDreamweaver)是Adobe公司的著名网站开发工具。 您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别,但它同时也存在着致命的弱点。 Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH,专业网页图像设计软件FIREWORKS,并称为“网页三剑客”。 由CS4 版本开始,则转用WebKit 排版引擎(亦即Google Chrome和Apple Safari浏览器所用的排版引擎)作为网页预览。 使用所见即所得的接口,亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。 可以使用 CSS 检查工具进行设计。 足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程,随着互联网(Internet) 的家喻户晓。
页:
[1]