文字样式（网页美化核心，提升页面质感）

6.1 字体相关属性

字体类型（font-family）

定义：设置元素的字体类型。

语法：

css

元素 {
  font-family: 字体1, 字体2, 字体3, ..., 通用字体族;
}

示例：

css

body {
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
}

推荐字体：

中文字体：微软雅黑、苹方、思源黑体
英文字体：Arial、Helvetica、Times New Roman
通用字体族：sans-serif（无衬线字体）、serif（衬线字体）、monospace（等宽字体）

字体大小（font-size）

定义：设置元素的字体大小。

语法：

css

元素 {
  font-size: 大小值;
}

常用单位：

px：像素，固定大小
em：相对单位，相对于父元素的字体大小
rem：相对单位，相对于根元素（html）的字体大小
%：相对于父元素的字体大小

示例：

css

h1 {
  font-size: 28px;
}
p {
  font-size: 16px;
}
.small-text {
  font-size: 0.8em;
}

字体粗细（font-weight）

定义：设置元素的字体粗细。

语法：

css

元素 {
  font-weight: 粗细值;
}

常用值：

normal：正常（400）
bold：粗体（700）
bolder：更粗
lighter：更细
100-900：数值表示，400为正常，700为粗体

示例：

css

.bold-text {
  font-weight: bold;
}
.light-text {
  font-weight: 300;
}

字体样式（font-style）

定义：设置元素的字体样式。

语法：

css

元素 {
  font-style: 样式值;
}

常用值：

normal：正常
italic：斜体
oblique：倾斜

示例：

css

.italic-text {
  font-style: italic;
}

6.2 文本相关属性

文本颜色（color）

定义：设置元素的文本颜色。

语法：

css

元素 {
  color: 颜色值;
}

颜色值的写法：

十六进制：#RRGGBB，如 #ff0000（红色）
RGB：rgb(红, 绿, 蓝)，如 rgb(255, 0, 0)（红色）
RGBA：rgba(红, 绿, 蓝, 透明度)，如 rgba(255, 0, 0, 0.5)（半透明红色）
英文名称：如 red、blue、green

示例：

css

.primary-text {
  color: #333;
}
.accent-text {
  color: #ff6600;
}
.light-text {
  color: rgba(255, 255, 255, 0.8);
}

文本对齐（text-align）

定义：设置元素的文本对齐方式。

语法：

css

元素 {
  text-align: 对齐方式;
}

常用值：

left：左对齐（默认）
center：居中对齐
right：右对齐
justify：两端对齐

示例：

css

.center-text {
  text-align: center;
}
.right-text {
  text-align: right;
}

文本装饰（text-decoration）

定义：设置元素的文本装饰效果。

语法：

css

元素 {
  text-decoration: 装饰值;
}

常用值：

none：无装饰（常用于清除链接下划线）
underline：下划线
overline：上划线
line-through：删除线

示例：

css

/* 清除链接下划线 */
a {
  text-decoration: none;
}

/* 添加删除线 */
.discount {
  text-decoration: line-through;
}

文本缩进（text-indent）

定义：设置元素的文本首行缩进。

语法：

css

元素 {
  text-indent: 缩进值;
}

示例：

css

/* 首行缩进2个字符 */
p {
  text-indent: 2em;
}

行高（line-height）

定义：设置元素的行高。

语法：

css

元素 {
  line-height: 行高值;
}

常用值：

数字：相对于字体大小的倍数
px：像素值
em：相对单位

示例：

css

/* 行高为字体大小的1.5倍 */
p {
  line-height: 1.5;
}

/* 固定行高 */
.title {
  line-height: 40px;
}

6.3 新手避坑：字体兼容性问题

问题描述

不同浏览器和操作系统可能没有安装相同的字体，导致网页在不同设备上显示不一致。

解决方案

字体堆栈：指定多个字体，浏览器会依次尝试使用
通用字体族：在字体堆栈的最后添加通用字体族
Web字体：使用@font-face加载自定义字体
系统字体：使用系统默认字体，确保在所有设备上都能显示

示例

css

/* 字体堆栈示例 */
body {
  font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
}

/* 使用Web字体 */
@font-face {
  font-family: "MyCustomFont";
  src: url("fonts/myfont.woff2") format("woff2"),
       url("fonts/myfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

.custom-font {
  font-family: "MyCustomFont", sans-serif;
}

6.4 实战：美化文章段落、标题、链接

实战目标

创建一个文章页面，美化标题、段落和链接的样式。

实战步骤

创建HTML文件：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS文字样式实战</title>
  <style>
    /* 在这里添加CSS样式 */
  </style>
</head>
<body>
  <article class="article">
    <h1>CSS文字样式实战</h1>
    <h2>一、字体样式</h2>
    <p>CSS提供了丰富的字体样式属性，可以让我们美化网页中的文字。通过设置字体类型、大小、粗细等属性，我们可以创建出美观的文字效果。</p>
    
    <h2>二、文本样式</h2>
    <p>除了字体样式，CSS还提供了文本相关的样式属性，如文本颜色、对齐方式、装饰效果等。这些属性可以帮助我们更好地排版文本内容。</p>
    
    <p class="highlight">这是一个高亮段落，用于突出显示重要内容。</p>
    
    <h2>三、链接样式</h2>
    <p>链接是网页中重要的元素，通过CSS我们可以美化链接的样式，包括正常状态、悬停状态、点击状态等。</p>
    
    <p>更多CSS知识，请访问 <a href="#">MDN Web Docs</a> 或 <a href="#">W3Schools</a>。</p>
  </article>
</body>
</html>

添加CSS样式：

css

/* 重置样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 页面样式 */
body {
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f5f5f5;
}

/* 文章容器 */
.article {
  max-width: 800px;
  margin: 50px auto;
  padding: 30px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 标题样式 */
h1 {
  font-size: 28px;
  color: #2c3e50;
  text-align: center;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 2px solid #3498db;
}

h2 {
  font-size: 22px;
  color: #34495e;
  margin: 25px 0 15px;
  padding-left: 10px;
  border-left: 4px solid #3498db;
}

/* 段落样式 */
p {
  margin-bottom: 15px;
  text-align: justify;
}

/* 高亮段落 */
.highlight {
  background-color: #fff3cd;
  color: #856404;
  padding: 15px;
  border-radius: 4px;
  border-left: 4px solid #ffc107;
}

/* 链接样式 */
a {
  color: #3498db;
  text-decoration: none;
  transition: color 0.3s;
}

a:hover {
  color: #2980b9;
  text-decoration: underline;
}

a:active {
  color: #1f618d;
}

运行页面：在浏览器中打开文件，观察效果

预期效果

标题：居中显示，有下划线或左侧边框装饰
段落：两端对齐，行高适中
高亮段落：黄色背景，左侧有边框
链接：蓝色，悬停时变深并显示下划线

文字样式（网页美化核心，提升页面质感） ​

6.1 字体相关属性 ​

字体类型（font-family） ​

字体大小（font-size） ​

字体粗细（font-weight） ​

字体样式（font-style） ​

6.2 文本相关属性 ​

文本颜色（color） ​

文本对齐（text-align） ​

文本装饰（text-decoration） ​

文本缩进（text-indent） ​

行高（line-height） ​

6.3 新手避坑：字体兼容性问题 ​

问题描述 ​

解决方案 ​

示例 ​

6.4 实战：美化文章段落、标题、链接 ​

实战目标 ​

实战步骤 ​

预期效果 ​

文字样式（网页美化核心，提升页面质感）

6.1 字体相关属性

字体类型（font-family）

字体大小（font-size）

字体粗细（font-weight）

字体样式（font-style）

6.2 文本相关属性

文本颜色（color）

文本对齐（text-align）

文本装饰（text-decoration）

文本缩进（text-indent）

行高（line-height）

6.3 新手避坑：字体兼容性问题

问题描述

解决方案

示例

6.4 实战：美化文章段落、标题、链接

实战目标

实战步骤

预期效果