7.29.2019
1. CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一
2. 一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，按优先级升序排列：
浏览器缺省设置
外部样式表
内部样式表（位于 <head> 标签内部）
内联样式（在 HTML 元素内部）
3.选择器可分组，同组选择器就可以分享相同的声明。
h1,h2,h3,h4,h5,h6 {
color: green;
}
4. 派生选择器根据文档的上下文关系来确定某个标签的样式。
h2 strong {
color: blue;
}
<h2>This subhead is also red.</h2>
<h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>
5. id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式，以 "#" 来定义。
id 属性只能在每个 HTML 文档中出现一次。
#red {color:red;}
<p id="red">这个段落是红色。</p>
6. id 选择器常常用于建立派生选择器。
即使id为 sidebar 的元素只能在文档中出现一次，这个 id 选择器作为派生选择器也可以被使用很多次。
#sidebar p {
font-style: italic;
text-align: right;
}
#sidebar h2 {
font-size: 1em;
font-weight: normal;
}
7. id 选择器即使不被用来创建派生选择器，它也可以独立发挥作用：
div#sidebar {
border: 1px dotted #000;
padding: 10px;
}
8. 在 CSS 中，类选择器以一个点号显示：
.center {text-align: center}
注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。
9.类选择器可以用作派生选择器，类也可基于它们的类而被选择。
.fancy td {
color: #f60;
background: #666;
}
td.fancy {
color: #f60;
background: #666;
}
10.属性选择器：可以为拥有指定属性的 HTML 元素设置样式。
注释：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。
CSS 选择器参考手册
| 选择器 | 描述 |
| [attribute] | 用于选取带有指定属性的元素。 |
| [attribute=value] | 用于选取带有指定属性和值的元素。 |
| [attribute~=value] | 用于选取属性值中包含指定词汇的元素。 |
| [attribute|=value] | 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。 |
| [attribute^=value] | 匹配属性值以指定值开头的每个元素。 |
| [attribute$=value] | 匹配属性值以指定值结尾的每个元素。 |
| [attribute*=value] | 匹配属性值中包含指定值的每个元素。 |
11.插入样式表的方法：
11.1外部样式表
当样式需要应用于很多页面时，使用外部样式表。在使用外部样式表的情况下，通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在（文档的）头部：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。不要在属性值与单位之间留有空格。下面是一个样式表文件的例子：
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
11.2内部样式表
当单个文档需要特殊的样式时，使用内部样式表。使用 <style> 标签在文档头部定义内部样式表：
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>
11.3内联样式
使用内联样式，需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
12. background-color 不能继承（所有背景属性都不能继承），其默认值是 transparent。transparent 有“透明”之意。也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。
13. 要把图像放入背景，需要使用 background-image 属性。background-image 属性的默认值是 none，表示背景上没有放置任何图像。大多数背景都应用到 body 元素，不过并不仅限于此。
下面例子为一个段落应用了一个背景，而不会对文档的其他部分应用背景：
p.flower {background-image: url(/i/eg_bg_03.gif);}
可以为行内元素设置背景图像，下面的例子为一个链接设置了背景图像：
a.radio {background-image: url(/i/eg_bg_07.gif);}
14. 如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。
属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。默认地，背景图像将从一个元素的左上角开始。
15. 可以利用 background-position 属性改变图像在背景中的位置。关键字：top、bottom、left、right 和 center。还可以使用长度值，如 100px 或 5cm，最后也可以使用百分数值。
百分数值同时应用于元素和图像。也就是说，图像中描述为 50% 50% 的点（中心点）与元素中描述为 50% 50% 的点（中心点）对齐。如果有两个值则分别为水平方向和垂直方向。如果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为 50%。
长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。注意，这一点与百分数值不同，因为偏移只是从一个左上角到另一个左上角。也就是说，图像的左上角与 background-position 声明中的指定的点对齐。
16. 如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。
可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响。
