CSS规则浅析

CSS规则浅析

 

首先，要知道CSS规则，我们要先了解CSS的定义。

CSS(英文全称：CascadingStyle Sheets)意思为样式层叠表。是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

 

一般规则是：

1）样式有继承性，子元素可以继承父元素的样式

能继承的样式有文本相关、列表相关、颜色color等；不能继承的样式：border,margin,padding,background-color等。

2）CSS规则大小写不敏感，不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，则要注意class 和 id 名称的大小写，有些浏览器对此是敏感的。

3）*可以消除浏览器的默认值，比如：*{margin:0;padding:0;}

如果是大型网站，则推荐这样html,body,div,span,applet,object,iframe,h1,h2,p,a{margin:0;padding:0;}

而不是*{margin:0;padding:0;}

因为 css 通配符 “*”会将网站内所有元素的默认值重设，这在大型网站会加重客户端的负担，浏览器运行速度变慢。但如果开发的是小型站点或企业网站，页面元素不是很多，使用CSS 通配符造成的性能影响可以忽略。

4）如果样式规则出现错误，通常这个错误以下规则都被忽略。

 

由上我们知道CSS意为样式层叠表，就如字面上的意思，CSS就是把样式进行层叠。所谓层叠：有多种方式可设置样式，如果同时用多种方式设置了样式，则多重样式将层叠为一个。

浏览器进行层叠的步骤是：

1）  收集所有样式

2）  找元素匹配的样式

3）  规则排序

4）  处理冲突

 

样式层叠并不是随便进行层叠的，它们层叠是有一些规则的，在了解规则前，我们先了解下样式的分类，样式分为三种：内联样式，内部样式，外部样式。

而这三种样式的优先级为内联样式>外（内）部样式，而内部样式和外部样式属于同一级别的。

 

如果我们要判断某个p元素中的文本颜色是什么，即样式color是什么？

1）  首先，看该元素是否有内联样式color，如果有则就是它了，否则继续下面步骤

2）  看该元素是否有内部样式color和外部样式color，否则继续下面步骤

3）  看该元素是否有看继承情况，否则继续下面步骤

4）  都没有，使用浏览器默认值

在上面的2）中如果多个选择器选择了该元素呢？如：<p class=”c1 c2 c3”>…</p>,假如多个选择器中都定义了color属性，也就是有了冲突，哪个规则起作用？哪个规则更“特定”则起作用。

如果一样“特定”呢？则看位置顺序，写的位置在最后的起作用。---所谓更“特定”可以理解为选择器选择的元素范围更小，也可用选择器的权值来比较：id选择器100、class选择器10、元素选择器1，内联样式不是选择器，但权值最高，可以认为是1000。例如：

p { color: red;}//权值为1

.c1 {color: green;} //权值为10

p.c1 {color: blue;} //权值为11

p.c2{color: yellow;} //权值为11

p.c3{color: #ccc;} //权值为11

总的而言，样式层叠优先次序如下：

!important > 内联样式 > 外部样式(内部样式) > 继承 > 读者设置(浏览器用户) > 默认值(浏览器)。

注：

1）在外部样式(内部样式)中按选择器的权值来确定(id > class > 元素)

2）如果权值相等，则它们的优先级取决于它们的先后顺序，谁放在后方，谁就优先。

3）特别地，加了!important;的优先级最高。如:p{color:red!important;},实际上就是强制提升优先级。