仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 681|回复: 7
打印 上一主题 下一主题

[DIV+CSS] 来讲讲:CSS款式表层叠(cascade)处置抵触

[复制链接]
因胸联盟 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 00:12:44 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
如果单独使用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{...}、[href$=dudo.org]、: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;}
[code][/code]

  • <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,并称为“网页三剑客”。
不帅 该用户已被删除
5#
发表于 2015-2-9 17:16:42 | 只看该作者
由CS4 版本开始,则转用WebKit 排版引擎(亦即Google Chrome和Apple Safari浏览器所用的排版引擎)作为网页预览。
再现理想 该用户已被删除
6#
发表于 2015-3-9 07:49:07 | 只看该作者
使用所见即所得的接口,亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。
爱飞 该用户已被删除
7#
发表于 2015-3-16 23:38:47 | 只看该作者
可以使用 CSS 检查工具进行设计。
分手快乐 该用户已被删除
8#
发表于 2015-3-23 08:58:47 | 只看该作者
足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程,随着互联网(Internet) 的家喻户晓。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-4-29 01:42

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表