一、背景
1. background-color: 背景颜色
2.background-image 设置图像为背景
- url("http://images.cnblogs.com/cnblogs_com/suoning/845162/o_ns.png"); 图片地址
- background-image:linear-gradient(green,blue,yellow,red,black); 颜色渐变效果
3. background-position 设置背景图像的位置坐标
- background-position: center center; 图片置中，x轴center，y轴center
- 1px -195px 截取图片某部分，分别代表坐标x，y轴
4.background-repeat 设置背景图像不重复平铺
- no-repeat 设置图像不重复，常用
-
round 自动缩放直到适应并填充满整个容器
- space 以相同的间距平铺且填充满整个容器
5.background-attachment 背景图像是否固定或者随着页面的其余部分滚动
6. background 简写
- background: url("o_ns.png") no-repeat 0 -196px;
-
background: url("o_ns.png") no-repeat center bottom 15px;
-
background: url("o_ns.png") no-repeat left 30px bottom 15px;
二、文本
1.white-space: 设置元素中空白的处理方式
- normal：默认处理方式。
- pre：保留空格，当文字超出边界时不换行
- nowrap：不保留空格，强制在同一行内显示所有文本，直到文本结束或者碰到br标签
- pre-wrap：保留空格，当文字碰到边界时换行
- pre-line：不保留空格，保留文字的换行，当文字碰到边界时换行
2.direction: 规定文本的方向
- ltr 默认，文本方向从左到右。
- rtl 文本方向从右到左。
3.text-align: 文本的水平对齐方式
- left
- center
- right
4.line-height: 文本行高
- normal 默认
5.vertical-align: 文本所在行高的垂直对齐方式
- baseline 默认
- sub 垂直对齐文本的下标，和<sub>标签一样的效果
- super 垂直对齐文本的上标，和<sup>标签一样的效果
- top 对象的顶端与所在容器的顶端对齐
- text-top 对象的顶端与所在行文字顶端对齐
- middle 元素对象基于基线垂直对齐
- bottom 对象的底端与所在行的文字底部对齐
- text-bottom 对象的底端与所在行文字的底端对齐
6. text-indent: 文本缩进
7.letter-spacing: 添加字母之间的空白
8. word-spacing: 添加每个单词之间的空白
9.text-transform: 属性控制文本的大小写
- capitalize 文本中的每个单词以大写字母开头。
- uppercase 定义仅有大写字母。
- lowercase 定义仅有小写字母。
10. text-overflow: 文本溢出样式
- clip 修剪文本。
- ellipsis 显示省略符号...来代表被修剪的文本。
- string 使用给定的字符串来代表被修剪的文本。
11.text-decoration: 文本的装饰
- none 默认。
- underline 下划线。
- overline 上划线。
- line-through 中线。
12.text-shadow：文本阴影
- 第一个参数是左右位置
- 第二个参数是上下位置
- 第三个参数是虚化效果
- 第四个参数是颜色
- text-shadow: 5px 5px 5px #888;
13.word-wrap：自动换行
- word-wrap: break-word;
三、文字
1.font-style: 用于规定斜体文本
- normal 文本正常显示
- italic 文本斜体显示
- oblique 文本倾斜显示
2.font-weight: 设置文本的粗细
- normal（默认）
- bold（加粗）
- bolder（相当于<strong>和<b>标签）
- lighter （常规）
- 100 ~ 900 整百（400=normal，700=bold）
3.font-size: 设置字体的大小
- 默认值：medium
- <absolute-size>可选参数值：xx-small、 x-small、 small、 medium、 large、 x-large、 xx-large
- <relative-size>相对于父标签中字体的尺寸进行调节。可选参数值：smaller、 larger
- <percentage>百分比指定文字大小。
- <length>用长度值指定文字大小，不允许负值。
4.font-family：字体名称
- 使用逗号隔开多种字体（优先级从前向后，如果系统中没有找到当前字体，则往后面寻找）
5.font：简写属性
- 语法：font：字体大小/行高 字体;（字体要在最后）
四、链接
链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。
特别的链接，可以有不同的样式，这取决于他们是什么状态。
这四个链接状态是：
- a:link - 正常，未访问过的链接
- a:visited - 用户已访问过的链接
- a:hover - 当用户鼠标放在链接上时
- a:active - 链接被点击的那一刻
实例
a:link {color:#000000;} /* 未访问链接*/ a:visited {color:#00FF00;} /* 已访问链接 */ a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
五、列表
1.list-style-type: 列表项标志的类型
- none 去除标志
- decimal-leading-zero; 02.
- square; 方框
- circle; 空心圆
- upper-alph; & disc; 实心圆
2. list-style-image：将图象设置为列表项标志
3. list-style-position：列表项标志的位置
- inside
- outside
4.list-style：缩写