### 1. 前言
CSS（Cascading Style Sheets）是一种用于描述文档展示方式的样式表语言，它可以为HTML文档添加各种各样的样式，如字体、颜色、背景、边框等，从而美化页面，提高用户体验。本文将介绍如何使用CSS样式表来美化HTML文档，并提供一些实用的样式示例。
### 2. 基础样式
在HTML文档中引入CSS样式表需要使用`<link>`标签，如下所示：
```html
<head>
<link rel="stylesheet" href="style.css">
</head>
```
其中，`rel`属性指定关系为“stylesheet”，`href`属性指定CSS文件路径。
接下来，我们可以在`style.css`文件中定义一些基础样式，如下所示：
```css
/* 设置全局字体大小和颜色 */
body {
font-size: 16px;
color: #333;
}
/* 设置标题字体和颜色 */
h1, h2, h3 {
font-family: Arial, sans-serif;
color: #666;
}
/* 设置链接颜色和下划线 */
a {
color: #007bff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
```
上述代码中，我们设置了全局字体大小和颜色、标题字体和颜色、链接颜色和下划线等基础样式，这些样式将应用于整个HTML文档。
### 3. 文本样式
在HTML文档中，我们可以使用`<p>`、`<h1>`、`<h2>`等标签来定义文本内容。为了让文本内容更加美观，我们可以使用CSS样式表来设置文本样式，如下所示：
```css
/* 设置段落字体大小和行高 */
p {
font-size: 14px;
line-height: 1.5;
}
/* 设置标题字体大小和下划线 */
h1 {
font-size: 24px;
text-decoration: underline;
}
h2 {
font-size: 20px;
}
/* 设置加粗文本 */
strong {
font-weight: bold;
}
/* 设置斜体文本 */
em {
font-style: italic;
}
```
上述代码中，我们设置了段落字体大小和行高、标题字体大小和下划线、加粗文本、斜体文本等文本样式。
### 4. 背景样式
在HTML文档中，我们可以使用`<body>`、`<div>`等标签来定义背景内容。为了让背景内容更加美观，我们可以使用CSS样式表来设置背景样式，如下所示：
```css
/* 设置背景颜色 */
body {
background-color: #f5f5f5;
}
/* 设置背景图片 */
div {
background-image: url("background.jpg");
background-repeat: no-repeat;
}
```
上述代码中，我们设置了背景颜色和背景图片。
### 5. 边框样式
在HTML文档中，我们可以使用`<div>`、`<table>`等标签来定义边框内容。为了让边框内容更加美观，我们可以使用CSS样式表来设置边框样式，如下所示：
```css
/* 设置边框颜色、宽度和圆角 */
div {
border: 1px solid #ccc;
border-radius: 4px;
}
/* 设置表格边框 */
table {
border-collapse: collapse;
}
td, th {
border: 1px solid #ccc;
}
```
上述代码中，我们设置了边框颜色、宽度和圆角以及表格边框。
### 结语
通过使用CSS样式表，我们可以为HTML文档添加各种各样的样式，从而美化页面、提高用户体验。本文介绍了基础样式、文本样式、背景样式和边框样式等常用样式，并提供了一些实用的样式示例。
