， 前几篇介绍的HTML只是比较常用的一部分。其他的还需自行了解。 sublime里面的emmet语法快捷键，百度云地址：http://pan.baidu.com/s/1eR1Frk2 密码：fdnp emmet语法加快了代码的书写。比如在sublime里面输入： .box1>a[#]{$}*4 会得到
<div class="box1"> <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> </div>一、CSS的整体感知 css是cascading style sheet 层叠式样式表的简写。它为标签提供样式，呈现在网页上。 例如下面定义一个div，没有设置宽高，在网页中什么也不显示。所有需要CSS设置标签样式。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div class="nav"></div> </body> </html>CSS样式引入有三种：嵌入样式表、链接外部样式表、内嵌样式（优先级最高）。 嵌入样式表：用<style></style>标签对。 链接外部样式表：用link标签引入外部样式文件。文件以 .css结尾。 内嵌样式：<li style="font-size: large;color: red" >Bigbang</li> 引入位置：<head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href=""> href为文件路径。 <style></style> </head> 二、选择器 想要设置一个标签属性，肯定要选择中它。 1.标签选择器 标签选择器是选择页面中所有的同类标签。 比如下面是设置了页面中所有div的宽度和高度，背景颜色。
<style> div { width: 100px; emmet语法：w100px再tab height: 100px; background-color: #000; } </style>2.id选择器 id就像人的身份证一样，是唯一的。
#banner { width: 100px; height: 100px; background-color: #000; } 只选中id为banner的div <body> <div id="banner"></div> </body>3.类选择器 一个标签可以有多个class，中间用空格隔开。一个class也可以被多个标签拥有。
.banner { width: 100px; height: 100px; background-color: #000; } 只选中class（类名）为banner的div <body> <div class="banner tab"></div> </body>4.后代选择器
<body> <div class="div1"> <p>我是p1</p> <div> <p>我是p2</p> </div> </div> </body>直接后代选择器：.div1>p 选择的是.div1的直接后代<p>我是p1</p>，直接后代为div的儿子而不是孙子辈。
<style> .div1>p { color: red; } </style>后代选择器：.div1 p 选择的是.div1的所有后代p
<style> .div1 p { color: red; } </style>5.交集选择器 交集选择器，我们一般都是以标签名开头。 eg： div.special {} 该标签要同时满足是div而且类名是special的才可以选中。div.special中间没有空格
6.并集选择器 eg： div， p {} 选中所有div和p,并集选择器通常用在设置两个标签相同样式时。
7.通配符 *{ 效率不高，如果页面上的标签越多，效率越低，所以页面上不能出现这个选择器。 } 8.相邻兄弟选择器 选择离自己最近的兄弟
9.属性选择器 为具有某个属性的HTML元素定义样式。（CSS3介绍） 上面是CSS中的基本选择器，CSS3新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准度。以后会一一介绍。
三、CSS的继承性和层叠性 继承性： 有一些属性，当给自己设置的时候，自己的后代都继承上了，这个就是继承性。 color、 text-开头的、line-开头的、font-开头的。这些都是可以继承的。 这些关于文字样式的，都能够继承； 所有关于盒子的、定位的、布局的属性都不能继承。
层叠性： 层叠性：就是css处理冲突的能力。这个很重要。 当对同一个标签设置样式时，会因为标签选择器权重的问题，一些选择器会被层叠掉。
权重计算：id的数量，类的数量，标签的数量 先比较id,有id的优先，再看数量，数量一样；再比较class，依次类推。
特别：在计算权重之前，要看看是不是选中了要设置的那个标签，如果没有，则权重为0。
当所有都没有选中，那么有一个就近原则：谁描述的近，听谁的。
并集选择器要分开计算：
权重问题的深入： 同一个标签，携带了多个类名，有冲突：
!important标记 给一个属性提高权重。这个属性的权重就是无穷大。
!important需要强调3点：
1） !important提升的是一个属性，而不是一个选择器
2） !important无法提升继承的权重，该是0还是0
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { color: red!important; } p { color: green; } </style> </head> <body> <div> <p class="p1" id="p2">我是什么颜色？</p> </div> </body> </html>3）!important不影响就近原则 如果大家都是继承来的（没有选中，权重为0），按理说应该按照“就近原则”。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { color: red!important; } ul { color: green; } </style> </head> <body> <div> <ul> <p class="p1" id="p2">我是什么颜色？</p> </ul> </div> </body> </html>