1、CSS 层叠样式表 对HTML的增补
实现网页内容和页面效果的彻底疏散
1.内联样式表（在标签内设置元素的样式）
<p>今天天气好晴朗，随处好风景</p>
对照灵活，想给谁设置数据就给谁设置数据
但如果想让当前页面所有P标签都酿成这样，得所有的都写一遍，太麻烦了。
2.嵌入样式表（需要在head标签内写<style type="text/css"></style>）
<style type="text/css">
p{
font-size:xx-small;
}
全局转变，但是不会转变到内联样式表，内联样式表的优先级更高
3.外部样式表 link
下载别人写好的样式
tt{
font-size:xx-large;
}
<link href="http://www.mamicode.com/Test.css" type="text/css"/>
优先级低于前面两种
2、样式法则的选择器（通过怎样的途径来获得页面上要设置样式的元素）
1）、HTML Selector
tt{
}
2）、Class Selector(类选择器，需要给要设置样式的元素的class属性赋值)
tt.tt1{
}
tt.tt2{
font-size:xx-large;
}
<tt>
<tt>
页面中某些元素要显示同一样式的时候给与类 class选择器
3)、ID选择器（需要给要设置样式的元素的class属性赋值）
.p1{
}
#p2{
}
#p3{
}
#p4{
}
要保证每一个ID是独一的，尽量不要给标签赋值同一个ID 单一用ID
<p>
<p>
<p>
<p>
<p>
4)、关联选择器
标签可以彼此嵌套 按照嵌套的标签来赋值
p em{
}
<p><em>今天天气好晴朗</em></p>
<em>哈哈</em>
<em>哈哈哈</em>
<p>今天天气好晴朗</p>
<p>今天天气好晴朗</p>
<p>今天天气好晴朗</p>
5)、组合选择器
h1,h2,h3,h4,h5,h6,td{
}
<h1>我是一个粉刷匠</h1>
<h2>我是一个粉刷匠</h2>
<h3>我是一个粉刷匠</h3>
<h4>我是一个粉刷匠</h4>
<h5>我是一个粉刷匠</h5>
<h6>我是一个粉刷匠</h6>
<table cellspacing="0px" cellpadding="0px">
<tr>
<td>粉刷才干强</td>
<td>粉刷才干强</td>
<td>粉刷才干强</td>
<td>粉刷才干强</td>
</tr>
<tr>
<td>粉刷才干强</td>
<td>粉刷才干强</td>
<td>粉刷才干强</td>
<td>粉刷才干强</td>
</tr>
<tr>
<td>粉刷才干强</td>
<td>粉刷才干强</td>
<td>粉刷才干强</td>
<td>粉刷才干强</td>
</tr>
6)、伪元素选择器
伪元素选择器是指对同一个HTML元素的各类状态和其所包孕的。部分内容的一种界说方法。例如，对付超链接标签（<a></a>）的正常状态（没有任何行动前）、访谒过的状态、选中状态、光标移动到超链接文本上的状态，对付段落的首字母和首行，都可以使用伪元素选择器来界说。
常用的伪元素
A：active 选 中超链接时的状态
A：hover 光标移动到超链接上的状态
A：link 超链接的正常状态
P：first-link 段落中的第一行文本
P：first-letter 段落中的第一个字母
a:active{
text-decoration:none;
}
a:hover{
font-size:xx-large;
}
P::first-letter{
font-size:xx-small;
}
p::first-line{
font-size:xx-large
}
<p>小李子是一个二货<br/>
小李子是一个二货<br/>
小李子是一个二货<br/>
小李子是一个二货<br/>
小李子是一个二货</p>
<a href="#">超链接</a>
<a href="#">超链接</a>
<a href="#">超链接</a>
<a href="#">超链接</a>
<a href="#">超链接</a>
3、CSS字体属性介绍
1）、字体
font-family:该属性用于设置字体系列。
font-size:该属性界说文字的巨细，可以使用器量单位来设置字体的巨细，也可以使用一个相对的字体巨细。还可以使用绝对的巨细符号符。绝对巨细的设置为 xx-small、x-small、small、medium、large、x-large、xx-large中的任意一个。xx-small为最小，xx-large为最大。
font-style：该属性用于界说字体样式为normal、italic或者oblique（斜体）
text-decoration:该属性用于文本中的下划线、上划线、闪烁效果。
font-weight:该属性拥有设置粗体字的磅值，该属性的值有：normal、bold、bolder、lighter、100~900
4、文档流
position:absolute;绝对定位，定到哪就是哪
position:fixed; 固定
z-index:3;数值越高的越显示在外面
div{
height:300px;
width:300px;
}
div.div1{
top:100px;
left:100px;
position:absolute;
z-index:3;
}
div.div2{
top:130px;
left:130px;
position:absolute;
z-index:2;
}
div.div3{
top:160px;
left:160px;
position:absolute;
z-index:1;
}
<div></div>
<div></div>
<div></div>