今天着重学习一下CSS，它有多大用处，相信地球人 都知道。样式首先它分三种用法：
外部样式，当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。
[html]
view plaincopy<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
内部样式，当单个文件需要特别样式时，就可以使用内部样式表。[html]
view plaincopy<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
内联样式，当特殊的样式需要应用到个别元素时，就可以使用内联样式。[html]
view plaincopy<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
如果某个元素同时应用了上面的样式，那么到底用谁呢？这里有个优先级，从高到低为：内联样式，内部样式(head标记中)，外部样式。
CSS 语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
[html]
view plaincopyselector {declaration1; declaration2; ... declarationN }
选择器selector通常是您需要改变样式的 HTML 元素。其中每条声明declaration又是由一个属性和一个值组成。打个比方：
[html]
view plaincopyh1 {color:red; font-size:14px;}
看清楚了吧，元素后面的内容用大括号括起来，每个声明后面有个分号，每个声明的属性与值是用冒号隔开的。与 XHTML 不同，CSS 对大小写不敏感。
几个高级的语法：
1.选择器的分组，多个选择器之间用逗号分隔，下面代码表示所有的标题颜色都用绿色，这里还有个通配符星号，代表所有元素
[html]
view plaincopyh1,h2,h3,h4,h5,h6 {
color: green;
}
2.继承及其问题，首先什么是继承？根据我的理解就是父元素的声明，应用到它的子元素，看个例子好理解
[html]
view plaincopybody {
font-family: Verdana, sans-serif;
}
这里应该这个窗体中的所有元素的字体都如body元素中设置的一样，但是问题就是早期的浏览器版本不支持继承，所以有时候只能用选择器分组，多写一点代码罗。如果要摆脱继承只需把子元素再创建一个规则。
其它的一些选择器，可以相互组合
派生选择器：通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。
[html]
view plaincopyli strong {
font-style: italic;
font-weight: normal;
}
在下面的例子中，只有 li 元素中的 strong 元素的样式为斜体字，无需为 strong 元素定义特别的 class 或 id，代码更加简洁。
[html]
view plaincopy<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>
<ol>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li>
</ol>
id 选择器：为标有特定 id 的 HTML 元素指定特定的样式。以 "#" 来定义
[html]
view plaincopy#red {color:red;}
#green {color:green;}
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
类选择器：类选择器以一个点号显示：
[html]
view plaincopy.center {text-align: center}
在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。
[html]
view plaincopy<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>
类名的第一个字符不能使用数字！
属性选择器：如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。
[html]
view plaincopy*[title] {color:red;}
把包含标题（title）的所有元素变为红色
[html]
view plaincopya[href][title] {color:red;}
上面将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色
除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素。
[html]
view plaincopya[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}
子元素选择器：注意大于号
[html]
view plaincopyh1 > strong {color:red;}
这个规则会把第一个 h1 下面的 strong 元素变为红色，但是第二个 strong 不受影响：
[html]
view plaincopy<h1>This is <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
相邻兄弟选择器：注意加号
[html]
view plaincopyh1 + p {margin-top:50px;}
这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。
这么多选择器，已经晕了，再组合一下，我要敢问路在何方
，其实想想，选你喜欢上手的用就行了，经常用的不会很多，碰到特殊情况知道还有其它选择方法就行了。
伪类
W3C："W3C" 列指示出该属性在哪个 CSS 版本中定义（CSS1 还是 CSS2）。
属性描述CSS
:active向被激活的元素添加样式。1
:focus向拥有键盘输入焦点的元素添加样式。2
:hover当鼠标悬浮在元素上方时，向元素添加样式。1
:link向未被访问的链接添加样式。1
:visited向已被访问的链接添加样式。1
:first-child向元素的第一个子元素添加样式。2
:lang向带有指定 lang 属性的元素添加样式。2
CSS 伪类用于向某些选择器添加特殊的效果。
[html]
view plaincopya:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
以上叫什么锚伪类，在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，a:active 必须被置于 a:hover 之后，才是有效的。伪类名称对大小写不敏感。
CSS2 - :first-child 伪类
[html]
view plaincopyp:first-child {font-weight: bold;}
li:first-child {text-transform:uppercase;}
第一个规则将作为某元素第一个子元素的所有 p 元素设置为粗体。第二个规则将作为某个元素（在 HTML 中，这肯定是 ol 或 ul 元素）第一个子元素的所有 li 元素变成大写。
CSS2 - :lang 伪类
:lang 伪类使你有能力为不同的语言定义特殊的规则。在下面的例子中，:lang 类为属性值为 no 的 q 元素定义引号的类型
[html]
view plaincopy<html>
<head>
<style type="text/css">
q:lang(no)
{
quotes: "~" "~"
}
</style>
</head>
<body>
<p>文字<q lang="no">段落中的引用的文字</q>文字</p>
</body></html>
伪元素
W3C："W3C" 列指示出该属性在哪个 CSS 版本中定义（CSS1 还是 CSS2）。
属性描述CSS
:first-letter向文本的第一个字母添加特殊样式。1
:first-line向文本的首行添加特殊样式。1
:before在元素之前添加内容。2
:after在元素之后添加内容。2
CSS 伪元素用于向某些选择器设置特殊效果。
头快要爆炸了，一下子接受不了这么多，先记下了，日后再来当字典查吧
