css（Cascading Style Sheets）真是一个神奇的东西，短短的几行代码就可以让你的页面看起来非常的美观。自己接触也有很长的时间了，现在自己做一个总结，为了自己更好的去理解和使用。
我刚接触css的时候，感觉非常的头晕啊，敲着几行css代码，一刷新，你电脑里面的页面就活生生的在你面前变的面目全非，惊艳你的眼球。接触这么久，我觉得css下面几个知识点是非常重要的：
1. CSS的盒子模型
图1：css盒子模型
css的盒子模型如图1所示，中间的褐红色是content（内容），绿色的是内边距（padding），黄色的是边框（border），边框外面的银白色的是外边距（margin）。了解盒子模型，主要是理解上面说的四个概念。下面这段代码实战—-css的盒子模型的应用会让你更好的理解。
2. CSS选择器
选择器是CSS的核心，掌握好了选择器可以让你在CSS中如鱼得水，选择器主要分为以下这些：
通用元素选择器
，可以匹配任何的元素。
*{
margin=0；
padding=0；
} 标签选择器
可以匹配所有使用的标签元素。
p{font-size:3em;} (1)
p span{color:red;font-size:3em} (2)（后代元素选择器）(1)表示p元素的字体大小为当前页面字体大小的3倍，（2）表示p元素里面的所有的span元素中的字体颜色为红色，字体大小为当前页面字体大小的3倍。
类选择器
我们可以这样来写一个类选择器：
<p class="p1">Hello ,icessunt</P> (1)
<p class="p2">Hello ,icessunt</P> (2)
<p class="p1 p2">Hello ,icessunt</P> (3)我们在通过下面的css代码来加上样式：
.p1{color: blue;}
.p2{font-size: 30px;}《======》p.p2{font-size:30px;}
.p1.p2{font-weight: 600;} （多类选择器）产生的结果是这样的：
通过这个结果我们可以知道：多类选择器（中间不要加空格，加了空格就变成了后代元素选择器了）同时具有其每一个类选择器的样式 。要是后面的类选择器中的样式包含了上一个类选择器的样式，那么后面的样式就会覆盖前面的相同的样式：
.p1{color: blue;}
.p2{color: red;}
.p1.p2{font-weight: 800;}
结果为：
注意：类名的第一个字符不能使用数字！要是想写数字的话，就在前面加上/或者下划线，字母。
.icessunt p{color:red;font-size:20px} （后代元素选择器）这段代码表示：类选择器icessunt下面的所有的p元素的字体颜色变成红色，字体大小为20px。（类选择器和元素p之间有空格，类似这个表示方法也可以用到ID选择器中）类名为icessunt的可能是一个div
ID选择器
可以为标有特定 id 的 HTML 元素指定特定的样式。
对于什么时候用ID选择器，什么时候用类选择器，其实注意一下类选择器和ID选择器的区别，还有就是当你要使用js的时候就要用到id，其他的方面就没什么了。
属性选择器
用【】表示属性选择器
｛id选择器就是这种属性选择器的一个特例｝
[title]{color:red;} 【把包含标题（title）的所有元素变为红色】
a[href]{color:red;} 【只对有 href 属性的锚（a 元素）应用样式】
a[href][title]{color:red;} 【为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色】｛之间的顺序调换没有关系｝
a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;} 【指定文档的超链接变成红色】
类选择器就是这种属性选择器的一个特例：
伪类选择器与伪元素选择器：
**在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！
在 CSS 定义中，a:active 必须位于 a:hover 之后，这样才能生效！**
可以使用 :first-child 伪类来选择元素的第一个子元素【必须声明 DOCTYPE，这样 :first-child 才能在 IE 中生效。】：
<p>Hello icessunt</p> （1）
<p>Hello icessunt</p> （2） [html代码]
p:first-child{font-weight: bold;} [css样式]结果只有（1）里面的p元素的字体加粗。（2）里面p元素的字体没有加粗。
<ul>
<li>hello iceesunt</li>
<li>hello iceesunt<br><em>hellow icessunt</em></li>
</ul> html代码li:first-child{text-transform: uppercase;} css样式上面的html代码加上这段css样式的结果为：
后代选择器和子选择器
每个空格结合符可以解释为“… 在 … 找到”、“… 作为 … 的一部分”、“… 作为 … 的后代”，但是要求必须从右向左读选择器。因此，h1 em 选择器可以解释为 “作为 h1 元素后代的任何 em 元素”。如果要从左向右读选择器，可以换成以下说法：“包含 em 的所有 h1 会把以下样式应用到该 em”。
如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。
结合后代选择器和子选择器
table.company td > p上面的选择器会选择作为 td 元素子元素的所有 p 元素，这个 td 元素本身从 table 元素继承，该 table 元素有一个包含 company 的 class 属性。
兄弟选择器
需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。
例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：
h1 + p {margin-top:50px;}这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。
这个例子说明h2与第一个p元素是兄弟的关系，并且h2和这两个p元素都有同一个父元素。
结果：
