CSS

CSS：Cascading Style Sheets层叠样式表。

三种实现方式：

1.内联方式           例如：<h style="color:red;width:300px">

2.内部样式表         例如：<style type="text/css">

                                                   h2{

                                                      color:blue;

                                                    }

                                            </style>

3.外部样式表         例如：建立以.css结尾的文件，引入<link rel="stylesheet" type="text/css" href=""/>

规则特性：继承性，层叠性，优先级。

选择器：

选择器组：用，隔开。

后代选择器：空格

子代选择器：>

伪类选择器：

用于选择一个元素在不同状态下的形式。

常用的有：

：link

：visited

：active

：hover

：focus

border：

用于设置元素的边框

border：width值 style值  color值

border-left：width值 style值  color值

border-right：width值 style值  color值

border-top：width值 style值  color值

border-bottom：width值 style值  color值

padding ：内边距

margin：外边距

background-color：

background-image：url()

background-repeat：repeat，repeat-x，repeat-y，no-repeat

background-position：left，center，right，top，bottom

background-attachment：scroll，fixed 用于处理图片是否随页面的滚动而移动。

当内容溢出元素框时overflow：可以有以下几种处理方式：

visible

hidden

scroll

auto

设置文本：

font-family：

font-size：

font-weight：

color：

text-align：left、right、center

text-decoration：none、underline

line-height：

text-indent： 首行缩进

表格样式：

border-collapse：separate、collapse

定位：

分为5中：流定位（float：none、left、right,其中clear用于消除浮动所带来的影响。例如：clear：none、left、right、both），浮动定位，相对定位，绝对定位，固定定位。

相对定位：div{

  position:relative;

  left:50px;           (right)

  top:50px;           (bottom)

}

绝对定位：.outter{

                           position:relative;

                     }

                    .d{

                            position:absolute;

                             bottom:20px;

                             left:30px;

                      }

position：static、relative、absolute、fixed（固定定位）

偏移属性：top、bottom、left、right

z-index：层叠顺序

float/clear：浮动定位属性

列表样式：

无序列表：list-style-type：none，disc，circle，square

有序列表：list-style-type：none，decimal，lower-roman，upper-roman

图片代替：list-style-image：url()

显示：

用display：noen，block，inline，inline-block

设置鼠标样式：

cursor：default，pointer，crosshair，text，wait，help