一、CSS文本属性
以下是一些常用的文本属性，比如设置文本颜色、行高、字号等等。
color用于描述文本的颜色，后跟颜色；
letter-spacing用于描述字符间距，后跟px；
line-height用于描述行高，后跟px、em或百分比；
text-align用于描述文本的对齐，后跟center、left、right、justify；
text-indent用于描述文本的首行缩进，后跟em；
text-decoration用于对文本进行装饰线，后跟overline、line-through、underline、none分别表示处于文字上方、中部、下方和去除超链接下划线，其中line-through也可以作为删除线。
例如，下列代码中，设置文本颜色为紫色、行高为2em、字符间距为2px、首行缩进2em：
css文件代码：
p{ color: purple; line-height: 2em; letter-spacing: 2px; text-indent: 2em; }
html文件代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="../CSS/new_file.css" /> </head> <body> <p>层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。</p> <p>CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</p> </body> </html>
运行结果如下：
二、CSS字体属性
（一）常用文本字体样式属性
以下是一些常用的文本字体样式设置，比如设置文本的字号、字体等等。
font用于设置所有字体属性，后跟bold表示加粗、italic表示斜体、px或字体类型；
font-size用于描述文本的字号，后跟px或百分比；
font-family用于描述文本的字体样式，后跟字体类型；
font-style用于描述文本斜体样式，后跟italic；
font-weight用于描述文本的粗体样式，后跟bold。
（二）设置整体font属性
当然也可以将所有的字体设置放在一个font属性内，这样方便简化字体设置。
例如，下列代码，设置文本为斜体加粗，字号大小为20px，行高为2em，字体类型为幼圆：
css文件代码：
p{ font: italic bold 20px/2em '幼圆'; }
html文件代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="../CSS/new_file.css" /> </head> <body> <p>层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。</p> <p>CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</p> </body> </html>
运行结果如下：
三、CSS背景属性
CSS背景属性代码用于定义HTML标签的背景，例如定义背景颜色、背景图片等等。
（一）背景颜色
通过background-color属性设置背景的颜色，可以通过颜色的英文名称、RGB或十六进制来表示颜色。
例如，下列代码，设置文本为斜体加粗，字号大小为20px，行高为2em，字体类型为幼圆：
css文件代码：
p { font: italic bold 20px/2em '幼圆'; background-color: aquamarine; } #title_color { background-color: red; }
html文件代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="../CSS/new_file.css" /> </head> <body> <h2 id="title_color">CSS</h2> <p>层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。</p> <p>CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</p> </body> </html>
运行结果如下：
（二）背景图片
通过background-image属性设置背景图片，它表示为background-image:url("")，url内部填写图片的相对路径，默认下图片是以平铺的方式重复显示，例如下图：
若除了设置了背景颜色，还设置了背景图片，则图片会覆盖背景颜色。
例如，下列代码，设置页面背景颜色为黑色以及背景图片，背景图片覆盖了背景颜色：
css文件代码：
body { background-color: black; background-image: url("../image/mountain.jpg") }
html文件代码：
<html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="../CSS/new_file.css" /> </head> <body> <h1>雪山</h1> </body> </html>
运行结果如下：
（三）图片平铺方式
通过background-repeat属性设置背景图片的平铺方式，后跟repeat-x表示水平x轴方向平铺；
repeat-y表示纵向y轴方向平铺；
若不想使图片背景设置平铺，只展示图片正常大小，即使用no-repeat。
例如，下列代码，水平方向x轴方向平铺图片：
css文件代码：
body { background-image: url("../image/酒柜.png"); background-repeat: repeat-x; }
运行结果如下：
设置background-repeat: repeat-y，使图片纵向y轴方向平铺，如下：
css文件代码：
body { background-image: url("../image/酒柜.png"); background-repeat: repeat-y; }
运行结果如下：
设置background-repeat: no-repeat，不使用平铺，如下：
css文件代码：
body { background-image: url("../image/酒柜.png"); background-repeat: no-repeat; }
运行结果如下：
（四）图片位置
通过background-position属性设置图片在背景的位置情况，例如，下列代码，设置图片位于背景的右上角，即background-position: right top;：
css文件代码：
body { background-image: url("../image/酒柜.png"); background-repeat: no-repeat; background-position: right top; }
运行结果如下：
（五）设置整体背景属性
可以将所有的背景设置放在一个background内，这样方便设置整体背景属性，表示为background : 颜色 图片相对路径 填充方式。
例如，下列代码，设置整体背景属性：
css文件代码：
body { background: orangered url("../image/酒柜.png") no-repeat; }
运行结果如下：
四、CSS伪类
伪类，简单的来说，就是对特定的HTML元素加上状态和属性。
（一）CSS超链接
在CSS中，超链接有四种状态，如下：
a:link表示未被访问的超链接；
a:visited表示已访问的超链接；
a:hover表示当鼠标停留在超链接上；
a:active表示当超链接被点击时；
像这种由a标签开头，冒号隔开，后面接状态的这种选择器称为伪类选择器。
要注意这四个的顺序，a:hover 必须放在 a:link 和 a:visited 之后，才是有效的，而a:active 必须放在 a:hover 之后，才是有效的。
例如，下列代码，设置不同的超链接点击效果：
css文件代码：
a.title1:link { color: aqua; } a.title2:visited { color: aqua; } a.title3:hover { color: aqua; } a.title4:active { color: aqua; }
html文件代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="../CSS/new_file.css" /> </head> <body> <h2>文章栏目</h2> <p><a class="title1" href="#">计算机网络</a></p> <p><a class="title2" href="#">数据库原理与应用</a></p> <p><a class="title3" href="#">C++</a></p> <p><a class="title4" href="#">JAVA</a></p> </body> </html>
运行结果如下：
当鼠标滑过设置的a:hover伪类选择器，即“C++”时，会有以下显示：
当鼠标点击设置的a:active伪类选择器，即“JAVA”时，会有以下显示：
（二）创建不同样式的伪类选择器
可以通过伪类选择器，进行一些不同样式的伪类选择器设置，比如可以设置当鼠标停留在超链接上时，其字号放大和颜色更改、改变背景颜色、改变字体类型、对文字进行修饰等等。
例如，下列代码，当鼠标停留在超链接上，文字放大且变为橘色：
css文件代码：
a { font-size: 15px; text-decoration: none; } a:hover { font-size: 20px; color: orange; }
html文件代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="../CSS/new_file.css" /> </head> <body> <h2>文章栏目</h2> <p><a href="#">计算机网络</a></p> <p><a href="#">数据库原理与应用</a></p> <p><a href="#">C++</a></p> <p><a href="#">JAVA</a></p> </body> </html>
运行结果如下：
鼠标停留在链接上时，超链接放大字号且变为橘色：
