css
声明：颜色表示 ：关键词、 #111111、 rgb(50,40,30);
长度表示：px、 em、%...
1、css的基本格式
选择器{
声明（属性:属性值; <如果属性值含有多个值时，用“”>）
}
2、选择器
2.1派生选择器
如 dt code{
color: red;
}
表示dt中的code元素中的文本显示红色，其他的code元素不包含
2.2 id选择器
如 #txt_red{
color: red;
}
#txt_red p{
color: red;
}
规定id= txt_red的元素的样式
2.3 class 选择器
.txt_red{
color: red;
}
class = "txt_red"的元素的样式
2.4属性选择器和属性+值选择器
3、css样式表使用
3.1<link rel = "stylesheet" type = "text/css" href = "###.css">
3.2在head中使用<style type = "text/css">
css规则
</style>
3.3在元素中使用属性style=“css规则声明”
4、定义背景
4.1背景色
background-color:颜色值;
4.2背景图片
background-image:url(地址);
background-repeat: repeat-y/repeat-x/no-repeat;
background-position: center/top/bottom/left/right;(一个方向上只能有一个)或者是数值
background-attachment:fixed/scroll; 背景是否和前面的内容一起滚动
5、文本样式
text-indent:#em/px....;首行缩进
text-align:left/right/center/justify(两边拉伸对齐两边);只能定义文本行的对齐方式，不能定义块级元素的对齐方式
word-spacing:长度值;字或者单词之间的间距
letter-spacing:长度值;字母间的间距
text-transform: none/uppercase/lowercase/capitalize;不改变/全部大写/全部小写/首字母大写
text-decoration:none/underline/overline/line-through/blink;文本装饰
direction:ltr/rtl;块级元素中文本的书写方向或者是列布局方向
font-family:Georgia,serif;定义字体
font-style:normal/italic/oblique;字体风格正常/斜体/倾斜
font-weight:normal/bold/lighter/100-900;900对应bold,字的粗细
font-size:px/em/%;1em=当前的字体大小的px值
6、链接a的不同状态
a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻
当为链接的不同状态设置样式时，请按照以下次序规则：
a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后
7、列表
list-style-type: square/circle...;
list-style-image: url();使列表的图标换成自己的图片
list-style-position: inside/outside/inherit;定义图标相对于文本的位置
8、表格table
table{
border: #px solid blue;定义边框
border-collapse: collapse;定义单边框
width：
height:
border-spacing:#px;定义单元格边框间的距离
empty-cells:hide/show/inherit;定义空的单元格是否显示}
th,td{
text-align:right/left/center;文本水平对齐
vertical-align:baseline/sub/super/top/text-top/middle/bottom/text-bottom/length/%/inherit;垂直对齐（用于行内元素）
padding: #px;内边距
}
9、轮廓（不同于border）
outline-color:red;
outline-style:dotted/dashed/solid/double/groove/ridge/inset/outset/inherit;定义轮廓线的样式
outline-width:#px;
可以一起表示
outline:color style width
10、css定位元素（可以用来布局）
自然定位{
position:static;}
相对定位（相对正常的位置偏移某个距离，远位置空间保留）
{(存在框相互覆盖的情况)
position:relative;
可以使用top: #px; right/bottom/left表示相对正常位置的偏移量
}
绝对定位{
position:absolute;相对于包含块的偏移，但是不占据空间（即底部可以放置元素）
可以使用top: #px; right/bottom/left表示相对正常位置的偏移量
}
固定定位{
position:fixed;相对于窗口的偏移
}
还可以使用z-index改变堆叠顺序，大的在上
overflow：visible默认值。内容不会被修剪，会呈现在元素框之外。
（必须先规定框的宽度和高度这样设置才有效）
hidden
scroll
auto(会有滚动条)
inherit
声明：颜色表示 ：关键词、 #111111、 rgb(50,40,30);
长度表示：px、 em、%...
1、css的基本格式
选择器{
声明（属性:属性值; <如果属性值含有多个值时，用“”>）
}
2、选择器
2.1派生选择器
如 dt code{
color: red;
}
表示dt中的code元素中的文本显示红色，其他的code元素不包含
2.2 id选择器
如 #txt_red{
color: red;
}
#txt_red p{
color: red;
}
规定id= txt_red的元素的样式
2.3 class 选择器
.txt_red{
color: red;
}
class = "txt_red"的元素的样式
2.4属性选择器和属性+值选择器
3、css样式表使用
3.1<link rel = "stylesheet" type = "text/css" href = "###.css">
3.2在head中使用<style type = "text/css">
css规则
</style>
3.3在元素中使用属性style=“css规则声明”
4、定义背景
4.1背景色
background-color:颜色值;
4.2背景图片
background-image:url(地址);
background-repeat: repeat-y/repeat-x/no-repeat;
background-position: center/top/bottom/left/right;(一个方向上只能有一个)或者是数值
background-attachment:fixed/scroll; 背景是否和前面的内容一起滚动
5、文本样式
text-indent:#em/px....;首行缩进
text-align:left/right/center/justify(两边拉伸对齐两边);只能定义文本行的对齐方式，不能定义块级元素的对齐方式
word-spacing:长度值;字或者单词之间的间距
letter-spacing:长度值;字母间的间距
text-transform: none/uppercase/lowercase/capitalize;不改变/全部大写/全部小写/首字母大写
text-decoration:none/underline/overline/line-through/blink;文本装饰
direction:ltr/rtl;块级元素中文本的书写方向或者是列布局方向
font-family:Georgia,serif;定义字体
font-style:normal/italic/oblique;字体风格正常/斜体/倾斜
font-weight:normal/bold/lighter/100-900;900对应bold,字的粗细
font-size:px/em/%;1em=当前的字体大小的px值
6、链接a的不同状态
a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻
当为链接的不同状态设置样式时，请按照以下次序规则：
a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后
7、列表
list-style-type: square/circle...;
list-style-image: url();使列表的图标换成自己的图片
list-style-position: inside/outside/inherit;定义图标相对于文本的位置
8、表格table
table{
border: #px solid blue;定义边框
border-collapse: collapse;定义单边框
width：
height:
border-spacing:#px;定义单元格边框间的距离
empty-cells:hide/show/inherit;定义空的单元格是否显示}
th,td{
text-align:right/left/center;文本水平对齐
vertical-align:baseline/sub/super/top/text-top/middle/bottom/text-bottom/length/%/inherit;垂直对齐（用于行内元素）
padding: #px;内边距
}
9、轮廓（不同于border）
outline-color:red;
outline-style:dotted/dashed/solid/double/groove/ridge/inset/outset/inherit;定义轮廓线的样式
outline-width:#px;
可以一起表示
outline:color style width
10、css定位元素（可以用来布局）
自然定位{
position:static;}
相对定位（相对正常的位置偏移某个距离，远位置空间保留）
{(存在框相互覆盖的情况)
position:relative;
可以使用top: #px; right/bottom/left表示相对正常位置的偏移量
}
绝对定位{
position:absolute;相对于包含块的偏移，但是不占据空间（即底部可以放置元素）
可以使用top: #px; right/bottom/left表示相对正常位置的偏移量
}
固定定位{
position:fixed;相对于窗口的偏移
}
还可以使用z-index改变堆叠顺序，大的在上
overflow：visible默认值。内容不会被修剪，会呈现在元素框之外。
（必须先规定框的宽度和高度这样设置才有效）
hidden
scroll
auto(会有滚动条)
inherit