DIV教程之CSS权重的成绩:挑选器权重值的盘算

只看该作者 · 发表于 2015-1-15 22:59:45

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

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

x

一般来说还需要用Photoshop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来。
破洛洛文章简介：CSS权重。
明天往某公司口试，有一题考的是CSS权重的成绩。的确没研讨过

在此，做个纪录。
权重按次“important>内联>ID>类>标签|伪类|属性选择>伪工具>承继>通配符”。选择器权重值的盘算A：假如划定规矩是写在标签的style属性中（内联款式），则A=1，不然，A=0.关于内联款式，因为没有选择器，以是B、C、D的值都为0，即A=1,B=0,C=0,D=0（简写为1,0,0,0，下同）。
B：盘算该选择器中ID的数目。（比方，#header如许的选择器，盘算为0,1,0,0）。
C：盘算该选择器中伪类及别的属性的数目（包含class、属性选择器等，不包含伪元素）。（比方，.logo[id=site-logo]如许的选择器，盘算为0,0,2,0）。
D：盘算该选择器中伪元素及标签的数目。（比方，p:first-letter如许的选择器，盘算为0,0,0,2）。
总结

一条款式划定规矩的全体权重值包括四个自力的部分：[A,B,C,D];
A暗示内联款式，只要1大概0两个值；
B暗示划定规矩中ID的数目；
C暗示划定规矩中除ID、标签和伪元素之外的别的选择器数目；
D暗示划定规矩中标签和伪元素的数目；
对照时从高位到低位（从A到D）分离对照，高位不异才必要对照低位；
有!important标志的属性权重值忽视没用!important指定的统统情形；
屡次指定!important时，互相抵销。

-------------------------------------------------------------------------------CSS2.1中利用一个4位的数字来暗示权重，以下是有关权重的一些划定:
范例选择符的权重为：0001
类选择符的权重为：0010
通用选择符的权重为：0000
子选择符的权重为：0000
属性选择符的权重为：0010
伪类选择符的权重为：0010
伪元素选择符的权重为：0010
包括选择符的权重为：包括的选择符权重值之和
内联款式的权重为：1000
承继的款式的权重为：0000

<html><head><title>款式抵触</title><styletype="text/css"></style></head><body>p{color:red}权重为:0001<br/>p[align]{color:blue}权重为:0010<br/>.vip{color:green}权重为:0010<br/>#myid{color:purple}权重为:0100<br/>
<p>p{color:red}<pclass="vip"id="myid">#myid{color:purple}<palign="left"class="vip">.vip{color:green}类和属性二者权重不异，但为何会使用类款式而不是属性款式，</body></html>


<html><head><styletype="text/css"></style></head>
<body><p>bodyp{color:green}
为何会使用bodyp{color:green}款式，而不是p{color:red}款式呢？由于bodyp{color:green}==body权重+p权重==2>p{color:red}==1</body></html>


<html><head><styletype="text/css"></style></head><body><pstyle="color:green">Itsgreen</body></html>
<html><head><styletype="text/css"></style></head>
<body>body中的笔墨<divclass="vip">class="vip",div中的笔墨<p>p中的笔墨,p位于div中<divid="other">id="other",另外一个div中的笔墨<br/>固然范例选择器div的权主要比类选择器.vip和.other要小，但假如在div的款式以后加上!important,则暗示在div标签文本(不包含div标签中的标签，由于它们具有可承继性),该款式具有最高权重。</body></html>
########################################################################
1、特别性起首来看一下这个例子将会产生的情况：
.grape{color:Blue;}H1{color:Red;}<h1class="grape">Meerkat<em>Central</em></h1>
H1和.grape都婚配下面的H1元素，那末究竟应当利用哪个呢？理论证实.grape是准确谜底，把句子显现为蓝色。依据标准，一样平常的HTML元素选择符(H1,P等)具有特别性1，类选择符具有特别性10，ID选择符具有特别性100，值越年夜权重就越年夜，就优先选用。
H1{color:Red;}/*特别性=1*/PEM{color:Blue;}/*特别性=2*/.grape{color:Fuchsia;}/*特别性=10*/P.bright{color:Yellow;}/*特别性=11*/P.brightEM.dark{color:Gray;}/*特别性=12*/#ID01{color:Red;}/*特别性=100*/
2、承继
在特别性的框架下，被承继的值具有特别性0，也就是说任何显式声明的划定规矩将会掩盖其承继款式，即使这条划定规矩具有多高的权重。
H1#ID01{color:Red;}/*特别性=101*/EM{color:Gray;}/*特别性=1*/<H1ID="ID01>Meerkat<EM><Central</EM></H1>
固然ID选择符特别性最高，但因为在特别性的框架下，承继值只要特别性0，因些Central会显现为Gray色彩。
3、STYLE元素
另有sytle元素在CSS下权值界说为100，只管ID选择也一样，实践上style元素比ID具有更高的特别性。
#ID01EM{color:Gray;}<H1ID="ID01">Meerkat<EMstyle="color:red;">Central</EM>!</H1>会显现为red色彩。
4、主要性(!important)
!important具最高特特征好比说1000，因而!important划定规矩会掩盖内联STYLE属性的内容。
H1{color:red!important;}<H1style="color:black;">MeerkatCentral!</H1>将显现为RED色彩。
一种特别情况
P#warn{color:Red!important;}EM{color:Black;}<pid="warn">Thistextisred,but<em>emphasizedtextisblack.</em>固然界说!important最高特别性，但句子并没有全体显现为RED白色，为何呢？大概我们得转头看看后面的划定规矩，在后面的第二点承继中提“在特别性的框架下，承继值只要特别性0。”因而即使界说!important，承继里的特别性也只要0，以是显现为特别性为1的EM划定规矩。
权重按次为：承继=>HTML一般选择符=>类选择符=>style元素=>!important
5、层叠
1)若两条划定规矩具有不异的权值、劈头及特别性，那在款式表中最初呈现的划定规矩优先。
2)任何位于文档中的划定规矩都比引进的划定规矩优先。</p>
所有的设计第一步就是构思，构思好了。

只看该作者 · 发表于 2015-1-17 20:07:43

Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

只看该作者 · 发表于 2015-1-26 22:35:13

以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。

只看该作者 · 发表于 2015-2-5 05:25:06

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

只看该作者 · 发表于 2015-3-2 00:37:51

直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。

只看该作者 · 发表于 2015-3-11 03:39:57

使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。

只看该作者 · 发表于 2015-3-17 21:53:20

还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。

只看该作者 · 发表于 2015-3-25 07:14:33

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

		自动登录	找回密码
密码			立即注册

[DIV+CSS] DIV教程之CSS权重的成绩:挑选器权重值的盘算

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

相关帖子