因胸联盟 发表于 2015-1-16 00:12:44

来讲讲: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了,仍是呈现后面的情形。不外你应当一直记得,即便数值“看起来”对照年夜,它们的排序起首依照范例优先级来决意。

样式的调整更加方便。内容和样式的分离,使页面和样式的调整变得更加方便。

飘飘悠悠 发表于 2015-1-18 05:31:53

AdobeDreamweaver(前称MacromediaDreamweaver)是Adobe公司的著名网站开发工具。

山那边是海 发表于 2015-1-25 20:57:50

您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别,但它同时也存在着致命的弱点。

愤怒的大鸟 发表于 2015-2-4 06:09:53

Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH,专业网页图像设计软件FIREWORKS,并称为“网页三剑客”。

不帅 发表于 2015-2-9 17:16:42

由CS4 版本开始,则转用WebKit 排版引擎(亦即Google Chrome和Apple Safari浏览器所用的排版引擎)作为网页预览。

再现理想 发表于 2015-3-9 07:49:07

使用所见即所得的接口,亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

爱飞 发表于 2015-3-16 23:38:47

可以使用 CSS 检查工具进行设计。

分手快乐 发表于 2015-3-23 08:58:47

足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程,随着互联网(Internet) 的家喻户晓。
页: [1]
查看完整版本: 来讲讲:CSS款式表层叠(cascade)处置抵触