1.分配ID和类名时，一定要尽可能保持名称有意义并与表现方式无关。
2.写类名和ID名时，需要注意区分大小写，最好的方式是保持一致的命名约定，camel case 。
3.在不适合使用ID的情况下对元素应用类,而且尽可能少使用类.
4.为了将不必要的标记减小到最少，应该只在没有元素能够实现区域分割的情况下使用div元素。
二.选择器
类型选择器,元素选择器,简单选择器 寻找特定类型的元素
p {color:black;}
a {text-decoration:underline;}
h1 {font-weight:bold;}
后代选择器 寻找特定元素或元素组的后代
li a {text-decoration:none;}
ID选择器
#intro {font-weight:bold;}
类选择器
.datePosted{color:green;}
类型.后代.ID 和 类 几种选择器的组合
#mainContent h1 {font-size:1.8em;}
#secondaryContent h1 {font-size: 1.2em;}
通用选择器 可以匹配任何元素,在与其它选择器结合使用时，通用选择器可能用来对特定元素的所有后代应用样式。
*{ padding:0; margin:0;}
子选择器 与后代选择器的区别是:后代选择器选择一个元素的所有后代，而子选择器只选择元素的直接后代，即子元素
#nav > li {background:url(folder.png)no-repeat left top:}
<ul id="nav">
<li>Home</li>
<li>Services
<ul>
<li>Design</li>
<li>Developement</li>
<li>Consultancy</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
在IE6中可以使用通用选择器模仿子选择器:
#nav li {background:url(folder.png)no-repeat left top:}
#nav li * {background-image:none;}
相邻同胞选择器 定位于同一父元素下某个元素之后的元素
h1 + p {font-weight:bold;}
<h1>Main Heading</h1>
<p>First Parargraph</p>
<p>Second Paraapraph</p>
IE6不支持
属性选择器
三 伪类 根据文档结构之外的其它条件对元素应用样式
:link和visited 称为链接伪类，只能应用于锚元素.
:hover. :active 和:focus 称为动态伪类,理论上可以就用于任何元素.
CSS允许将所有样式放在一个或多个外部样式表中，可以链接，也可以导入
<link href ="Css_Path" rel="stylesheet" type="text/css">
@import url("Css_Path");
并非只能导入到html文档中，还可以从另一个样式导入样式表.
CSS注解
/*-----------------------------------------
version:
author:
email:
website:
-------------------------------------------*/
盒模型
页面上的每个元素被看做一个矩形框，这个框由元素的内容.填充(padding),边框(border)和空白边(margin) 组成
| ----------------------------------------------------
| 空白边(margin)
| |--------------------------------------------
| | 边框(border)
| | |-----------------------------
| | | 填充(padding)
| | | |---------------
| | | | 内容
填充.边框和空白边都是可选的，默认为0,width,height指的是内容区域的的宽度和高度
空白边叠加:当两个垂直空白这相遇时，它们将形成一个空白边，空白边的高度等说两个发生叠加的空白边的高度中的较大者
只有普通文档流块框的垂直空白边才会发空白边叠加，行内框，浮动框或绝对定位框之间的空白边不会叠加。
块框: p,h1或div等元素 称块级元素(block-level element),意思是这些元素显示为一块内容
行内框: strong和span等称为行内元素，因为它们的内容显示在行中.
可以使用display属性改变生成框的类型.
CSS中三种基本的定位机制:普通流,浮动和绝对定位
普通流:元素框的位置由元素在html中的位置决定
块级框从上到下一个接一个地排列,框之间的垂直距离由框的垂直空白边计算出来.
行内框在一行中的水平布置.可以使用水平填充.边框.和空白边调整 它们的水平间距，但是垂直填充.边框和空白边不影响行内框的高度。
相对定位:
如果对一个元素进行相对定位,它将出现它所在的位置上，然后，可以通过设置垂直或水平位置让这个元素"相对于"它的起点进行移动。
绝对定位:
相对定位实际上被看成普通定位流模型的一部分,因为元素的位置相对于它普通流中的位置。与之相反，绝对定位使元素的位置与文 档流无关，不占据空间。
绝对定位的元素的位置相对于最近的已定位的祖先元素，如果元素没有已定位的祖先元素，那么它位置相对于最初的包含块。
浮动:
可以设置一个块级元素飘浮在父容器的左边或右边，直到它的外边碰到父容器的包含框或其它浮动元素的边缘。
浮动框不在文档的普通的文档流中，普通流的块框表现得就像浮动流不存一样(IE对此有不同解析，认为其它的普通流应该从浮动框的右侧开始，这就使浮动框表现得像插入左边一样),行框会自动适应，为浮动框留出适当的空间。
清除:
如果一个框不允许有任何浮动元素，可应用clear