【第四章】CSS（二）——文本外观属性与复合选择器

神明不懂浪漫2026-07-13 21:50

【第四章】CSS（二）------文本外观属性与复合选择器

前言

在网页设计中，CSS 不仅可以控制页面布局，还可以美化网页中的文字内容，并通过不同类型的选择器精准选中元素进行样式设置。

本章主要介绍 CSS 中常见的文本外观属性 和 复合选择器 。

其中，文本外观属性用于设置文字的颜色、对齐方式、装饰效果、缩进、行高等；复合选择器则可以帮助我们更灵活、更准确地选中页面元素。

通过本章学习，可以掌握：

  • 常见文本样式属性的使用方法
  • 文本属性在网页排版中的实际作用
  • 复合选择器的分类与语法
  • 伪类选择器在超链接和表单中的应用
  • 如何综合运用文本属性和复合选择器美化网页

一、CSS 文本外观属性概述

文本外观属性主要用于设置网页中文字的显示效果。

在实际开发中，合理设置文本样式，可以使网页更加美观、清晰，也能提升用户阅读体验。

常见的文本外观属性包括：

  • color：文本颜色
  • text-align：文本对齐方式
  • text-decoration：文本装饰
  • text-indent：文本首行缩进
  • line-height：行高

这些属性通常与字体属性配合使用，共同完成文字样式设计。

二、color：文本颜色

1. 基本作用

color 属性用于设置文本内容的颜色，是最常用的文本样式属性之一。

2. 基本语法

css 复制代码 
选择器 {
    color: 属性值;
}

3. 颜色表示方式

（1）预定义颜色名

css 复制代码 
p {
    color: red;
}

常见颜色名有：

  • red
  • blue
  • green
  • black
  • white
  • gray
  • yellow

（2）十六进制表示法

css 复制代码 
p {
    color: #ff0000;
}

说明：

  • #ff0000 表示红色
  • #00ff00 表示绿色
  • #0000ff 表示蓝色
  • #000000 表示黑色
  • #ffffff 表示白色

简写形式：

css 复制代码 
p {
    color: #f00;
}

（3）RGB 表示法

css 复制代码 
p {
    color: rgb(255, 0, 0);
}

含义：

  • 第一个值表示红色分量
  • 第二个值表示绿色分量
  • 第三个值表示蓝色分量

取值范围一般是 0~255

4. 示例

css 复制代码 
h1 {
    color: blue;
}

p {
    color: #333333;
}

三、text-align：文本对齐方式

1. 基本作用

text-align 属性用于设置文本内容在元素中的水平对齐方式。

2. 语法格式

css 复制代码 
选择器 {
    text-align: 属性值;
}

3. 常用取值

  • left：左对齐
  • center：居中对齐
  • right：右对齐

4. 示例

css 复制代码 
h1 {
    text-align: center;
}

p {
    text-align: left;
}

5. 应用场景

  • 标题通常设置为居中对齐
  • 正文一般默认左对齐
  • 某些提示文字或说明信息可以设置为右对齐

四、text-decoration：文本装饰

1. 基本作用

text-decoration 属性用于设置文本的装饰效果，常见于超链接样式设置。

2. 常用取值

  • none：无装饰
  • underline：下划线
  • overline：上划线
  • line-through：删除线

3. 示例

css 复制代码 
a {
    text-decoration: none;
}

h2 {
    text-decoration: underline;
}

.old-price {
    text-decoration: line-through;
}

4. 实际意义

  • 超链接默认有下划线，可以通过 none 去除
  • 删除线常用于表示原价
  • 下划线可用于强调文字内容

五、text-indent：文本首行缩进

1. 基本作用

text-indent 属性用于设置文本首行缩进，常用于段落排版。

2. 常用单位

  • px
  • em

其中，em 是相对单位，1em 通常表示当前一个文字的大小。

3. 示例

css 复制代码 
p {
    text-indent: 2em;
}

含义：

段落首行缩进两个字符的位置。

4. 应用场景

在文章正文中，常常通过 text-indent: 2em; 实现中文排版中常见的首行缩进效果。

六、line-height：行高

1. 基本作用

line-height 属性用于控制行与行之间的距离，即文字的行高。

2. 语法格式

css 复制代码 
选择器 {
    line-height: 属性值;
}

3. 示例

css 复制代码 
p {
    line-height: 30px;
}

4. 作用说明

适当增大行高可以提高文字的可读性，使页面显得更加舒适、整洁。

5. 单行文本垂直居中

当元素高度和行高相等时，可以实现单行文本的垂直居中。

css 复制代码 
div {
    height: 40px;
    line-height: 40px;
}

这种方法常用于：

  • 导航栏文字垂直居中
  • 按钮文字居中显示
  • 单行标题居中显示

七、文本属性综合示例

下面给出一个综合示例：

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>文本外观属性示例</title>
    <style>
        h1 {
            color: #1e90ff;
            text-align: center;
            text-decoration: underline;
        }

        p {
            color: #333;
            text-indent: 2em;
            line-height: 28px;
        }

        a {
            text-decoration: none;
            color: green;
        }
    </style>
</head>
<body>
    <h1>CSS 文本外观属性</h1>
    <p>
        CSS 可以设置文本颜色、对齐方式、缩进、装饰和行高等效果，
        使网页内容更加美观、规范。
    </p>
    <a href="#">这是一个链接</a>
</body>
</html>

八、复合选择器概述

1. 什么是复合选择器

在前面的学习中，我们接触过基础选择器，如：

  • 标签选择器
  • 类选择器
  • id 选择器
  • 通配符选择器

但在实际开发中，仅使用基础选择器往往不够灵活。

为了更加准确地选中元素，CSS 提供了 复合选择器。

复合选择器就是由两个或多个基础选择器组合形成的选择器，用于更精确地控制样式。

2. 复合选择器的常见分类

常见复合选择器包括：

  • 后代选择器
  • 子选择器
  • 并集选择器
  • 伪类选择器

九、后代选择器

1. 定义

后代选择器用于选择某个元素内部的所有指定后代元素。

2. 语法格式

css 复制代码 
父元素 后代元素 {
    样式声明;
}

注意：

父元素与后代元素之间用 空格 分隔。

3. 示例

css 复制代码 
ul li {
    color: red;
}

表示选中 ul 中的所有 li 元素。

4. HTML 示例

html 复制代码 
<ul>
    <li>列表项1</li>
    <li>列表项2</li>
</ul>

对应样式：

css 复制代码 
ul li {
    color: blue;
}

5. 特点

  • 可以嵌套多层
  • 只要是指定元素的后代都能选中
  • 适用范围较广

例如：

css 复制代码 
.nav ul li a {
    text-decoration: none;
}

表示选中 .nav 中 ul 中 li 中的 a 元素。

十、子选择器

1. 定义

子选择器只能选中某元素的 亲儿子元素，不能选中孙子元素或更深层后代元素。

2. 语法格式

css 复制代码 
父元素 > 子元素 {
    样式声明;
}

3. 示例

css 复制代码 
div > p {
    color: green;
}

表示只选中 div 的直接子元素 p。

4. 与后代选择器的区别

后代选择器

css 复制代码 
div p

表示选中 div 内所有层级的 p

子选择器

css 复制代码 
div > p

表示只选中 div 的直接子元素 p

5. 示例说明

html 复制代码 
<div>
    <p>这是儿子</p>
    <span>
        <p>这是孙子</p>
    </span>
</div>
css 复制代码 
div > p {
    color: red;
}

结果：

  • 第一个 p 被选中
  • 第二个 p 不会被选中

十一、并集选择器

1. 定义

并集选择器用于同时选择多个元素，并为它们设置相同的样式。

2. 语法格式

css 复制代码 
选择器1, 选择器2, 选择器3 {
    样式声明;
}

多个选择器之间用 逗号 分隔。

3. 示例

css 复制代码 
h1, h2, h3 {
    color: purple;
}

表示同时为 h1、h2、h3 设置相同颜色。

4. 应用场景

当多个元素样式相同时，使用并集选择器可以减少重复代码，提高代码简洁性。

例如：

css 复制代码 
div, p, span {
    font-size: 16px;
}

十二、伪类选择器

1. 定义

伪类选择器用于给某些元素的特殊状态设置样式。

最常见的是超链接相关伪类选择器。

2. 链接伪类

常用四种状态

  • a:link：未访问的链接
  • a:visited：已访问的链接
  • a:hover：鼠标悬停时
  • a:active：鼠标按下未弹起时

3. 示例

css 复制代码 
a:link {
    color: blue;
}

a:visited {
    color: purple;
}

a:hover {
    color: red;
}

a:active {
    color: orange;
}

4. 使用顺序

链接伪类通常按以下顺序书写：

css 复制代码 
a:link
a:visited
a:hover
a:active

可以理解为：

lvha

这是为了避免样式覆盖问题。

十三、:hover 伪类选择器

1. 基本作用

:hover 表示鼠标悬停在元素上时的状态。

它不仅可以用于超链接，也可以用于其他元素。

2. 示例

css 复制代码 
div:hover {
    color: white;
    background-color: blue;
}

当鼠标移入 div 时，文字变白，背景变蓝。

3. 应用场景

  • 导航栏悬停效果
  • 按钮鼠标经过效果
  • 图片悬停高亮效果
  • 卡片悬停动画提示

十四、:focus 伪类选择器

1. 基本作用

:focus 用于选中获得焦点的表单元素。

2. 示例

css 复制代码 
input:focus {
    background-color: #f0f8ff;
    color: #333;
}

当输入框被点击并处于输入状态时，就会应用该样式。

3. 常见应用

  • 输入框高亮显示
  • 改变边框颜色
  • 提高表单交互体验

十五、复合选择器综合示例

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>复合选择器示例</title>
    <style>
        .nav ul li {
            list-style: none;
        }

        .nav > ul > li {
            display: inline-block;
            margin-right: 20px;
        }

        h1, h2, h3 {
            color: darkblue;
        }

        a {
            text-decoration: none;
        }

        a:hover {
            color: red;
        }

        input:focus {
            background-color: #e6f7ff;
        }
    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">新闻</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </div>

    <h1>欢迎学习 CSS</h1>
    <h2>复合选择器很重要</h2>
    <input type="text" placeholder="请输入内容">
</body>
</html>

十六、文本外观属性与复合选择器的结合使用

在实际网页开发中，文本外观属性通常不会单独使用，而是会与复合选择器结合起来，对特定区域中的文字进行样式控制。

例如：

css 复制代码 
.news p {
    color: #444;
    text-indent: 2em;
    line-height: 30px;
}

说明：

  • 选中 .news 区域中的所有段落
  • 设置段落字体颜色
  • 设置首行缩进
  • 设置行高

再例如：

css 复制代码 
.nav ul li a {
    text-decoration: none;
    color: #333;
}

.nav ul li a:hover {
    color: #1e90ff;
}

说明：

  • 设置导航栏超链接默认样式
  • 鼠标悬停时改变颜色

这就是 CSS 在真实页面中的典型应用方式。

十七、开发中常见注意事项

1. 选择器之间不要混淆

  • 后代选择器是空格
  • 子选择器是 >
  • 并集选择器是 ,

三者语法不同，作用也不同，必须区分清楚。

2. 超链接默认样式常需重置

浏览器会给 a 标签默认下划线和颜色，开发中通常需要重新设置：

css 复制代码 
a {
    text-decoration: none;
    color: #333;
}

3. text-indent 常用于段落，不适合所有元素

首行缩进更适合长文本段落，不适合按钮、标题等元素。

4. line-height 不宜过大或过小

  • 过小：文字拥挤，阅读困难
  • 过大：段落松散，影响版面

5. :hover 在网页交互中非常常见

它是实现"鼠标经过效果"的关键语法，必须熟练掌握。

十八、本章知识总结

本章主要学习了 CSS 中的文本外观属性和复合选择器。

1. 文本外观属性

常见文本属性包括：

  • color：设置文字颜色
  • text-align：设置文字对齐方式
  • text-decoration：设置文字装饰
  • text-indent：设置首行缩进
  • line-height：设置行高

这些属性可以使网页文字更加美观，也能提升页面可读性。

2. 复合选择器

常见复合选择器包括：

  • 后代选择器：用空格连接
  • 子选择器：用 > 连接
  • 并集选择器：用 , 连接
  • 伪类选择器：表示元素的特殊状态

3. 重点内容

本章学习的重点有：

  • 熟练掌握常见文本属性的含义和写法
  • 区分后代选择器和子选择器
  • 掌握并集选择器的书写方式
  • 重点理解 a:hover 和 input:focus 的应用

十九、结语

CSS 的文本外观属性和复合选择器是网页设计中的基础内容，也是后续学习盒子模型、布局、定位和页面美化的重要前提。

只有把文字样式设置好，把元素精准选中，才能进一步写出结构清晰、外观美观的网页。

因此，在学习本章时，不仅要记住每个属性和选择器的语法，更要理解它们在实际网页开发中的用途。

只有不断练习，才能真正熟练掌握 CSS。

二十、附：常见语法速查表

文本属性速查

css 复制代码 
color: red;
text-align: center;
text-decoration: none;
text-indent: 2em;
line-height: 28px;

复合选择器速查

css 复制代码 
div p { }      /* 后代选择器 */
div > p { }    /* 子选择器 */
h1, h2, h3 { } /* 并集选择器 */
a:hover { }    /* 伪类选择器 */
input:focus { }/* 焦点伪类 */

超链接伪类顺序

css 复制代码 
a:link
a:visited
a:hover
a:active
相关推荐
kyriewen1 小时前
别再用AI debug了——这5种bug越修越烂
前端·javascript·ai编程
星释2 小时前
鸿蒙智能体开发实战：39.鸿蒙壁纸大师 - 前端卡片显示与交互优化
前端·华为·交互·harmonyos·鸿蒙·火山引擎
顾昂_3 小时前
内存泄漏排查和 Chrome DevTools 使用教程
前端·javascript·面试
栈溢出了4 小时前
Redis 分片集群与哈希槽笔记
java·redis·笔记·spring
IT_陈寒4 小时前
Java线程池这个坑我算是踩明白了
前端·人工智能·后端
我命由我123454 小时前
复利极简理解
经验分享·笔记·学习·职场和发展·求职招聘·职场发展·学习方法
31535669134 小时前
Superpowers：GPT-5.6 时代下的流程毒瘤
前端·后端
AOwhisky5 小时前
Python 学习笔记（第三期）——流程控制核心知识点自测与详解
开发语言·笔记·python·学习·云原生·运维开发·流程控制
清秋5 小时前
全网最全 ECMAScript 攻略（ 更新至 ES2026）
前端·javascript·编程语言
热门推荐
01GitHub 镜像站点02AI科技热点日报 | 2026年07月01日03幻兽帕鲁 - 服务器管理员权限与 GM 命令完全指南042026年7月AI圈大地震：GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片05GPT-5.5 对比 GPT-5.6 Sol、Terra、Luna：官方性能数据与选型分析062026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？072026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf082026 AI 编程工具终极实战指南：Cursor vs Claude Code vs Copilot，开发者该怎么选？09AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路10全面体验 Grok API 中转站（2025 · Grok 4 系列最新版）