CSS是层叠样式表（Cascading Style Sheets）用来定义网页的现实效果。可以解决html代码对样式定义的重复，
提高了后期样式代码的可维护性，并增强了网页的现实效果功能，简单一句话：CSS将网页内容和现实样式进行分
离，提高了现实功能。
那么CSS和html是如何在网页代码中相结合的呢？
通过四种方式：
1.style属性方式：
利用标签中style属性来改变每个标签的显示样式。
例：
<p style="background-color:#FF0000; color:#FFFFFF">
p标签段落内容
</p>
该方式比较灵活，但是对于多个相同标签的同一样式定义比较麻烦，适合局部修改。
2.style标签方式：（内嵌方式）
在head标签中加入style标签，对多个标签进行统一修改。
<head>
<style type="text/css>
p{ color:#FF0000;}
</style>
</head>
该方式可以对单个页面的样式进行统一设置，但对于局部不够灵活。
3.导入方式：
前提是已经存在一个定义好的CSS文件。网页的一部分样式需要用到，那么就用到这种方式。
例：
<style type="text/css">
@import url(css_1.css);
div{ color:#FF0000;}
</style>
注：url括号后面必须要分号结束。如果导入进来的样式与本页面定义的样式重复，以本页定义样式为准。
4.链接方式：
通过head标签中link标签来实现，前提也是先要有一个已定义好的CSS文件。
例：
<link rel="stylesheet" type="text/css" href="css_2.css" media=screen" /> media：被定义显示在什么设
备上
注：可以通过多个link标签链接进来多个CSS文件。重复样式以最后链接进来的CSS样式为准。
5.样式优先级：
由上到下，由外到内。优先级由低到高。
标签选择器<类选择器<ID选择器<style属性
6.总结CSS代码格式：
选择器名称{ 属性名:属性值;属性名:属性值;...}
属性与属性之间用 分号 隔开
属性与属性值直接按 冒号 连接
如果以个属性有多个值的话，那么多个值用 空格 隔开。
7.选择器：
就是指定CSS要作用的标签，哪个标签的名称就是选择器。意为：选择哪个容器。
选择器共有三种：
a）html标签名选择器，使用的就是html的标签名。
b）class选择器，其实使用的标签中的class属性。
c）id选择器，其实使用的是标签中的id属性。
每一个标签都定义了class属性和id属性，用于对标签进行标识，方便对标签进行操作。在定义中，多个标签的
class属性值可以相同，而id值要唯一，因为JavaScript中经常用。
8.扩展选择器：
a）关联选择器
标签是可以嵌套的，要让相同标签中的不同标签显示不同样式，就可以用此选择器
p{ color:#00FF00;}
p b { color:#FF0000;}
<p>P标签<b>张学友</b>段落样式</p>
<p>P标签段落</p>
b）组合选择器
对多个不同选择器进行相同样式设置的时候应用此选择器
.haha,div b{
background-color:#000;
color:#C00;
}
<div>这是一个div<b>区域</b>1</div>
<div class="haha" id="qq">这是一个div区域2</div>
注：多个不同选择器要用逗号分隔开。
c）伪元素选择器
其实就在html中预先定义好的一些选择器，称为伪元素，是因为CSS的术语
格式：标签名：伪元素.类名 标签名.类名：伪元素。都可以
a:link 超链接未点击状态
a:visited 被访问后的状态
a:hover 光标移到超链接上的状态(未点击)
a:active 点击超链接时的状态
使用顺序：L-V-H-A
p:first-line 段落的第一行文本
P:first-letter 段落中的第一个字母
:focus 具有焦点的元素。IE6浏览器不支持，在FireFox中可以看到效果。
CSS背景色
可以使用background-color属性为元素设置背景色。
P{background-color:gray;}
背景图像
要把图像放入背景，需要使用background-image属性。
如果需要设置一个背景图像，必须为这个属性设置一个URL值：
body{background-image:url(/i/eg_bg_04.gif);}
为一个段落应用背景，而不会对文档的其他部分应用背景：
p.flower{background-image:url(/i/eg_bg_03.gif);}
为行内元素设置背景图像，下面的例子为一个链接设置了背景图像：
a.radio{background-image:url(/i/eg_bg_07.gif);}
CSS列表属性(list)
list-style 把所有用于列表的属性设置于一个声明中
ul{list-style-type:disc} 实心圆
ul{list-style-type:circle}空心圆
ul{list-style-type:square}方块
ul{list-sytle-type:none}无标记
用图像表示标记，用list-style-image属性
ul{list-style-image:url(1.jpg)}
CSS表格属性：
table{在CSS中设置表格边框，使用border属性。
border-bottom:#0C0 double 3px; 设置底部为双排线
border-left:#F00 solid 3px; 设置左边为实线
border-right:#FF0 dashed 3px; 设置右边为虚线
border-top:#0C0 groove 3px; 设置顶部为立体凹线
}
table td{设置单元格边框：
border:#0CF dotted 1px; 设置边框为点线
}
table{ 设置将表格边框折叠为单一边框。
border-collapse:collapse;
}
table{设置表格宽度和高度
width:500px;
height:100px;
}
td{设置表格中文本的对齐方式，如左对齐、右对齐或居中。
text-align:right;
}
td{设置垂直对齐方式，如顶部对齐、底部对齐或居中对齐。
height:50px;
vertical-align:bottom;
}
td{控制表格中内容与边框的距离，为td和th元素设置padding属性。
padding:15px;
}
div{
padding:20px 100px 200px 300px;以上、右、下、左的方式设置内边距（顺时针）
margin:50px;外边距
}
div{
float:left;文本流向对象的右边。
float:right;文本流向对象的左边。
float:none;默认值。对象不漂浮
}
div{
position:absolute;将对象从文档流中拖出。使用left,right,top,bottom等属性对于其最接近的一个最
有定位设置的父对象进行绝对定位，如果不存在这样的父对象，则依据body对象。
position:relative;对象不可层叠，但将依据left,right,top,bottom等属性在正常文档流中偏移位置
}
