背景
需要注意：背景的所有属性都不会向下进行继承。
背景色
我们可以设定一个纯色为背景色。
p {background-color: red;} a {background-color: #ff0000;}
背景色有特点如下：
- 可以为所有元素设置背景色，这包括 body 一直到 em 和 a 等行内元素。
- background-color 不能继承，其默认值是 transparent。transparent 有“透明”之意。也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。
背景图像
background-image 属性的默认值是 none，表示背景上没有放置任何图像。
设定背景图像代码如下：
body {background-image: url(/i/eg_bg_04.gif);}
只需要将背景图片的地址通过url传入即可。
背景重复
如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。
属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。
background-repeat: repeat-y;
背景定位
可以利用 background-position 属性改变图像在背景中的位置。
background-position:center;
为 background-position 属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right 和 center。通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如 100px 或 5cm，最后也可以使用百分数值。
文本
缩进文本
CSS 提供了 text-indent 属性，该属性可以方便地实现文本缩进。
p {text-indent: 5em;}
em是作为一种基于文字大小的单位，具体可以查看这里。
另外需要注意的是text-indent属性是可以继承的。
水平对齐
text-align 是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式。
- left：把文本排列到左边。默认值：由浏览器决定。
- right：把文本排列到右边。
- center：把文本排列到中间。
- justify：实现两端对齐文本效果。
- inherit：规定应该从父元素继承 text-align 属性的值。
文本方向
direction 属性影响块级元素中文本的书写方向，有两个值：ltr 和 rtl。大多数情况下，默认值是 ltr，显示从左到右的文本。如果显示从右到左的文本，应使用值 rtl。
字符转换
- text-transform 属性处理文本的大小写，有四个值：
- none：不对字符进行转换。
- uppercase：字符全部转换为大写。
- lowercase：字符全部转换为小写。
- capitalize：每个单词首字母大写。
文本装饰
text-decoration 属性提供对文本进行装饰的功能，有下面几个值：
- none：不对文本进行处理。
- underline：添加下划线。
- overline：添加上划线。
- line-through：添加删除线。
处理空白符
white-space 属性会影响到用户代理对源文档中的空格、换行和 tab 字符的处理。
默认的情况下浏览器会把所有空白符合并为一个空格，同时忽略元素中的换行。如果希望保留空格和换行可以使用该属性。
可使用的值如下：
- 值 空白符 换行符 自动换行
- pre-line 合并 保留 允许
- normal 合并 忽略 允许
- nowrap 合并 忽略 不允许
- pre 保留 保留 不允许
- pre-wrap 保留 保留 允许
字体
使用哪种字体
在设定字体时，常常会出现一种情况，即我们设定使用的字体不能保证用户的机器上一定安装了，这样的结果就是，同样一个HTML网页，由于字体的不确定性导致最终的显示都不一致。
针对这个情况，CSS提出了通用字体系列，即拥有相似外观的字体系统组合，当我们制定了通用字体时，系统会在用户的机器上寻找到最接近我们要使用的字体的字体，可以尽可能的使显示一致。
通用的字体有如下几种：
- Serif：这些字体成比例，而且有上下短线。
- Sans-serif：这些字体是成比例的，而且没有上下短线。
- Monospace：Monospace 字体并不是成比例的。
- Cursive：这些字体试图模仿人的手写体。
- Fantasy：这些字体无法用任何特征来定义，只有一点是确定的，那就是我们无法很容易地将其规划到任何一种其他的字体系列当中。
指定字体系列
通过 font-family 属性设置更具体的字体。
/*指定为通用字体*/ body {font-family: sans-serif;} /*指定为特定字体*/ h1 {font-family: Georgia;} /*如果指定的特定字体找不到则使用后面的通用字体*/ h1 {font-family: Georgia, serif;} /*根据顺序依次查找到可以使用的字体*/ p {font-family: Times, TimesNR, 'New Century Schoolbook', Georgia, 'New York', serif;}
字体风格
font-style 属性最常用于规定斜体文本。
该属性有三个值：
- normal - 文本正常显示
- italic - 文本斜体显示
- oblique - 文本倾斜显示
字体加粗
font-weight 属性设置文本的粗细。使用 bold 关键字可以将文本设置为粗体。关键字 100 ~ 900 为字体指定了 9 级加粗度。
p.normal {font-weight:normal;} p.thick {font-weight:bold;} p.thicker {font-weight:900;}
字体大小
font-size 属性设置文本的大小。
font-size 值可以是绝对或相对值。
绝对值：
- 将文本设置为指定的大小
- 不允许用户在所有浏览器中改变文本大小（不利于可用性）
- 绝对大小在确定了输出的物理尺寸时很有用
相对大小：
- 相对于周围的元素来设置大小
- 允许用户在浏览器改变文本大小
p {font-size:14px;} p {font-size:0.875em;}
结合使用百分比和 EM
在所有浏览器中均有效的方案是为 body 元素（父元素）以百分比设置默认的 font-size 值：
body {font-size:100%;} h1 {font-size:3.75em;} h2 {font-size:2.5em;} p {font-size:0.875em;}
链接
链接的四种状态
- a:link - 普通的、未被访问的链接
- a:visited - 用户已访问的链接
- a:hover - 鼠标指针位于链接的上方
- a:active - 链接被点击的时刻
下面我们来看一个示例：
<!DOCTYPE html> <html> <head> <style> a:link {color:#FF0000;} /* 未被访问的链接 */ a:visited {color:#00FF00;} /* 已被访问的链接 */ a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */ a:active {color:#0000FF;} /* 正在被点击的链接 */ </style> </head> <body> <p><b><a href="/index.html" target="_blank">这是一个链接</a></b></p> <p><b>注释：</b>为了使定义生效，a:hover 必须位于 a:link 和 a:visited 之后！！</p> <p><b>注释：</b>为了使定义生效，a:active 必须位于 a:hover 之后！！</p> </body> </html>
同理，我们除了控制链接的颜色外，还可以控制<a>标签的其它样式，如背景、是否带有下划线等。
列表
我们可以修改列表项的前方第一个标示：
/*去掉标示*/ ul {list-style-type : none} /*使用方块*/ ul {list-style-type : square} /*使用图像来进行标示*/ ul li {list-style-image : url(xxx.gif)}
表格
CSS 表格属性可以帮助您极大地改善表格的外观。
表格边框
如需在 CSS 中设置表格边框，请使用 border 属性
table, th, td { border: 1px solid blue; }
折叠边框
边框变为只有一条线：
table { border-collapse:collapse; } table,th, td { border: 1px solid black; }
表格文本对齐
td { text-align:right; height:50px; vertical-align:bottom; }