CSS总结
1. CSS的简介
a) 简介：CSS （Cascading Style Sheets）是层叠样式表用来定义网页的显示效果。可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。
b) 作用：CSS将网页内容和显示样式进行分离，提高了显示功能。
2. CSS和HTML的结合（*****）（四种）
a) 在HTML 中提供了一种属性,style="CSS的代码";
例子1：<p style="color: red;">这是p的区域1</p>
b) HTML提供了标签，<style type="text/css">CSS的代码</style>，要写在<head>标签的中间;
例子2：<style type="text/css">
div{
background-color: gray;color:orange;
}
</style>c) 引入外部文件的方式（常用的方式）; 定义一个外部的CSS文件（.css）结尾的。@import url("css文件的地址");需要写在<style>标签的内部；
例子3：
<style type="text/css">
@IMPORT url("zong.css");
</style>d) html提供的标签（常用的方式）；
写在<head>标签的内部。rel：代表当前的文件和引入文件的关系，type：类型，href：CSS的地址。
例子4：<link rel="stylesheet" type="text/css" href="zong.css">
3. CSS的优先级
a) （一般情况下）从上到下，由外到内，优先级从低到高的。
b) 特殊情况：标签名选择器 < class选择器 < ID选择器 < style属性
4. CSS的代码规范
a) 选择器名称{属性名:属性值;属性名:属性值;...}
b) 如果一个属性有多个值，值与值直接用空格隔开
c) 例子 div{border:值1 值2 值3}
5. CSS的选择器（*****）
a) 选择器：编写的CSS代码作用在哪个标签上。
b) 基本选择器：
i. 标签名选择器：使用的固定方法 div{ 样式的设置 }
例子：
div{
color: red;
}ii. 类选择器: HTML提供了一种属性(class)（常用的),固定的方法：.class的名称（.haha）
例子：
.haha{
font-size: 26px;
color: maroon;
}
.hehe{
background-color: fuchsia;
color: green;
}iii. ID选择器：HTML提供属性 固定的使用方法#ID
例子：
#buhaha{
color: red;
}
#hahaId{
font-size: 20px;
color: red;
}c) 选择器级别：标签名选择器 < class选择器 < ID选择器 < style属性。
d) 扩展选择器
i. 关联选择器：多个标签之间产生关系；中间用空格隔开。可以一次行为多个属性赋值。
例子：
<div class="haha" >这是div的<font>区域1</font></div>
div font{
color: red;
}ii. 组合选择器：对多个不同的选择器设置相同的样式 ，中间用逗号隔开。
例子：
<span class="haha">这是span的<font>区域1</font></span>
<span id="buhaha2">这是span的区域2</span>
#buhaha2,.haha{
color: red;
}iii. 伪元素选择器：CSS定义好的选择器；如果使用超链接的4个状态，使用的顺序： L V H A。
例子：
<a href="http://www.youku.com">优酷</a> <br/>
a:LINK {
text-decoration: none;
}
a:VISITED {
font-size: 20px;
color: green;
}
a:HOVER {
font-family: 隶书;
font-size: 24px;
color: orange;
}
a:ACTIVE {
font-family: 隶书;
font-size: 30px;
color: blue;
}6. CSS的布局（了解）
例子布局：
<style type="text/css">
div{
width: 200px;
height: 100px;
}
#div1{
background-color: red;
float: left;
}
#div2{
background-color: green;
float: left;
}
#div3{
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
Css定位：
<style type="text/css">
#div3{
position: absolute;
left: 150px;
top: 150px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
<img alt="" src="girl3.jpg">
</div>
<div id="div3">
啊，美女啊
</div>
</div>
</body>
