[TOC]

CSS样式

Background 背景属性

CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。
CSS 在这方面的能力远远在 HTML 之上。

background-color 规定要使用的背景颜色

background-color:#00ff00;

background-image 规定要使用的背景图像

background-image: url(bgimage.gif);

background-position 规定背景图像的位置

background-position:center; /*背景居中*/

background-size 规定背景图片的尺寸

语法:

background-size: length|percentage|cover|contain;

例:

background-size:80px 60px;

background-repeat 规定如何重复背景图像

background-repeat: repeat-y;

background-origin 规定背景图片的定位区域

background-origin:content-box;

background-clip 规定背景的绘制区域

background-clip:content-box;

background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动

background-attachment: fixed;

Text 文本属性

CSS 文本属性可定义文本的外观。
通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。

color 设置文本颜色

color:color_name|hex_number|rgb_number|inherit; /*三种方式|继承父元素*/

direction 设置文本方向

direction: ltr|rtl|inherit;/*左到右|右到左|继承父元素*/

line-height 设置行高

line-height:150%|1.5;

letter-spacing 设置字符间距

letter-spacing:2px|1em|inherit;/*像素|字宽|继承父元素*/

text-align 文本对齐

text-align:center;

text-decoration 文本横线修饰

text-decoration:line-through;

text-indent 首行缩进

text-indent:50px|2em;/*首行缩进50像素|2个字符*/

text-transform 文本字母控制

text-transform:uppercase;

white-space 空白的处理方式

white-space: nowrap;

word-spacing 设置字间距(空格宽度)

word-spacing:25px|0.5em;

FONT 字体

CSS 字体属性定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）。

font 简写属性,把所有针对字体的属性设置在一个声明中

font:italic arial,sans-serif;

可以按顺序设置如下属性：

• font-style
• font-variant
• font-weight
• font-size/line-height
• font-family

font-family 设置字体系列

font-family:"Times New Roman",Georgia,Serif;/*按优先级设置字体*/

font-size 设置字体尺寸

font-size:200%|2em|20px;

font-style 设置字体风格

font-style:italic;

talic 和 oblique 的区别
font-style 非常简单：用于在 normal 文本、italic 文本和 oblique 文本之间选择。唯一有点复杂的是明确 italic 文本和 oblique 文本之间的差别。
斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。与此不同，倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。
通常情况下，italic 和 oblique 文本在 web 浏览器中看上去完全一样。

font-variant 以小型大写字体或者正常字体显示文本

小写字母设置为小型大写字母字体：

font-variant:small-caps;

font-weight 设置字体的粗细

font-weight:900;

a标签 链接

我们能够以不同的方法为链接设置样式。

链接的四种状态：

• a:link - 普通的、未被访问的链接
• a:visited - 用户已访问的链接
• a:hover - 鼠标指针位于链接的上方
• a:active - 链接被点击的时刻

设置连接颜色:

a:link {color:#FF0000;}     /* 未被访问的链接 */
a:visited {color:#00FF00;}  /* 已被访问的链接 */
a:hover {color:#FF00FF;}    /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;}   /* 正在被点击的链接 */

文本修饰:

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

背景色:

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

List 列表

CSS 列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志。

list-style 列表属性

list-style:square inside url('/i/arrow.gif');

可以按顺序设置如下属性：

• list-style-type
• list-style-position
• list-style-image

list-style-type 设置列表项标志的类型

list-style-type:upper-roman;

list-style-position 设置列表中列表项标志的位置

list-style-position:inside;

list-style-image 将图象设置为列表项标志

list-style-image:url("/i/arrow.gif");

Table 表格

CSS 表格属性可以帮助您极大地改善表格的外观。

border-collapse:collapse 设置表格边框合并为单一的边框

border-collapse:collapse;  /*合并表格边框*/

border-spacing 设置分隔单元格边框的距离

border-spacing:10px 50px;

规定相邻单元的边框之间的距离。使用 px、cm 等单位。不允许使用负值。
如果定义一个 length 参数，那么定义的是水平和垂直间距。
如果定义两个 length 参数，那么第一个设置水平间距，而第二个设置垂直间距。

caption-side:bottom 把表格标题定位在表格之下

caption-side:bottom;

Outline 轮廓

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
CSS outline 属性规定元素轮廓的样式、颜色和宽度。

outline 在一个声明中设置所有的轮廓属性

outline:#00FF00 dotted thick;

可以按顺序设置如下属性：

• outline-color
• outline-style
• outline-width

outline-color 设置轮廓的颜色

outline-color:#00ff00;

outline-style 设置轮廓样式

 outline-style:dotted;

outline-width 设置轮廓宽度

 outline-width:5px;