机制和原理——样式的值

值和单位

CSS中的值有以下几种类型：

• 颜色值 颜色值的应用场合有：背景颜色，边框颜色，字体颜色等
• 长度值 长度值的应用场合有：元素的大小，边框颜色，字体颜色等
• 时间值
• 角度值

颜色值——颜色取值

CSS中颜色取值主要由以下几种方法： CSS命名颜色。在CSS2.1中，CSS规范定义了17个颜色名。\ 用RGB指定颜色。可以使用0~255取值或者0%~100%。

长度值

长度值的单位有绝对单位和相对单位两种：

• 绝对单位
  • in 英寸,
  • cm 厘米
  • mm 毫米
  • pt 磅,1pt等于1/72 英寸
  • pc 派卡，印刷术语
• 相对单位
  • em 1em等于当前的字体尺寸。如果某元素以12pt显示，那2em的设定值就等同于24pt。em非常适合于需要对用户所使用字体大小进行自动适应的场合。
  • ex
  • px 像素
  • % 百分比

继承

继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。比如下面代码：如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。

优先级

有的时候同一个元素同时被设置了多个不同的CSS样式代码，那最终是哪一个CSS样式有效呢?我们来看一下面的代码：

CSS: 
p {color:red;} 
.hudao {color:green;} 
#hello {color:yellow;} 

HTML: 
<p id= "hello" class="hudao">您好，这里是互道科技</p>

对<p>中的文本，有三个样式分别定义了三种不同的颜色，red(红色），green（绿色）和yellow（黄色），但文本会显示成yellow（黄色）。 这是因为CSS样式是有优先级的，按照CSS的优先级规则，通过ID指定的样式最终获得胜出。 下面对CSS样式优先级计算时的三大要素：权值，特殊性和层叠分别进行说明：

权值

CSS样式的优先级首先是通过权值来实现的，权值高的样式将被浏览器优先采用。 权值被分为以下四个等级：

• 等级1 内联样式(如:style=””)属于第1等级，权值是1000。
• 等级2 ID选择器(如：#id1)属于第2等级，权值为100。
• 等级3 类，伪类和属性选择器(如：.cls1)属于第3等级，权值为10。
• 等级4 元素和伪元素选择器(如：.div)属于第4等级，权值为1。

特殊性

通过!important关键字可以将样式的权值人为提升到最高级。

层叠

层叠就是同一个元素，当有相同权重的样式存在时，会根据这些CSS样式的前后顺序来决定，处于最后面的CSS样式会被应用。