分析CSS样式表、继承、层叠和属性的值
- 高洛峰原创
- 2017-03-13 14:57:001516浏览
这篇文章分析CSS样式表、继承、层叠和属性的值
构造样式表并添加注释
1. CSS里有控制基本格式的属性（如font-size和color等），有控制布局的属性（如position和float等），还有决定访问者打印时在哪里换页的打印控制元素。除此之外还有其他很多的属性。
2. 样式表中包含定义网页外观的规则，每条规则都有两个主要部分：选择器（selection）和声明块（declaration）。选择器决定哪些元素受影响，声明块有一个或多个属性-值对组成，制定应该怎么做。
3. 注释用'/*和*/'包围。
理解继承
1. 继承可理解为当为某个元素应用CSS属性时，这些属性不仅会影响该元素，还会影响其下的分支元素。
程序一
<body> <p> <h1>The Ephemeral Blue Flax</h1> <img src="img/blueflax.jpg" width="300" height="175" alt="Blue Flax (Linum lewisii)" /> <p>I am continually <em>amazed</em> at the beautiful, delicate Blue Flax that somehow took hold in my garden. They are awash in color every morning, yet not a single flower remains by the afternoon. They are the very definition of ephemeral.</p> <p><small>© Blue Flax Society.</small></p> </p> </body>
如程序一，所有的内容元素都是body元素的后代，用一个p包住了所有的内容，进一步，em和small元素都包含在一个p元素里，因此它们是p的后代（同时也是p和body的后代）。
程序二
body {
font-family: Verdana, Geneva, sans-serif;
}
p {
border: 1px solid black;
overflow: hidden;
padding: 0 1em .25em;
}
p {
color: #36c; /* a blue color */
font-weight: bold;
}
img {
float: left;
margin-right: 1em;
}
程序二是CSS样式设置，这段样式表为程序一中的HTML进行样式设置，设置时体现了继承的特性。你可以看到，程序二中只有body、p和p元素的样式规则，而没有h1、em和small元素的规则。那么在页面显示的时候在则在h1、em和small元素中就会体现继承特性。
2. 以下是会被继承的CSS属性，在此系统性的列出：
文本
| 属性名称 | 属性作用 |
|---|---|
| color | 颜色，a元素除外 |
| direction | 方向 |
| font | 字体 |
| font-family | 字体系列 |
| font-size | 字体大小 |
| font-style | 用于设置斜体 |
| font-variant | 用于设置小型大写字母 |
| font-weight | 用于设置粗体 |
| letter-spacing | 字母间距 |
| line-height | 行高 |
| text-align | 用于设置对齐方式 |
| text-indent | 用于设置首行缩进 |
| text-transform | 用于修改大小写 |
| visibility | 可见性 |
| white-space | 用于指定如何处理空格 |
| word-spacing | 字间距 |
列表
| 属性名称 | 属性作用 |
|---|---|
| list-style | 列表样式 |
| list-style-image | 用于为列表制定定制的标记 |
| list-style-position | 用于确定列表标记的位置 |
| list-style-type | 用于设置列表的标记 |
| 属性名称 | 属性作用 |
|---|---|
| border-collapse | 用于控制表格相邻单元格的边框是否合并为单一边框 |
| border-spacing | 用于指定表格边框之间的间隙大小 |
| caption-side | 用于设置表格标题的位置 |
| empty-cells | 用于设置是否显示表格中的空单元格 |
页面设置（对于印刷物）
| 属性名称 | 属性作用 |
|---|---|
| orphans | 用于设置当元素内部发生分页时在页面底部需要保留的最少行数 |
| page-break-inside | 用于设置元素内部的分页方式 |
| widows | 用于设置当元素内部发生分页时在页面顶部需要保留的最少行数 |
其他
| 属性名称 | 属性作用 |
|---|---|
| cursor | 鼠标指针 |
| quotes | 用于指定引号样式 |
层叠：当规则放生冲突时
如果编写的样式如果与浏览器的默认样式冲突，均以你编写的样式为准。在此基础上，CSS用层叠的原则来考虑特殊性（specificity）、顺序（order）和重要性（importance），从而判断相互冲突的规则中哪个规则应该起作用。
特殊性
特殊性规则指定选择器的具体程度。选择器越特殊，规则就越强。遇到冲突时，优先应用特殊性强的规则。
列出一些选择器：(按照特殊性由低到高排列)
| 选择器 | 对应的HTML |
|---|---|
p { ... } |
<p>...</p> |
.some<a href="http://www.php.cn/wiki/164.html" target="_blank">Class</a> { ... } |
<p class="someClass">...</p> |
#someID { ... } |
<p id="someID">...</p><p id="someID" class="someClass">...</p><p id="someID" class="someOtherClass">...</p><p id="someID" class="someClass someOtherClass">...</p>
|
顺序
当特殊性不足以判断在相互冲突的规则中应该优先选择应用哪一个。此时顺序规则起作用，即晚出现的优先级高。
重要性
如果以上的规则还不够用，那么可以声明一条特殊的规则覆盖整个系统中的规则。也可以在某条声明的末尾加上！important,比如p{ color: o<a href="http://www.php.cn/wiki/1078.html" target="_blank">range</a> !important; }（除非特殊情况，否则不推荐使用这种方法）。
属性的值
inherit
对任何属性，如果希望显示地指出该属性的值与对应元素的父元素对该属性设定的值相同，就可以使用inherit值。例如假设有一个article元素，其中包括几个段落。article元素设置了一个边框，通常边框不会被继承，因此p { border: inherit; }这条规则可以让这些段落获得相同的边框样式。
长度和百分数
1. 很多CSS属性的值是长度。有的长度是相对于其他值的。一个em的长度大约与对应元素的字号相等。例如对元素设置<a href="http://www.php.cn/wiki/937.html" target="_blank">margin-left</a>: 2em就代表将元素的左边距设为元素字号的两倍。当em用于设置元素的font-size属性本身时，它的值继承自对应元素的父元素的字号。em的这种相对性对如今的网站建设工作来说是至关重要的，尤其是对那些需要适应不同屏幕尺寸的网站来说（这种做法被称为响应式Web设计）。
2. 百分数的工作方式很像em，百分数通常是相对于父元素的。
纯数字
只有极少数的CSS属性接受不带单位的数字，最常见的就是line-height、<a href="http://www.php.cn/wiki/903.html" target="_blank">z-index</a>和opacity，eg:line-height: 1.5;这个例子中的值将与字号相乘，的到行高。
URL
有的CSS属性允许开发人员指定另一个文件（尤其是图像）的URL，background-image就是这样一个属性。在这种情况下，使用url（file.ext），其中file.ext是目标资源的路径和文件名。要注意，规范指出相对URL应该相对于样式表的位置而不是相对于HTML文档的位置，eg:background: url(bg-pattern.png)。注:CSS属性中的URL无需使用引号包围。
CSS颜色
十六种基本颜色关键字
| 颜色 | 关键字 |
|---|---|
| aqua（水绿） | #00FFFF |
| black（黑） | #000000 |
| blue（蓝） | #0000FF |
| fuchsia（紫红） | #FF00FF |
| gray（灰） | #808080 |
| green（绿） | #008000 |
| lime（浅绿） | #00FF00 |
| maroon（褐） | #800000 |
| navy（深蓝） | #000080 |
| olive（橄榄） | #808000 |
| purple（紫） | #8000080 |
| red（红） | #FF0000 |
| silver（银） | #C0C0C0 |
| teal（深青） | #008080 |
| white（白） | #FFFFFF |
| yellow（黄） | #FFFF00 |
RGB
可以通过指定红、绿、蓝的量来构建自己的颜色，可以使用百分数、0~255之间的数字来指定这三种颜色的值，eg:color: rgb(89, 0, 127);或color: rgb(35%, 0%, 50%);，因为89是255的35%。
十六进制
这是CSS定义颜色最常用的方式，eg:color: #59007F。若#FF3344则可缩写为#F34。
更多CSS3指定颜色方式
RGBA、HSLA和HSL。
CSS3引入了指定颜色的方式HSL和通过RGBA和HSLA设置alpha透明度的能力。
RGBA在在RGB的基础上加了一个alpha透明度（alpha transparency）的A。可以在RGB后加上0~1的小数来指定透明度。eg:<a href="http://www.php.cn/wiki/894.html" target="_blank">background-color</a>: rgba(89,0,127,0.75)。
HSL和HSLA是CSS3中新增的。HSLA是除了RGBA以外为颜色指定透明度的另一种方式。用HSLA指定透明度的方法与RGBA是一致的，eg:color: hsla(282,100%,25%,0.75)。
HSL代表色相（hue）、饱和度（saturation）和亮度（lightness），其色相的取值范围为0~360，饱和度和亮度的取值均为百分数，范围为0~100%。0和360在顶部汇合即0和360代表同一种颜色：红色，eg:color: hsl(282,100%,25%)。
构想HSL，选择一个0~360之间的色相，并将饱和度设为100%，亮度设为50%，就会得到这种颜色最纯的形式。降低饱和度，颜色就会向灰色变化。增加亮度，颜色就会向保色变化；降低亮度，颜色就会像黑色变化。
例如以下一些比较重要的颜色：
| 颜色 | hsl数据 |
|---|---|
| 红色 | hsl(0,100%,50%); |
| 黄色 | hsl(60,100%,50%); |
| 绿色 | hsl(120,100%,50%); |
| 青色 | hsl(180,100%,50%); |
| 蓝色 | hsl(240,100%,50%); |
| 紫色 | hsl(300,100%,50%); |
以上是分析CSS样式表、继承、层叠和属性的值 的详细内容。更多信息请关注PHP中文网其他相关文章！