总结css

一、背景

 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：缩写