1.级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）。
2.Div+css是一种比较流行的网页布局技术，Div用来存放需要现实的数据，css用来指定怎么显示，从而做到数据和显示相互的效果。
3.引入css:<link rel="stylesheet" type="text/css" href=""/>
4.类选择器
.样式名{}
元素名称.分类名{}
类选择符通过直接引用元素中类属性的值而产生效果 在引用前面用句点(.)来标识一个类选择符
<span class="类选择器1 类选择器2"></span>(当两个类选择器发生冲突了，则以写在css文件中的后面的那个类选择器为准）
<p class="xx">xxxxxxxxxxxxxxxxxxxxx</p>
.s1{
color:blue;
font-size:30px;
font-style:italic;
text-decoration:underline;
}
ID选择器
#样式名{}
<p ID="xx">xxxxxxxxxxxxxxxxxxxxx</p>
#id1{
background-color:silver;
font-size:40px;
}
类选择符和ID选择符的区别
①类可以分配给任何数量的元素 ID 却只能在某个HTML文档中使用一次
② ID 对给定元素应用何种样式比类具有更高的优先权
html元素选择器:
元素标签{}
元素名 元素名…{}
Table{
}
通配符选择器
*{
}
伪元素选择器
A:link
A:active
A:visited
A:hover
父子选择器
<h1>祖国的首都<em>北京</em></h1>
h1{
color:red; /* 颜色 */
text-decoration:underline; /* 下划线 */
}
h1 em{ /* 嵌套选择器 */
color:#004400; /* 颜色 */
font-size:40px; /* 字体大小 */
}
<li class="li1">关系1
<ul>
<li>页面父子关系复杂时</li>
<li>页面父子关系复杂时</li>
<li>这里省略20个嵌套...</li>
</ul>
</li>
.li1 ol li{ /* 利用CSS继承关系 */
font-weight:bold; /* 粗体 */
text-decoration:underline; /* 下划线 */
}
注意点：
1.减少css的重复：把各个类选择器的公共部分，单独抽取写一份，好处是减少css的冗余
.ad_stu,.ad_2,.ad_house{
公共部分
height:196px;
float:left;
margin:5px 0 0 6px;
}
2.通配符选择器:如果希望所有的样式都符合某一样式时使用
四个选择器的优先级:!important;>ID选择器>class选择器>html选择器>通配符选择器
3.块元素，内联元素，可变元素
display:block这样的属性，让他也有每次都从新行开始的属性。也可以把块元素div加上display:inline，让他显示为内联元素。
下面是 block 级对象和 inline 级对象的基本区别:
Block 级对象会自然地水平充满其父容器，因此没有必要为之设置 100% 宽度属性
Block 级对象的起始摆放位置是其父容器的左上边界，并顺排在其前面的兄弟 Block 对象的下方（除非设置 float 或绝对位置）
Inline 级对象会忽略其宽度和高度设置
Inline 级对象会随着文字排版，并受排版属性的影响（如 white-space, font-size, letter-spacing）
Inline 级对象可以使用 vertical-align 属性控制其垂直对齐，block 级对象不可以
Inline 级对象的下方会保留一些自然的空间，以适应字母 g 一类的会向下探出的笔画
一个设置为 float 的 inline 对象将变成 block 对象
任何一个HTML元素都是block或者inline的。
block元素的特性包括：
总是另起一行开始显示
height, line-height, top/bottom margin属性可以被设置
width缺省值是100%,除非你指定了另外的width值
这一类的HTML元素包括<div>, <p>, <h1>, <form>, <ul> 以及 <li>等。
inline元素的特性包括：
直接跟在当前行的后面显示
height, line-height, top/bottom margin属性不能改变
width值就等于包含其中的文字/图片的宽度，并且这个值不能被改变
这一类的HTML元素包括<span>, <a>, <label>, <input>, <img>, <strong> 以及 <em>等。
你可以通过设置元素属性display: inline 或 display: block来改变元素的以上特性。
5.重要概念1：浮动（http://www.cnblogs.com/milaoshu/articles/2511231.html）
CSS的float属性，作用就是改变块元素(block element)对象的默认显示方式。block对象设置了float属性之后，它将不再独自占据一行。可以浮动到左侧或右侧。
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
如果一个元素右浮动/左浮动，它本身会尽可能会向右/左移动，直到碰到边框或者别的浮动元素，特别强调浮动对块元素和行内元素都生效。
如果使用浮动属性：则该元素不管是不是块元素，都会以块元素display:block来显示
清除浮动：如果不希望别的元素在某个元素的左边或者右边，可以使用清除浮动的方法：clear:right;clear:left;clear:both
6 .重要概念2：定位(http://www.cnblogs.com/milaoshu/articles/2511233.html)
（http://www.haozi.cn/code/position-static-relative-absolute-float/）
常见的定位:
1.static定位（默认值)
2.relative相对定位（相对自己原来的位置进行定位,left:40px,top:40px,以前的位置也保留下来了)
3.absolute绝对定位（以前的位置会空出来)
4.fixed固定定位（永远针对body进行定位）
相对定位,相对该元素应当显示的左上角重新定位，虽然它脱离的标准流，但是它的空间，不能被占用
绝对定位：对该元素最近的那个脱离了标准流的元素定位，如果没有父元素，则相对于body左上角定位
