目录
[1. CSS 定义](#1. CSS 定义)
[2. CSS 的基本语法](#2. CSS 的基本语法)
[3. 添加 CSS 的4种方法](#3. 添加 CSS 的4种方法)
[1. 字体 font-family](#1. 字体 font-family)
[2. 字号 font-size](#2. 字号 font-size)
[3. 字体风格 font-style](#3. 字体风格 font-style)
[4. 字体粗细 font-weight](#4. 字体粗细 font-weight)
[5. 小写字母转为大写 font-variant](#5. 小写字母转为大写 font-variant)
[6. 字体复合属性 font](#6. 字体复合属性 font)
[7. 颜色属性 color](#7. 颜色属性 color)
[1. 文本对齐方式 text-align](#1. 文本对齐方式 text-align)
[2. 垂直对齐方式 vertical-align](#2. 垂直对齐方式 vertical-align)
[3. 文本缩进 text-indent](#3. 文本缩进 text-indent)
[4. 文字装饰 text-decoration](#4. 文字装饰 text-decoration)
[5. 文本转换 text-transform](#5. 文本转换 text-transform)
[6. 文本行高 line-height](#6. 文本行高 line-height)
[7. 单词间隔 word-spacing](#7. 单词间隔 word-spacing)
[8. 字符间隔 letter-spacing](#8. 字符间隔 letter-spacing)
[9. 处理空白 white-space](#9. 处理空白 white-space)
[10. 文本反排 unicode-bidi、direction](#10. 文本反排 unicode-bidi、direction)
[1. 背景颜色 background-color](#1. 背景颜色 background-color)
[2. 背景图像 background-image](#2. 背景图像 background-image)
[3. 背景重复 background-repeat](#3. 背景重复 background-repeat)
[4. 背景位置 background-position](#4. 背景位置 background-position)
[5. 背景附着 background-attachment](#5. 背景附着 background-attachment)
[6. 背景复合属性 background](#6. 背景复合属性 background)
一、基本结构
1. CSS 定义
CSS（层叠样式表）是一种用于描述 HTML 或 XML 文档样式的计算机语言，通过选择器和声明规则控制网页元素的呈现形式，实现内容与表现分离。
2. CSS 的基本语法
CSS 的语法结构由3部分组成：选择器、属性和值。
**语法：**选择器(属性:值; 属性:值; ......)
3. 添加 CSS 的4种方法
(1) 内联样式
内联样式直接在 HTML 元素内部通过 style 属性定义。用这种方法，可以很简单地对某个元素单独定义样式，它主要是在 body 内实现。
例：
<p style="color:red; margin-right; 220px;"> 内容 </p>(2) 内部样式表
在<head>标签内，添加一个<style>标签，就可以在<style>标签编写 CSS 选择器和属性声明。
例：
<head> <style type="text/css"> p { color: blue; } </style> </head>(3) 外部样式表
链接外部样式表就是在网页中调用已经定义好的样式表来实现样式表的应用，它是一个单独的文件，在页面中用<link>标记链接到这个样式表文件，<link>标记必须放到页面的<head>标签内。这种方法最适合大型网站的 CSS 样式定义。
例：
<head> <link rel="stylesheet" type="text/css" href="style1.css"> </head>说明：
rel="stylesheet"：是指在页面中使用外部的样式表；
type="text/css"：是指文件的类型是样式表文件；
href="style1.css"：是文件所在的位置；
(4) 导入样式表
导入外部样式表是指在内部样式表的<style>里导入一个外部样式表，导入时用@import。
例：
<head> <style type-text/css> @import style1.css </style> </head>说明：
@import style1.css：表示导入 style1.css 样式表文件。
二、字体
1. 字体 font-family
font-family 用于指定文本的字体系列。可以列出多个字体名称，浏览器会按顺序查找可用字体。
语法：
font-family:"字体1", "字体2",......2. 字号 font-size
font-size 控制字体大小。常用单位包括像素（px）、相对单位（如 em）或百分比。
语法：
font-size:大小的取值**说明：**font-size 的取值范围：
值 描述 xx-small 绝对尺寸，最小。 x-small 绝对尺寸，较小。 small 绝对尺寸，小。 medium 绝对尺寸，正常（默认值） large 绝对尺寸，大。 x-large 绝对尺寸，较大。 xx-large 绝对尺寸，最大。 larger 相对尺寸，相对于父对象中字体尺寸进行相对增大。 smaller 相对尺寸，相对于父对象中字体尺寸进行相对减小。 length 可采用百分比或长度值，不可为负值，其百分比取值是 基于父对象中字体尺寸。 3. 字体风格 font-style
字体风格 font-style 属性用来设置字体是否为斜体。
语法：
font-style:样式的取值**说明：**样式的取值有3种
值 描述 normal 是默认的正常字体; italic 以斜体显示文字; oblique 中间状态，以偏斜体显示; 4. 字体粗细 font-weight
在 HTML 里使用<b>标记设置文字为粗体显示，而在 CSS 中利用 font-weight 属性来设置字体的粗细。
语法：
font-weight:字体粗细值**说明：**font-weight 的取值范围包括5种：
值 描述 normal 表示正常粗细； bold 表示粗体； bolder 表示特粗体; lighter 表示特细体; number 不是真正的取值，其范围是100~900，一般情况下都是 整百的数字，如200、300等。 5. 小写字母转为大写 font-variant
使用 font-variant 属性可以将小写的英文字母转化为大写。
语法：
font-variant:取值**说明：**在 font-variant 属性中，可以设置的值只有两个：
值 描述 normal 表示正常显示; small-caps 它能将小写的英文字母转化为大写字母且字体较小; 6. 字体复合属性 font
可以设置 font 的复合属性，用来简化 CSS 代码。
语法：
font:字体取值说明： 复合属性可以取值字体族科、字体大小、字体风格、加粗字体等，各值之间用空格相连。
例：
.h{font:bold italic "宋体"}7. 颜色属性 color
color 属性用米设置指定元素的颜色，颜色值是一个关键字或一个16进制的 RGB 值。
语法：
color:颜色取值**说明：**关键字就是颜色的英文名称，如 red、green、blue 分别表示红、绿、蓝。或用#加上16进制数表示颜色取值，如：color:#ff0000表示红色。
三、段落
1. 文本对齐方式 text-align
使用 text-align 属性可以设置文本的水平对齐方式
语法：
text-align:排列值**说明：**水平对齐方式取值包括4种：
值 描述 left 左对齐; right 右对齐; center 居中对齐; justify 两端对齐; 2. 垂直对齐方式 vertical-align
使用垂直对齐方式可以设置文字的垂直对齐方式。
语法：
vertical-align:排列取值**说明：**vertical-align 包括以下取值：
值 描述 baseline 浏览器默认的垂直对齐方式; sub 文字的下标; super 文字的上标; top 垂直靠上对齐; text-top 使元素和上级元素的字体向上对齐; middle 垂直居中对齐; text-bottom 使元素和上级元素的字体向下对齐; 3. 文本缩进 text-indent
在 HTML 中只能控制段落的整体向右缩进，如果不进行设置，浏览器则默认为不缩，而在CSS中可以控制段落的首行缩进以及缩进的距离。
语法：
text-indent:缩进值**说明：**文本的缩进值必须是一个长度值或一个百分比。
4. 文字装饰 text-decoration
使用文字修饰属性可以对文本进行修饰，如设置下画线、删除线等。
语法：
text-decoration:取值**说明：**取值范围包括5种：
值 描述 none 表示不修饰，是默认值; underline 表示对文字添加下画线; overline 表示对文字添加上划线; line-through 表示对文字添加删除线; blink 表示文字闪烁效果; 5. 文本转换 text-transform
文本转换属性用来转换英文字母的大小写。
语法：
text-transform:转换值**说明：**text-transform 包括以下取值：
值 描述 none 表示使用原始值; capitalize 表示使每个单词的第一个字母大写; uppercase 表示使每个单词的所有字母大写; lowercase 表示使每个单词的所有字母小写; 6. 文本行高 line-height
使用文本行高属性可以控制段落中行与行之间的距离。
语法：
line-height:行高值**说明：**行高值可以为长度、倍数或百分比。
7. 单词间隔 word-spacing
使用单词间隔 word-spacing 可以控制单词之间的间隔距离。
语法：
word-spacing:取值**说明：**取值可以使用 normal，也可以使用长度值。normal 指正常的间隔，是默认选项；长度是设置单词间隔的数值及单位，可以使用负值。
8. 字符间隔 letter-spacing
使用字符间隔可以控制字符之间的间隔距离。
语法：
letter-spacing:取值9. 处理空白 white-space
white-space 属性用于设置页面内空白的处理方式。
语法：
white-space:值**说明：**white-space 包括3个值：
值 描述 normal 默认属性，即将连续的多个空格合并; pre 会致源代码中的空格和换行符被保留，但这一选项只有在 Internet Explorer 6中才能正确显示; nowrap 强制在同一行内显示所有文本，直到文本结束或者遇 到<br>对象; 10. 文本反排 unicode-bidi、direction
unicode-bidi 与 direction 属性经常一起使用，用来设置对象的阅读顺序。
(1) unicode-bidi 属性
语法：
unicode-bidi:bidi-override | normal | embed**说明：**属性值包括3种：
值 描述 bidi-override 表示严格按照direction属性的值重排序; normal 表示为默认值; embed 表示对象打开附加的嵌入层，direction属性的值指定嵌入层，在对象 内部进行隐式重排序。 (2) direction 属性
语法：
direction:ltr | rtl | inherit**说明：**属性值包括3种：
值 描述 ltr 表示从左到右的顺序阅读; rtl 表示从右到左的顺序阅读; inherit 表示文本流的值不可继承;
四、背景
1. 背景颜色 background-color
语法：
background-color:颜色取值2. 背景图像 background-image
语法：
background-image:url（图像地址）3. 背景重复 background-repeat
使用background-repeat属性可以设置背景图像是否平铺，并且可以设置如何平铺。
语法：
background-repeat:取值**说明：**取值范围包括4种：
值 描述 no-repeat 表示背景图像不平铺; repeat 表示背景图像平铺排满整个网页; repeat-x 表示背景图像只在水平方向上平铺; repeat-y 表示背景图像只在垂直方向上平铺; 4. 背景位置 background-position
背景位置属性用于设置背景图像的位置，这个属性只能应用于块级元素和替换元素。替换元素包括img、input、textarea、select、object、iframe等。
语法：
background-position:位置取值**说明：**语法中的取值包括3种：
(1) background-position属性的长度设置值
设置值 说明 X(数值) 设置网页的横向位置，其单位可以是所有尺度单位 Y(数值) 设置网页的纵向位置，其单位可以是所有尺度单位 (2) background-position属性的百分比设置值
设置值 说明 0% 0% 左上位置 50% 0% 靠上居中位置 100% 0% 右上位置 0% 50% 靠左居中位置 50% 50% 正中位置 100% 50% 靠右居中对齐 0% 100% 左下位置 50% 100% 靠下居中对齐 100% 100% 右下位置 (3) background-position属性的关键字设置值
设置值 说明 top left 左上位置 top center 靠上居中位置 top right 右上位置 left center 靠左居中位置 center center 正中位置 right center 靠右居中对齐 bottom left 左下位置 bottom center 靠下居中对齐 bottom right 右下位置 5. 背景附着 background-attachment
使用背景附件属性background-atachment可以设置背景图像是随对象滚动还是固定不动。
语法：
background-attachment: 取值**说明：**取值范围包括2种：
值 描述 scroll 表示背景图像随对象滚动而滚动，是默认选项; fixed 表示背景图像固定在页面上不动，只有其他的内容随滚动条滚动; 6. 背景复合属性 background
使用背景复合属性background可以简化CSS代码。
语法：
background:取值说明： 取值范围可以包括背景颜色、背景图像、背景重复、背景附件和背景位置，各值之间用空格相连。
例：
background:url(imgaes/bg_down.jpg) no-repeat left top;