分析CSS样式表、继承、层叠和属性的值 -tutorial css-php.cn

这篇文章分析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>&copy; Blue Flax Society.</small></p>
</p>
</body>

Salin selepas log masuk

如程序一，所有的内容元素都是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;
}

Salin selepas log masuk

程序二是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