CSS：层叠样式表 (Cascading Style Sheets)

结构层：HTML
表现层: CSS
行为层: DOM，JavaScript

CSS语法结构：
div{background:#f00;}
选择器{属性名:属性值; 属性名2:属性值1 属性值2;}

指导思想：
内容、样式、行为分离
HTML/CSS/JS分离

CSS载入HTML的三种方式：

1:外部样式
<link rel="stylesheet" href="style.css">

2:内部样式
<style>
div{background:#0f0;}
</style>

3:行内样式
<div style="background:#00f;">你好我是div</div>

CSS选择器
HTML的DOM(节点树)结构
你和你的照片的关系
HTML和DOM的关系

css的继承性：给父级元素定义的样式会自动赋给子级元素（一些特殊元素如a标签浏览器自定义属性比较强，需要单独定义）
<style>
h2{color:#f00;}
</style>
<h2>
你好我是标题
<span>你好我是span</span>
</h2>

元素选择器(基本最常用)
*{} /*通配符选择器，选中页面所有元素*/
div{} /*类型选择器，选择HTML标签，例如<div></div>*/
.class{} /*类选择器，选择定义了类名的html标签，例如<div class="test"></div>*/
#id{} /*id选择器，选择定义了id名的html标签，例如<div id="id"></div>*/

<style>
*{color:#0f0;}
a{color:#f00;}
.sss{color:#00f;}
#hhh{color:#00f;}
</style>
<p>pppppp</p>
<a>aaaaaaa</a>
<span class="sss">ssssssssss</span>
<span>2ssssssssss</span>
<h3 id="hhh">hhhhhhhhh</h3>
<h3>2hhhhhhhhh</h3>

关系选择器(基本最常用)
.a, #b, p, div{} /*多选择器，逗号分隔，表示全部选择符同时操作*/
#id .a div{} /*包含选择器，空格分隔，层叠，一层一层套着*/
p.class{} /*选择类名为class的p元素*/

<style>
div,.ppp,#aaa,span{color:#ff0;}
div .ppp a{color:#f00;}
a.aaa{color:#00f;}
</style>
<div>div1</div>
<div>
div2
<p class="ppp">
ppp
<a href="###">aaa</a>
<span>sss</span>
</p>
</div>

<a href="###" class="aaa">aaaa1</a>
<h4 class="aaa">hhh4</h4>
<a href="###">aaaa2</a>

<span>sss</span>

伪类选择器：
(hover兼容性问题：IE6 只识别a标签的hover)
<style>
a{color:#00f;text-decoration:none;}
a:hover{color:#0f0;text-decoration:underline;}
</style>
<a href="###" title="我是title">我是a标签</a>