CSS，cascading style sheet，级联样式表，用于指定网页外观。
外部样式表
#mystyle.css
Selector{
property1：value1；
property2：value2；
}
HTML页面中的引用语句为 <head><link type="text/css" rel="stylesheet" href="mystyle.css"></head>。
内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>
内联样式
内联样式即在相关的标签内使用样式（style）属性。
<p style="color: sienna; margin-left: 20px"> This is a paragraph </p>
属性选择器：
ID选择器：对具有指定id的HTML元素起作用。选择器名以’#’开头。使用方式为<div id="div1"></div>
class选择器：对具有指class的HTML元素起作用。选择器名以’.’开头。使用方式为<div class="class1"></div>
id选择器与class选择器的区别：
同一页面的不同标签不可以使用同一个id。
一个标签内不能使用多个id。
例如<div id="div1"></div><div id="div1"></div>非法。因为js里获取DOM是通过getElementById，而如果页面出现同一个id几次，这样就获取不到了。
继承
子元素继承父元素的css属性。如果把一个样式加到<body>上，那么页面所有标签都继承<body>的样式。如果某个子标签不想继承，可以为子标签设置它自己的样式，在此范围内父级样式不再生效。
选择器的分组
你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。
h1,h2,h3,h4,h5,h6 {
color: green;
}
选择器的派生
通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。
比方说，你希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：
li strong {
font-style: italic;
font-weight: normal;
}
那么效果是
<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p> <ol> <li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li> <li>我是正常的字体。</li> </ol>
id、class 都可被用作派生选择器。
选择器的组合
在 HTML 中，一个 class 值中可能包含一个词列表，各个词之间用空格分隔。例如，如果希望将一个特定的元素同时标记为重要（important）和警告（warning），就可以写作：
<p class="important warning"> This paragraph is a very important warning. </p>
这两个词的顺序无关紧要，写成 warning important 也可以。
我们假设 class 为 important 的所有元素都是粗体，而 class 为 warning 的所有元素为斜体，class 中同时包含 important 和 warning 的所有元素还有一个银色的背景 。就可以写作：
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}/*注意两个类选择器没有空格*/
子元素选择器
如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。
例如，如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：
h1 > strong {color:red;}
这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1> <h1>This is <em>really <strong>very</strong></em> important.</h1>