css 规则通常由两个主要部分组成，选择器，以及一条或者多条声明。
1
| p{color:red ;text-align:center;}
|
选择器
id选择器和class选择器
id选择器用#来定义，class选择器用. 来定义
样式的创建
外部样式表、内部样式表、内联样式
属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| background-ccolor 背景颜色
background-image:url("") 背景图像
background-repeat:no-repeat 设置图片不进行平铺
background-position:right top 图片起始位置
text-align:center(right justify) 文本对齐方式
text-decoration:none:设置删除文本的装饰 如 删除下划线 加一条上线 中间划线
text-indent :50px 指定文本第一行的缩进。
font-family:"Times" 设置字体
font-style:normal(italic倾斜)
font-size:40px 字体大小
font-weight:字体粗细
a:link {color:#000000; text-decoration:none;}
a:visited {color:#00FF00; text-decoration:none}
a:hover {color:#FF00FF;text-decoration:underline}
a:active {color:#0000FF;}
ul.a {list-style-type: circle;}//list-style-type
ul.b {list-style-type: square;}//属性指定列表项标记的
ol.c {list-style-type: upper-roman;}//类型
ol.d {list-style-type: lower-alpha;}
border-collapse：表格边框
border-collapse:collapse; //表格的边框设置成单一的
h1.hidden{visibility:hidden;}// 隐藏某个元素，但占据空间
h1.hidden{display:none;}//隐藏且不占用空间
|
盒子模型
1
2
3
4
5
6
7
8
9
| border-style:none//边框样式
//dotted点线边框 dashed 虚线边框 solid 实线边框 double两个边框
border-width:5px//边框宽度
border-color:red //边框颜色
单 border-top-style:dotted;
独 border-right-style:solid;
设 border-bottom-style:dotted;
置 border-left-style:solid;
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。outline 属性规定元素轮廓的样式、颜色和宽度。
|
块与内联元素
块元素 h1 p div
内联元素 span a
1
2
| li {display:inline;} // 列表项变为内联元素。
span {display:block;}// span元素作为块元素。
|
定位
position 属性指定了元素的定位类型。
position：static relative fixed absolute
static 是html 默认值，即没有定位，元素出现在正常的流中。静态定位的元素不会受到top,bottom,left,right 影响。
fixed 定位是相对于浏览器窗口的固定位置，即使窗口滚动也不移动。fixed定位的元素与文档流无关，因此不占据空间。会与其他元素重叠。
relative 定位是相对其正常的位置。与绝对定位不同的是，相对定位不会把该元素从原文档删除掉，而是在原文档的位置的基础上，移动一定的距离
absolute 定位是相对于最近的已定位父元素，若没有，就相对于html.设置了绝对定位的元素，相当于该元素被从原文档中删除了。
通过绝对定位可以把一个元素放在另一个元素上，这样位置就重复了。重复了，就存在一个谁掩盖谁的问题。 这个时候就可以使用z-index属性， 当z-index的值越大，就表示放上面，z-index:越小就表示放下面。
浮动
浮动会使元素向左或者向右浮动，周围元素也会重新排列。一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。
浮动后，原来的坑就让出来了。
文字向左浮动 首先，向左浮动后，会把“坑”让出来，这个时候”正常的文字4“ 就会过来试图占这个坑，但是，发现 “浮动的文字”并没有走，结果，就只好排在它后面了
默认的div排列是会换行的 如果使用float就可以达到水平排列的效果，通常会用在菜单，导航栏等地方 。如果超出了父容器，还会有自动换行的效果。