CSS的层叠性、继承性和重要性是什么?

html-css023

CSS的层叠性、继承性和重要性是什么?,第1张

1. 继承性

继承是一种规则,它允许样式不仅应用于某个特定 html 标签元素,而且应用于其后代。

比如下面代码:如某种颜色应用于 p 标签,这个颜色设置不仅应用 p 标签,还应用于 p 标签中的所有子元素文本,这里子元素为 span 标签。

<span style="font-size: 18px">p{color:red}

<p>三年级时,我还是一个<span>胆小如鼠</span>的小男孩。</p> </span>

结果 p 中的文本与 span 中的文本都设置为了红色。但注意有一些 css 样式是不具有继承性的。如 border:1px solid red

<span style="font-size:18px">p{border:1px solid red}  </span>

在上面例子中它代码的作用只是给 p 标签设置了边框为1像素、红色、实心边框线,而对于子元素 span 是没用起到作用的。

2. 特殊性

<span style="font-size:18px">p{color:red}

.first{color:green}

<p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小男孩。</p>  </span>

p 和 .first 都匹配到了 p 这个标签上,那么会显示哪种颜色呢?green是正确的颜色,那么为什么呢?是因为浏览器是根据权值来判断使用哪种 css 样式的,权值高的就使用哪种 css 样式。

下面是权值的规则:

标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100。例如下面的代码:

<span style="font-size:18px">p{color:red} /*权值为1*/

p span{color:green} /*权值为1+1=2*/

.warning{color:white} /*权值为10*/

p span.warning{color:purple} /*权值为1+1+10=12*/

#footer .note p{color:yellow} /*权值为100+10+1=111*/   </span>

注意:还有一个权值比较特殊–继承也有权值但很低,有的文献提出它只有0.1,所以可以理解为继承的权值最低。

3. 层叠性

层叠就是在html文件中对于同一个元素可以有多个css样式存在,当有相同权重的样式存在时,会根据这些css样式的前后顺序来决定,处于最后面的css样式会被应用。

如下面代码:

<span style="font-size:18px">p{color:red}

p{color:green}  </span>

最后 p 中的文本会设置为green,这个层叠很好理解,理解为后面的样式会覆盖前面的样式。

所以前面的css样式优先级就不难理解了:

内联样式表(标签内部)>嵌入样式表(当前文件中)>外部样式表(外部文件中)。

4. 重要性

我们在做网页代码的时,有些特殊的情况需要为某些样式设置具有最高权值,怎么办?这时候我们可以用!important来解决。

如下代码:

<span style="font-size:18px">p{color:red!important}

p{color:green}

<p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小男孩。</p>  </span>

这时 p 段落中的文本会显示的red红色。

学习WEB标准的朋友一般都是从学习CSS开始,为什么呢?因为CSS是一种很有意思的语言,它能让我们的网页千变万化。也许我们一开始的接触只是因为链接的样式修改,然后慢慢发现CSS的强大而又简单,于是我们用它来控制整个网页的布局、排版、色彩、图片等等工作。学习了CSS之后我们又会发现XHTML的结构更为重要,一个好的XHTML结构可以让CSS少费很多事。同时也会避免网页在不同浏览器之间的差异。于是又开始学习了XHTML代码,并且不断的去摸索着XHTML的结构的特点。会写CSS了,也懂得XHTML结构的重要性并能灵活应用的时候,是不是就可以了呢。也许这时我们就会发现其实样式的管理同样非常的重要。

大家也许都已经有了自己的管理方式,因为所要应用的网页类型的不同可能管理的思路也不一样,这里我只是把我的样式管理做一个整理。算是给大家提供一个可以参考与研究的范例,给对于没有形成自己的管理方式的朋友们提供一个参照范本。

我的样式管理是针对于单一项目、单一的风格体系的网站,一般这样的网站都是中小型的网站,风格是上一致的。对于大型网站,或是风格差异很大的'网站体系是不适用的。我们在做样式之前首先要想到样式的易维护性。一旦需要修改就必需要快速方便,修改工作的成本是很高的,所以我们要尽量避免这样的工作所占用时间的扩大。那我们就有必要把样式与结构代码分开。下面看一下我的目录分配方法:

其中,[images] 是存放xHTML中出现的图片,[jonStyle]我统称之为主题包,在样式包中包括了[CSS]、[img]、[js]分别存放CSS样式表、样式表中所引用的图片、网页中所用的JS。这里存放图片的[img]与外面的[images]虽然都是存放图片的,但是这里的图片的性质却是不一样的。[img]是CSS中所引用的图片,所有的图片的显示与否都与CSS样式有关,他的归属性是,[img]里的图片是归属于CSS的,而不是XHTML的。而CSS是不会引用[images]中的图片。[images]中的图片只归属于xHTML,xHTML也不要直接使用[img]中的图片。

这里把[js]也放在了[jonStyle]文件夹中也许会有人觉得不妥,我的考虑是这样的:行为与样式本都是使得这个XHTML的结构能多姿多彩。当我们需要更换皮肤的时候,也有可通这个行为也是需要更换的。比如:在第一套方案中,某个区块的内容是要上下滚动的,然而在第二套方案中,这个区块就需要左右滚动。那么这个行为也需要与样工一起更换。当然实际应用的时候不一定是这么简单理由。

基本上大的结构是这这样的。那么样式表的结构又是怎么样的呢?我是这样来划分的:样式包中有一个base.css(基本共用样式)module.css(模块样式)forms.css (表单样式)mend.css(补丁样式)print.css(打印样式)

其中base.css是一个基本的样式,也就是所有网页的共性样式,这个样式与module.css配合基本上可以显示正常的页面。表单的划分,也可以有利于对不同地方的表单的样式管理。WEB标准涉及兼容性,所以需要有样式补丁当然还有针对性的这里就不一一列举。最后一个的打印样式,是提供给打印设置使用的。

我通过这样的划分,在对于维护与网站的样工更新上,就显得非常的容易,基本上可以在不需要程序人员的参与下就可以完成对网站的皮肤的更换。如果一个网站同时具备很多个主题包,那么只要简单的在XHTML中更换主题包的名称就可以使用不同的样式。这与网站的程序相配合将可以做出非常好的,具有很强扩展性的应用网站来!