一、CSS样式引入方式
1.内联式：
<p style="color: blue">CSS样式</p>
2.嵌入式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
<style type="text/css">
p{color: red;}
</style>
</head>
<body>
<p>CSS样式</p>
</body>
</html>
3.外部式：
<link href="style.css" rel="stylesheet" type="text/css" />
一般而言，遵循就近原则：上述序号：1 > 2 >3（权值相同情况下，将在后续介绍权值）
二、CSS选择器
格式：
选择器{
样式；
}
1.标签选择器：按标签名称选择——标签名{}
p{
color: red;
}
2.类选择器：根据class类名进行选择—— .类名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
<style type="text/css">
.teststyle{
color: blue;
}
</style>
</head>
<body>
<p class="teststyle">CSS样式</p>
</body>
</html>
3.ID选择器：根据id选择——#{id名}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
<style type="text/css">
#teststyle{
color: green;
}
</style>
</head>
<body>
<p id="teststyle">CSS样式</p>
</body>
</html>
4.子选择器：选择第一代子类元素——使用 >
.first>span{
border:1px solid red;
}
5.后代选择器：选择所有后代，而非第4点中的直接后代——使用空格
.first span{
color:red;
}
6.通用选择器：选择所有元素——使用 *
* {
color:red;
}
7.伪类元素选择器：这里介绍比较通用的a标签的4个伪类
link 未访问（默认） hover 鼠标悬停（鼠标划过） active 链接激活（鼠标按下） visited 访问过后（点击过后）
8.分组选择器：同时选择多个选择器——使用 ,
三、继承、层叠与其它特性
1.继承
某些样式具有继承性，例如下面的p标签中样式同样适用与span标签，但注意不是所有样式都能继承，例如border:
p{color:red;}
<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
2.权值
1,内联样式表 的权值为1000;
2,ID选择器 的权值为100;
3,Class类选择器,伪类选择器 的权值为10;
4,HTML标签选择器,伪元素 的权值为1;
//可以将继承的权值理解为0.1，也就是非常低
这样，当同一元素遇到不同样式时，就根据权值高低进行加载
3.层叠
多个相同权值的样式，按照先后样式加载，后出现的将会覆盖前面出现的。
四、格式化排版
1.文字排版：字体——通过font-family实现
<style type="text/css">
body{
font-family:"微软雅黑";
}
</style>
2.文字排版：字号与颜色——通过font-size和color实现
body{
font-size:12px;
color:#666;
}
3.文字排版：粗体——通过font-weight实现；斜体——通过font-style实现
p span{
font-weight:bold;
}
a {
font-style:italic;
}
4.文字排版：下划线——通过text-decoration实现
p a{
text-decoration:underline;
}
5.文字排版：删除线——通过text-decoratio实现
.oldPrice{
text-decoration:line-through;
}
6.段落排版：缩进——通过text-indent实现
p{
text-indent:2em;
}
7.段落排版：行高——通过line-height实现
p{
line-height:2em;
}
8.段落排版：文字间距——通过letter-spacing和 word-spacing 实现
h1{
letter-spacing:50px;
}
9.段落排版：对齐——通过text-align实现（针对块级元素，块级元素下文讲解）
div{
text-align:center;
}
//当然不止文本，块级元素中的内容包括图片等都是可以居中的
五、盒子模型
1.元素分类——块级元素，内联元素（行内元素），内联块级元素
常见块级元素：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常见行内元素：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常见行内块级元素：
<img>、<input>
2.块级元素
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
//可以通过display:block将行内元素设置为块级元素
3.行内元素
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。（自己撑开来的）
//可以通过display:inline将元素设置为行内元素
4.行内块级元素
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。
//可以通过display:inline-block将元素设置为行内块级元素
5.盒子内外边距
内边距：padding 外边距：margin
内外边距都分为4个方向，元素的实际宽高也应当加上边距的 长度
6.边框——通过border实现
p{
border:2px dotted #ccc;
}
//可以拆分 border-2px; border-style:solid;border-color:red;
若要单独设置某一边框，可以使用border-bottom等结合方向实现
li{
border-bottom:1px dotted #ccc;
}
7.宽度和高度——通过width和height实现
li{
border-bottom:1px dotted #ccc;
200px;
height:30px;
}
8.填充——通过padding实现
一共4个方向，为顺时针方向！若只写一个，则4个方向相同；只写两个，则为上下 左右两组
9.边界——通过margin实现
方向与第8点类同
#box1{
margin-bottom:30px;
}
六、布局模型
1.分类——浮动模型（float），流动模型（Flow），层模型（Layer）
2.流动模型
块级元素垂直流动，行内元素水平流动
3.浮动模型
可以实现块级元素并排显示的效果（之前说过，默认情况下，块级元素独占一行）
div{
border:2px red solid;
200px;
height:400px;
float:left;
}
4.层模型
层模型有三种形式：
1、绝对定位(position: absolute)
利用position:absolute;开始绝对定位
div{
200px;
height:200px;
border:2px red solid;
position:absolute;
top:20px;
right:100px;
}
2、相对定位(position: relative)
相对的是原先的位置进行定位
3、固定定位(position: fixed)
但是呢，由于此布局方式不够灵活，不被广泛使用！
【补充】
颜色设置，推荐使用十六进制：http://www.sioe.cn/yingyong/yanse-rgb-16/
长度设置：px与百分比
七、实用小技巧
1.行内元素水平居中——通过给父元素加text-align：center属性实现
一般给文本与图片居中可以使用此方式：
div{
border:1px solid red;
margin:20px;
text-align:center;
}
.txtCenter{
text-align:center;
}
2.定宽块级元素居中——通过margin的auto属性
div{
border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
200px;/*定宽*/
margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}
3.不定宽块级元素居中——设置display为inline然后使用第1点方式（丢失块级元素特性）
.container{
text-align:center;
}
/* margin:0;padding:0（消除文本与div边框之间的间隙）*/
.container ul{
list-style:none;
margin:0;
padding:0;
display:inline;
}
4.父元素高度确定的单行文本——通过设置该元素的height和line-hieght来实现
.wrap h2{
margin:0;
height:100px;
line-height:100px;
background:#ccc;
}