CSS中拥有各种各样的样式表，而基本的样式有背景，文本，字体，链接，列表，表格，轮廓。
一.CSS-背景
CSS中允许用纯色背景，也允许用图片来创建复杂的个性背景。
p {background-color: #000;}
是用纯色作为背景。这时你可以定义其他属性，生成不同效果的背景。
CSS中也可以用图片作为背景，这是就需要使用background-image属性了，如果属性值为一个URL值，并且图片文件存在，那么就可以看到用该图片做为背景的网页了
body {background-image: url(4.gif);}
注：background-image属性也可以用在其他标签里。
这时可以定义其他属性，改变图片的位置，大小等等。
可以使用 background-repeat 属性，对页面上的图片背景进行平铺处理，利用 background-position 属性改变图像在背景中的位置。
需要注意的是，在改变图片背景的位置时，可以使用关键字，也可以使用百分比，还可以使用长度值来确定图片的位置。
当文档很长，一个屏幕显示不下的时候，在向下滚动的时候，我们不希望背景也一起滚动，这是就可以用到background-attachment 属性防止这种滚动，防止背景滚动，将背景固定到一个可视区域中（fixed），不会收到网页滚动的影响。
二.CSS-文本
文本，应该是一个网页中占据内容最多的部分，所以文本的样式是比较重要的。
CSS中的属性可定义文本的外观，包括文本的颜色、字符间距、对齐方式，还可以对文本进行装饰、排版等。
CSS 文本属性
| 属性 | 描述 |
|---|---|
| color | 设置文本颜色 |
| direction | 设置文本方向。 |
| line-height | 设置行高。 |
| letter-spacing | 设置字符间距。 |
| text-align | 对齐元素中的文本。 |
| text-decoration | 向文本添加修饰。 |
| text-indent | 缩进元素中文本的首行。 |
| text-shadow | 设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。 |
| text-transform | 控制元素中的字母。 |
| unicode-bidi | 设置文本方向。 |
| white-space | 设置元素中空白的处理方式。 |
| word-spacing | 设置字间距。 |
注：在文本属性中的部分属性值，可以用长度、百分比、关键字等等来设置。
三.CSS-字体
CSS的字体属性定义文本的字体、大小、风格（加粗、倾斜）和变形等。
CSS的字体系列
在 CSS 中，有两种不同类型的字体系列名称：
- 通用字体系列 - 拥有相似外观的字体系统组合（比如 "Serif" 或 "Monospace"）
- 特定字体系列 - 具体的字体系列（比如 "Times" 或 "Courier"）
除了各种特定的字体系列外，CSS 定义了 5 种通用字体系列：
- Serif 字体
- Sans-serif 字体
- Monospace 字体
- Cursive 字体
- Fantasy 字体
定义文本的字体属性时，应用到font-family属性。定义它的属性值时，可以用通用字体系列，也可以用指定字体系列，这两种字体系列也可以同时使用。
body {font-family: Serif;}
希望html文档使用Serif字体，但又不关心是哪种字体，这时可以用到通用字体系列。
body {font-family: Georgia;}
将body元素的字体设置成具体的Georgia字体。
定义字体风格时，应用到font-style属性。
font-style属性值有：
- normal - 文本正常显示
- italic - 文本斜体显示
- oblique - 文本倾斜显示
注：斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。与此不同，倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。
CSS 字体属性
| 属性 | 描述 |
|---|---|
| font | 简写属性。作用是把所有针对字体的属性设置在一个声明中。 |
| font-family | 设置字体系列。 |
| font-size | 设置字体的尺寸。 |
| font-size-adjust | 当首选字体不可用时，对替换字体进行智能缩放。 |
| font-stretch | 对字体进行水平拉伸。 |
| font-style | 设置字体风格。 |
| font-variant | 以小型大写字体或者正常字体显示文本。 |
| font-weight | 设置字体的粗细。 |
四.CSS-链接
CSS中我们也可以为链接设置各种规格样的样式。不过相对于其他的，链接样式比较简单。
链接的特殊性在于能够根据它们所处的状态来设置它们的样式。
链接的四种状态：
- a:link - 普通的、未被访问的链接
- a:visited - 用户已访问的链接
- a:hover - 鼠标指针位于链接的上方
- a:active - 链接被点击的时刻
当为链接的不同状态设置样式时，请按照以下次序规则：
- a:hover 必须位于 a:link 和 a:visited 之后
- a:active 必须位于 a:hover 之后
五.CSS-列表
CSS 列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志。
在html中有效的使用列表，可以使页面变得非常丰富的同时，也很整齐。
列表最常用的属性是它的标志类型：list-style-type
同样，当列表项不够用（不想用）时，我们也可以用图片来做列表项。
ul li {list-style-image : url(1.gif)}
由于列表的使用频率比较高，所以可以将列表的属性简写
li {list-style : url(1.gif) square inside}
CSS 列表属性(list)
| 属性 | 描述 |
|---|---|
| list-style | 简写属性。用于把所有用于列表的属性设置于一个声明中。 |
| list-style-image | 将图象设置为列表项标志。 |
| list-style-position | 设置列表中列表项标志的位置。 |
| list-style-type | 设置列表项标志的类型。 |
六.CSS-表格
有效的使用表格属性，可以将那些看起来很死板的表格变得很个性。
table, th, td
{
border: 1px solid red;;
}
将表格table、th 以及 td 设置了蓝色边框。
也可以对表格边框的其他属性进行定义，从而得到各式各样边框的表格。
对表格的大小（高宽）进行定义，使之更符合html的布局设计，是网页更加美观。
我也可以对表格内部的文本属性进行定义，text-align 和 vertical-align 属性设置表格中文本的对齐方式
td
{
text-align:right;
}
为表格td和th元素设置padding属性，可以改变表格内容对表格内边框的距离。
和其他背景一样，也可以为表格添加背景颜色，可以为纯色，也可以为图片。
CSS Table 属性
| 属性 | 描述 |
|---|---|
| border-collapse | 设置是否把表格边框合并为单一的边框。 |
| border-spacing | 设置分隔单元格边框的距离。 |
| caption-side | 设置表格标题的位置。 |
| empty-cells | 设置是否显示表格中的空单元格。 |
| table-layout | 设置显示单元、行和列的算法。 |
七.CSS-轮廓
轮廓可以理解为包围在某元素周围的一条线，起强调作用。
CSS 边框属性
| 属性 | 描述 |
|---|---|
| outline | 在一个声明中设置所有的轮廓属性。 |
| outline-color | 设置轮廓的颜色。 |
| outline-style | 设置轮廓的样式。 |
| outline-width | 设置轮廓的宽度。 |
CSS自学笔记（5）:CSS的样式,布布扣,bubuko.com