前端编程课程十五、：CSS核心基础3：文字+段落样式

美化页面文本内容

同学们！我们课程已经进入深水区，一路走来相信已经有点累了，请继续坚持一下，你今天受的苦，吃的亏，担的责，扛的罪，忍的痛，到最后都会变成光，照亮你的路。

一、课件说明

适用人群：零基础前端学习者，已熟练掌握前2天内容（4种基础选择器、2种复合选择器、选择器优先级、常用伪类选择器），能精准选中元素、解决样式冲突、实现基础交互。
学习时长：1天（建议6-8小时，含理论讲解+即时实操+案例练习+易错点复盘，全程手写代码）
核心目标：精通6个高频文字样式属性、4个核心段落样式属性，能根据需求美化所有文本元素（标题、段落、链接、提示文本）；掌握文字垂直居中、首行缩进等开发高频技巧；理解文本样式的层叠与优先级应用，形成"选中元素→设置文本样式→优化排版"的完整逻辑。
前置准备：VS Code、Chrome浏览器、沿用前2天的CSS-Learn文件夹（index.html + style.css），提前回顾选择器和优先级规则（文本样式需结合选择器精准应用）。
衔接提示：前2天解决"如何选中元素""如何解决样式冲突"，今天解决"选中元素后，如何美化文本内容"，文本样式是页面美化的基础，直接影响用户阅读体验，后续所有页面开发都会用到。

二、核心知识点讲解（理论+即时实操，全程结合选择器应用）

模块1：文本样式核心认知（1小时）

1.1 什么是文本样式？

CSS文本样式，是专门用于美化"页面文本内容"的样式属性，主要分为两类：

文字样式：控制单个文字的外观（颜色、大小、粗细、字体、斜体、装饰线等）；

段落样式：控制文本段落的排版（水平对齐、行高、首行缩进、字间距等）。

类比理解：文本样式就像"文字的化妆品和排版工具"------文字样式是给文字"化妆"（涂颜色、调大小、换字体），段落样式是给文字"排版"（居中、缩进、调整行间距），让文本更美观、更易读。

1.2 文本样式的应用原则（必守）

精准匹配选择器：文本样式必须结合选择器（类、元素、后代等），选中目标文本元素后再设置样式，避免污染全局文本；

兼顾可读性：文字颜色与背景色对比明显（如黑色文字+白色背景，避免浅色文字+浅色背景），字号、行高适配阅读（常用14-16px字号，1.5倍行高）；

规范统一：同一页面的文本风格保持一致（如标题字号、段落行高统一），不杂乱；

优先级适配：当多个选择器给同一文本设置冲突样式时，遵循前2天所学的优先级规则，确保目标样式生效。

1.3 前置准备（动手编写基础结构）

先编写页面基础HTML结构，后续所有文本样式实操，都基于该结构编写，避免重复创建：

实操验证：保存代码，文件名：index.html , 用Chrome打开页面，确认基础结构正常显示（头部、标题、段落、链接），后续逐步添加文本样式。

模块1.4 综合演示动画说明（核心新增，可直接运行）

图示：演示界面

演示代码：

|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| /* 全局初始化：重置默认样式，统一字体 */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Microsoft Yahei", "PingFang SC", Arial, sans-serif; /* 全局过渡：所有元素默认添加0.3s平滑过渡，避免重复写 */ transition: all 0.3s ease; } /* 头部样式（ID选择器，最高优先级） */ #page-header { background-color: #212121; color: #fff; height: 60px; line-height: 60px; /* 单行垂直居中核心 */ text-align: center; font-size: 20px; font-weight: 700; } /* 头部hover动画：背景+字号变化 */ #page-header:hover { background-color: #2196f3; font-size: 22px; } /* 页面主标题 */ .page-title { color: #212121; font-size: 28px; font-weight: 700; text-align: center; letter-spacing: 1px; margin: 20px 0; } /* 主标题hover动画：颜色+字间距 */ .page-title:hover { color: #2196f3; letter-spacing: 3px; } /* 章节标题 */ .section-title { color: #2196f3; font-size: 20px; font-weight: 700; text-align: center; margin: 15px 0; } /* 章节标题hover动画：颜色+字号 */ .section-title:hover { color: #ff4444; font-size: 22px; } /* 文本容器：统一间距，避免子元素溢出 */ .text-container { margin: 0 20px; } /* 普通段落 */ .normal-text { color: #333; font-size: 16px; font-weight: 400; text-align: left; line-height: 1.5; text-indent: 2em; margin: 10px 0; } /* 警告文本 */ .warning-text { color: #ff4444; font-size: 14px; font-weight: 700; line-height: 1.5; margin: 10px 0; } /* 提示文本 */ .tip-text { color: #00c851; font-size: 14px; font-style: italic; text-decoration: line-through; letter-spacing: -0.5px; line-height: 1.5; margin: 10px 0; } /* 废弃文本 */ .del-text { color: #999; font-size: 14px; text-decoration: line-through; text-align: right; line-height: 1.5; margin: 10px 0; } /* 长文本段落 */ .long-text { color: #333; font-size: 16px; text-align: justify; line-height: 1.5; text-indent: 2em; margin: 10px 0; } /* 文本容器hover：触发子元素动画（后代选择器） */ .text-container:hover .normal-text { color: #2196f3; text-indent: 3em; } .text-container:hover .warning-text { color: #ff6700; font-style: italic; } .text-container:hover .tip-text { color: #ff4444; text-decoration: none; letter-spacing: 0; } .text-container:hover .del-text { color: #666; text-align: center; } .text-container:hover .long-text { color: #673ab7; line-height: 1.8; } /* 链接文本：转为块级元素，避免行内元素动画失效 */ .text-link { color: #2196f3; font-size: 16px; text-decoration: none; display: block; /* 关键：行内元素transform需转块级/行内块 */ margin: 15px 20px; } /* 链接hover动画：颜色+下划线+位移 */ .text-link:hover { color: #1976d2; text-decoration: underline; transform: translateX(5px); } /* 按钮容器：居中 */ .btn-container { text-align: center; margin: 20px 0; } /* 按钮样式：单行垂直居中 */ .text-btn { width: 180px; height: 40px; line-height: 40px; background-color: #2196f3; color: #fff; border: none; border-radius: 4px; font-size: 16px; cursor: pointer; text-align: center; } /* 按钮hover动画：背景+缩放+阴影 */ .text-btn:hover { background-color: #1976d2; transform: scale(1.05); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } |

实操验证：保存代码，文件名：style.css，与之前的 index.html文件放在同一文件夹，双击 index.html，确认基础结构正常显示（头部、标题、段落、链接），后续逐步添加文本样式。

1.4 .1 动画核心用途

本综合演示动画，整合了当天所学的6个文字样式属性 和4个段落样式属性，通过"鼠标悬浮触发样式切换"的动画效果，直观展示每个样式属性的作用、取值变化及实际应用场景，同时衔接前2天选择器（类、ID、并集、伪类）和优先级知识，让零基础学习者快速理解"样式设置→交互效果"的完整逻辑，避免纯理论记忆，强化实操记忆。

核心价值：可直接复制代码运行，既能演示所有文本样式的基础效果，又能通过动画对比样式变化，帮助快速区分不同属性的作用，同时掌握"过渡动画"的简单应用（为后续动画知识点铺垫）。

1.4 .2 动画各模块用途（对应当天知识点）

头部区域（ID选择器 #page-header）

基础样式：黑色背景、白色文字、line-height实现单行文字垂直居中、text-align水平居中、固定字号和字体（整合line-height、text-align、color、font-size、font-family属性）；

动画效果：鼠标悬浮时，背景色变为蓝色、字号变大（演示color、font-size属性的动态变化，同时用transition实现平滑过渡）；
对应知识点：单行文字垂直居中技巧（line-height=height）、文字颜色、字号、字体设置，ID选择器的应用。

标题区域（类选择器 .page-title、.section-title）
基础样式：主标题（深灰色、加粗、居中、字间距拉开）、章节标题（蓝色、加粗、居中）（整合color、font-weight、text-align、letter-spacing属性）；
动画效果：鼠标悬浮时，主标题变蓝色、字间距增大；章节标题变红、字号变大（演示color、font-size、letter-spacing属性的动态变化）；

对应知识点：文字粗细、水平对齐、字间距设置，类选择器、并集选择器的应用。

段落区域（类选择器 .normal-text/.warning-text等）

基础样式：每个段落对应不同的文本样式（普通段落首行缩进、警告文本红色加粗、提示文本绿色斜体删除线、废弃文本灰色删除线右对齐、长文本两端对齐）（整合所有10个核心样式属性）；

动画效果：鼠标悬浮文本容器（.text-container）时，所有段落样式同步切换（如普通段落颜色变蓝、首行缩进变大；警告文本变橙色、加斜体；提示文本变红、删除线取消等）；

对应知识点：所有文字样式（color、font-size、font-weight、font-family、font-style、text-decoration）和段落样式（text-align、line-height、text-indent、letter-spacing）的综合应用，后代选择器的应用。

链接区域（类选择器+伪类 .text-link:hover）

基础样式：蓝色、无下划线、与段落同字号（整合color、text-decoration、font-size属性）；

动画效果：鼠标悬浮时，颜色变深、显示下划线、轻微向右偏移（演示text-decoration、color属性的动态变化，添加简单位移动画）；

对应知识点：文字装饰线、颜色设置，伪类选择器（:hover）的应用，交互样式设置。

按钮区域（类选择器 .text-btn）

基础样式：蓝色背景、白色文字、水平+垂直居中（line-height实现）、圆角（整合line-height、text-align、color、font-size属性）；

动画效果：鼠标悬浮时，背景色变深、轻微放大、添加阴影（演示color属性的动态变化，强化单行文字垂直居中的记忆）；

对应知识点：单行文字垂直居中核心技巧，文字颜色、字号设置，伪类选择器的应用，样式优先级（按钮文本样式不被全局样式污染）。

1.4 .3 动画运行说明（必看）

运行方式：将上述完整的HTML代码复制到index.html文件，CSS代码复制到同目录的style.css文件，用Chrome浏览器打开index.html即可运行；

交互方式：鼠标悬浮不同元素，触发对应的样式切换动画（所有动画均为平滑过渡，时长0.3秒，视觉效果舒适）；

知识点对应：每个动画效果都对应当天所学的核心知识点，悬浮时可对比"基础样式"和"动画样式"的差异，快速记忆属性作用；

可修改性：可直接修改CSS中的属性取值（如颜色、字号、行高），刷新页面即可查看效果，强化实操练习。

模块2：文字样式属性（3.5小时，重点中的重点，6个高频属性）

文字样式属性，控制单个文字的外观，每个属性都有明确的常用取值和适用场景，逐个讲解、即时实操，记准"属性名+常用取值+易错点"，避免混淆。

2.1 color：设置文字颜色（最基础、最常用）

（1）理论讲解

作用：控制文字的颜色，几乎所有文本元素（h1、p、a、span等）都可使用。

常用取值（3种，开发首选第2种，精准且规范）：

英文单词：red（红色）、blue（蓝色）、green（绿色）、#fff（白色）、#333（深灰色）等，仅适用于简单颜色；

十六进制（推荐）：#开头，后跟6位十六进制数（0-9、a-f），如#ff4444（红色）、#2196f3（蓝色）、#333333（深灰色），可简写（如#333=#333333、#f00=#ff0000）；

RGB/RGBA：rgb(红, 绿, 蓝)，取值范围0-255，如rgb(255,68,68)=#ff4444；RGBA多一个透明度参数（0-1），如rgba(255,68,68,0.5)（半透明红色）。

适用场景：区分不同类型的文本（如警告文本红色、普通文本深灰色、提示文本蓝色）。

易错点：十六进制颜色漏写#（如ff4444写成ff4444，样式失效）；RGB取值超出0-255范围（如rgb(300,0,0)，无效）。

（2）即时实操

需求：给不同类别的文本设置不同颜色，结合类选择器，确保样式精准生效。

实操验证：刷新浏览器，观察不同文本的颜色的变化，确认所有颜色精准生效，链接悬浮时颜色加深。

2.2 font-size：设置文字大小（核心属性）

（1）理论讲解

作用：控制文字的大小，决定文本的视觉层级（如标题字号大于段落字号）。

常用取值（单位，开发首选第1种）：

px（像素，推荐）：固定大小，适配大部分场景，常用取值：12px（小提示）、14px（辅助文本）、16px（段落默认）、18px（小标题）、24px（大标题）、32px（页面主标题）；

em：相对父元素字号，1em=父元素font-size（如父元素16px，子元素0.8em=12.8px），适配响应式，新手暂不深入；

rem：相对根元素（html标签）字号，1rem=html标签font-size，新手暂不深入。

适用场景：区分文本层级（标题>段落>提示文本），统一页面字号规范。

易错点：漏写单位（如font-size:16，无px，样式失效）；字号设置过大/过小，影响阅读体验（如段落小于14px、标题大于48px）。

（2）即时实操

需求：给页面所有文本设置合理的字号，区分层级，结合选择器，确保样式统一、易读。

实操验证：刷新浏览器，确认标题字号大于段落，辅助文本略小，层级清晰，阅读舒适。

2.3 font-weight：设置文字粗细

（1）理论讲解

作用：控制文字的粗细（加粗/变细），用于突出重点文本（如标题、警告提示）。

常用取值（2种，推荐第2种，精准）：

关键字：normal（正常，默认，对应数字400）、bold（加粗，对应数字700）；

数字：100-900，仅取整百数，400=normal，700=bold，数字越大，文字越粗（如600比400粗，800比700粗）。

适用场景：标题加粗、警告提示加粗，普通文本保持正常粗细（避免过度加粗，影响阅读）。

易错点：数字取值非整百数（如font-weight:550，无效）；过度加粗（如900），导致文字模糊、不美观。

（2）即时实操

需求：标题加粗、警告文本加粗，普通文本和提示文本保持正常粗细，结合选择器设置。

实操验证：刷新浏览器，标题和警告文本加粗，其他文本正常，重点突出，排版整洁。

2.4 font-family：设置文字字体

（1）理论讲解

作用：控制文字的字体（如微软雅黑、宋体、Arial），统一页面字体风格，提升页面质感。

常用取值（开发规范写法，多字体备用）：

中文字体："Microsoft Yahei"（微软雅黑，Windows系统默认）、"PingFang SC"（苹方，Mac系统默认）、"宋体"；

英文字体：Arial、Helvetica（无衬线字体，适配所有系统）；

规范写法：多个字体用逗号分隔，前面是首选字体，后面是备用字体（避免用户电脑没有该字体，导致显示异常），最后加sans-serif（无衬线字体，兜底）。

适用场景：页面所有文本统一字体（如全局设置微软雅黑），避免字体杂乱。

易错点：中文字体未加英文引号（如font-family: Microsoft Yahei，无效，正确是"Microsoft Yahei"）；只设置一个字体，未加备用字体，导致部分用户电脑显示异常。

（2）即时实操

需求：给页面所有文本设置统一字体（首选微软雅黑，备用苹方、Arial，兜底无衬线字体），用通配符选择器+继承特性，简化代码。

实操验证：刷新浏览器，观察所有文本字体，确认统一为微软雅黑（若电脑没有，会自动切换到备用字体），提示文本字体略有不同（特殊设置）。

2.5 font-style：设置文字样式（斜体/正常）

（1）理论讲解

作用：控制文字的样式，主要用于设置斜体（正常文本默认不倾斜），用于强调辅助文本（如提示、引用）。

常用取值（3种，重点前2种）：

normal：正常样式（默认），取消斜体；

italic：斜体（常用），文字倾斜，用于强调；

oblique：倾斜样式，与italic类似，新手暂不区分，优先用italic。

适用场景：提示文本、引用文本、辅助说明文本，避免给标题、普通段落设置斜体（影响阅读）。

易错点：滥用斜体（如给标题、普通段落设置斜体），导致阅读困难；混淆italic和oblique，新手无需深入区分，优先用italic。

（2）即时实操

需求：提示文本设置斜体，其他文本保持正常样式，结合类选择器设置。

实操验证：刷新浏览器，只有提示文本是斜体，其他文本正常，突出辅助说明的同时，不影响整体阅读。

2.6 text-decoration：设置文字装饰线（高频）

（1）理论讲解

作用：控制文字的装饰线（下划线、删除线、上划线），最常用场景是"去掉链接默认下划线"。

常用取值（4种，重点前3种）：

none：无装饰线（常用），去掉链接默认下划线、文本默认装饰线；

underline：下划线，用于强调文本（如链接悬浮时显示下划线）；

line-through：删除线，用于表示废弃、过期的文本（如原价、废弃提示）；

overline：上划线，极少用，避免滥用。

适用场景：去掉链接默认下划线、链接悬浮显示下划线、废弃文本添加删除线。

易错点：给链接设置text-decoration:none后，忘记给hover添加underline，导致交互不明显；滥用上划线，影响页面美观。

（2）即时实操

需求：链接默认无下划线，悬浮时显示下划线；提示文本添加删除线（模拟废弃提示），结合伪类选择器设置。

|------------------------------------------------------------------------------------------------------|
| html   <p class="del-text">废弃提示：该文本已过时，请参考最新内容。</p> |

实操验证：刷新浏览器，链接默认无下划线，悬浮时显示下划线；提示文本和废弃文本有删除线，效果符合需求。

2.7 文字样式属性总结表（必背！）

|-----------------|------------|--------------------------------------|-----------------------|
| 属性名 | 核心作用 | 常用取值 | 易错点 |
| color | 设置文字颜色 | #333、#ff4444、rgb(255,68,68) | 漏写#、RGB取值超出0-255 |
| font-size | 设置文字大小 | 14px、16px、20px、28px（px单位） | 漏写单位、字号过大/过小 |
| font-weight | 设置文字粗细 | 400（normal）、700（bold） | 数字非整百数、过度加粗 |
| font-family | 设置文字字体 | "Microsoft Yahei", Arial, sans-serif | 中文字体未加引号、无备用字体 |
| font-style | 设置文字样式（斜体） | normal、italic | 滥用斜体、混淆italic和oblique |
| text-decoration | 设置文字装饰线 | none、underline、line-through | 链接无悬浮下划线、滥用上划线 |

模块3：段落样式属性（2小时，4个核心属性，控制排版）

段落样式属性，控制文本段落的整体排版，不影响单个文字的外观，重点掌握"水平对齐、行高、首行缩进"（开发高频），实现文本排版美观、易读。

3.1 text-align：文本水平对齐（高频）

（1）理论讲解

作用：控制块级元素（p、h1、div、h2等）内文本的水平对齐方式，行内元素（a、span等）无效。

常用取值（4种，重点前3种）：

left：左对齐（默认），普通段落、文本默认左对齐，符合阅读习惯；

center：水平居中，用于标题、按钮文本、页面头部文本，突出重点；

right：右对齐，极少用，用于特殊场景（如日期、金额）；

justify：两端对齐，让段落文本左右两侧都对齐，适用于长文本段落（如文章内容）。

适用场景：标题居中、头部文本居中、普通段落左对齐、长文本两端对齐。

易错点：给行内元素（如a标签）设置text-align，样式无效；滥用center，导致普通段落居中，影响阅读。

（2）即时实操

需求：标题、头部文本居中，普通段落左对齐，废弃文本右对齐，长文本两端对齐，结合选择器设置。

|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| html   <p class="long-text">CSS文本样式是页面美化的核心基础，合理运用文字样式和段落样式，能极大提升用户阅读体验。水平对齐方式的选择，应结合文本类型和使用场景，普通段落左对齐、标题居中，长文本两端对齐，确保排版规范、美观。</p> |

实操验证：刷新浏览器，标题、头部居中，普通段落左对齐，废弃文本右对齐，长文本两端对齐，排版整洁、符合阅读习惯。

3.2 line-height：设置行高（核心，高频，必掌握）

（1）理论讲解

作用：控制文本行与行之间的间距（行高），同时也是"实现单行文字垂直居中"的核心技巧，直接影响文本阅读舒适度。

常用取值（3种，推荐第2种，适配性强）：

px（像素）：固定行高，如line-height:24px，适用于固定字号的文本（如按钮文本、小标题）；

无单位数字（推荐）：相对于当前文字字号，如line-height:1.5，即行高=字号×1.5（如16px字号，行高=24px），适配性强，修改字号后行高自动调整；

百分比（%）：相对于当前文字字号，如line-height:150%，效果和无单位数字1.5一致，新手优先掌握无单位数字写法。

核心技巧：单行文字垂直居中------给容器设置固定高度，同时设置line-height=容器高度（如按钮高度40px，line-height:40px，文本即可垂直居中），这是开发中最常用的垂直居中方法。

适用场景：所有文本段落（常用1.5-1.8倍行高，提升阅读舒适度）、按钮文本垂直居中、标题行高设置（避免行高过小导致文字拥挤）。

易错点：行高设置过小（如line-height:1，文字拥挤难读）、过大（如line-height:3，浪费页面空间）；多行文本用line-height实现垂直居中（无效，line-height仅适用于单行文本垂直居中）。

（2）即时实操

需求：给所有段落设置1.5倍行高，按钮文本实现垂直居中，头部文本垂直居中，结合选择器和之前的代码，统一排版风格。

实操验证：刷新浏览器，所有段落行高适中、阅读舒适；头部和按钮文本实现水平+垂直居中，布局整齐，符合开发规范。

3.3 text-indent：首行缩进（高频，中文排版必备）

（1）理论讲解

作用：控制段落首行文本的缩进距离，是中文文本排版的核心技巧（如文章段落首行缩进2个字符）。

常用取值（2种，重点第1种，符合中文排版规范）：

em（推荐）：相对于当前文字字号，1em=1个字符，text-indent:2em即首行缩进2个字符（适配所有字号，中文排版首选）；

px（像素）：固定缩进距离，如text-indent:32px（对应16px字号的2个字符），但修改字号后需同步调整，适配性差。

适用场景：中文段落文本（如普通段落、长文本），标题、提示文本、废弃文本一般不设置首行缩进。

易错点：用px设置首行缩进，修改字号后缩进距离不匹配；给标题设置首行缩进，不符合排版规范；缩进值为负数（导致文本溢出，无效排版）。

（2）即时实操

需求：普通段落、长文本首行缩进2个字符，其他文本（警告、提示、废弃）不设置缩进，结合类选择器设置，符合中文排版规范。

实操验证：刷新浏览器，普通段落和长文本首行缩进2个字符，符合中文阅读习惯；其他辅助文本无缩进，重点突出，排版规范。

3.4 letter-spacing：设置字间距（辅助属性）

（1）理论讲解

作用：控制文本中单个字符之间的间距（字间距），用于调整文本的紧凑度，突出重点文本（如标题、标语）。

常用取值（2种）：

px（像素，推荐）：固定字间距，如letter-spacing:1px（拉开字间距）、letter-spacing:-0.5px（缩小字间距）；

em：相对于当前文字字号，如letter-spacing:0.1em，适配性强，新手优先掌握px单位写法。

适用场景：标题（拉开字间距，突出视觉效果）、标语、特殊提示文本（缩小/拉开字间距，调整紧凑度）；普通段落一般不设置字间距（保持默认，避免影响阅读）。

易错点：滥用字间距（如给普通段落设置过大/过小字间距，影响阅读）；字间距设置过大，导致文本分散、不连贯。

（2）即时实操

需求：页面主标题拉开字间距，提示文本缩小字间距，其他文本保持默认字间距，结合类选择器设置，提升视觉效果。

实操验证：刷新浏览器，主标题字间距拉开、视觉突出，提示文本字间距紧凑、不拥挤，其他文本保持默认，整体排版协调美观。

3.5 段落样式属性总结表（必背！）

|----------------|--------------|---------------------------|--------------------|
| 属性名 | 核心作用 | 常用取值 | 易错点 |
| text-align | 文本水平对齐 | left、center、right、justify | 给行内元素设置、滥用center |
| line-height | 设置行高、单行垂直居中 | 1.5（无单位）、24px、40px | 行高过大/过小、多行文本用其垂直居中 |
| text-indent | 段落首行缩进（中文排版） | 2em（推荐）、32px | px单位适配差、给标题设置缩进 |
| letter-spacing | 设置单个字符间距 | 1px、-0.5px、0.1em | 滥用、给普通段落设置过大间距 |

模块4：文字+段落样式综合案例（1小时，必练！）

核心目标：整合当天所学的10个核心属性（6个文字样式+4个段落样式），结合前2天的选择器知识，完成一个简单的文本美化案例，强化知识记忆，掌握"选中元素→设置样式→优化排版"的完整逻辑。

4.1 案例需求

页面头部：黑色背景、白色文本，水平+垂直居中，字号20px，加粗，鼠标悬浮时背景变蓝色、字号变大；

页面主标题：深灰色、28px、加粗、水平居中，字间距1px，鼠标悬浮时变蓝色、字间距3px；

章节标题：蓝色、20px、加粗、水平居中，鼠标悬浮时变红、字号22px；

普通段落：深灰色、16px、左对齐、首行缩进2em、1.5倍行高，鼠标悬浮容器时变蓝色、首行缩进3em；

警告文本：红色、14px、加粗、1.5倍行高，鼠标悬浮容器时变橙色、加斜体；
提示文本：绿色、14px、斜体、删除线、缩小字间距、1.5倍行高，鼠标悬浮容器时变红、取消删除线、字间距恢复默认；
废弃文本：灰色、14px、删除线、右对齐、1.5倍行高，鼠标悬浮容器时变深灰色、水平居中；
长文本：深灰色、16px、两端对齐、首行缩进2em、1.5倍行高，鼠标悬浮容器时变紫色、行高1.8倍；

链接文本：蓝色、16px、无下划线，鼠标悬浮时变深蓝色、显示下划线、轻微右移；

按钮：蓝色背景、白色文本、16px、水平+垂直居中，鼠标悬浮时背景变深、轻微放大、添加阴影。

4.2 案例完整代码（整合版，可直接复制运行）

说明：案例代码已整合当天所有知识点，同时添加过渡动画，与前文综合演示动画代码一致，此处单独列出，方便学员独立实操、验证效果。

|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| css /* style.css 完整代码 */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Microsoft Yahei", "PingFang SC", Arial, sans-serif; } /* 头部样式（ID选择器） */ #page-header { background-color: #212121; color: #fff; height: 60px; line-height: 60px; /* 单行垂直居中 */ text-align: center; /* 水平居中 */ font-size: 20px; font-weight: 700; transition: all 0.3s ease; /* 过渡动画 */ } #page-header:hover { background-color: #2196f3; font-size: 22px; } /* 页面主标题（类选择器） */ .page-title { color: #212121; font-size: 28px; font-weight: 700; text-align: center; letter-spacing: 1px; margin: 20px 0; transition: all 0.3s ease; } .page-title:hover { color: #2196f3; letter-spacing: 3px; } /* 章节标题（类选择器） */ .section-title { color: #2196f3; font-size: 20px; font-weight: 700; text-align: center; margin: 15px 0; transition: all 0.3s ease; } .section-title:hover { color: #ff4444; font-size: 22px; } /* 普通段落 */ .normal-text { color: #333; font-size: 16px; font-weight: 400; text-align: left; line-height: 1.5; text-indent: 2em; margin: 10px 20px; transition: all 0.3s ease; } /* 警告文本 */ .warning-text { color: #ff4444; font-size: 14px; font-weight: 700; line-height: 1.5; margin: 10px 20px; transition: all 0.3s ease; } /* 提示文本 */ .tip-text { color: #00c851; font-size: 14px; font-family: "Microsoft Yahei", serif; font-style: italic; text-decoration: line-through; letter-spacing: -0.5px; line-height: 1.5; margin: 10px 20px; transition: all 0.3s ease; } /* 废弃文本 */ .del-text { color: #999; font-size: 14px; text-decoration: line-through; text-align: right; line-height: 1.5; margin: 10px 20px; transition: all 0.3s ease; } /* 长文本段落 */ .long-text { color: #333; font-size: 16px; text-align: justify; line-height: 1.5; text-indent: 2em; margin: 10px 20px; transition: all 0.3s ease; } /* 链接文本（类选择器+伪类） */ .text-link { color: #2196f3; font-size: 16px; font-weight: 400; text-decoration: none; margin: 0 20px; display: inline-block; margin-top: 15px; transition: all 0.3s ease; } .text-link:hover { color: #1976d2; text-decoration: underline; transform: translateX(5px); } /* 按钮容器居中 */ .btn-container { text-align: center; margin: 20px 0; } /* 按钮样式：line-height实现垂直居中 */ .text-btn { width: 180px; height: 40px; line-height: 40px; background-color: #2196f3; color: #fff; border: none; border-radius: 4px; font-size: 16px; cursor: pointer; text-align: center; transition: all 0.3s ease; } .text-btn:hover { background-color: #1976d2; transform: scale(1.05); box-shadow: 0 2px 8px rgba(0,0,0,0.2); } /* 文本容器动画触发（后代选择器） */ .text-container:hover .normal-text { color: #2196f3; text-indent: 3em; } .text-container:hover .warning-text { color: #ff6700; font-style: italic; } .text-container:hover .tip-text { color: #ff4444; text-decoration: none; letter-spacing: 0; } .text-container:hover .del-text { color: #666; text-align: center; } .text-container:hover .long-text { color: #673ab7; line-height: 1.8; } |

4.3 案例实操要求

手写代码：禁止复制粘贴，逐行手写HTML和CSS代码，强化属性记忆和选择器应用；

验证效果：每写一个模块，刷新浏览器验证样式，确保每个属性生效（如首行缩进、垂直居中、动画效果）；
修改练习：尝试修改属性取值（如颜色、字号、行高），观察效果变化，加深对属性作用的理解；
排查错误：若样式不生效，优先检查选择器是否精准、属性名是否拼写错误、取值是否规范（如漏写单位、#）。

模块5：易错点复盘+重点总结（0.5小时）

5.1 高频易错点（必看，避免踩坑）

属性拼写错误：如把text-indent写成text-indext、line-height写成line-heigh，导致样式失效（牢记属性名，多手写）；
漏写单位：font-size、line-height（px单位）漏写px，如font-size:16，样式无效；

颜色取值错误：十六进制颜色漏写#，RGB取值超出0-255范围，如rgb(300,0,0)；
字体设置错误：中文字体未加英文引号，如font-family: Microsoft Yahei（无效），正确是"Microsoft Yahei"；

垂直居中误区：用line-height给多行文本实现垂直居中（无效），line-height仅适用于单行文本；

排版不规范：给普通段落设置center对齐、给标题设置首行缩进，不符合阅读习惯；

样式污染：未精准使用选择器，导致全局文本样式被污染（如用元素选择器p设置所有段落，无法区分不同类型段落）；
动画无效：未添加transition属性，导致鼠标悬浮时样式切换生硬，无平滑过渡效果。

5.2 重点知识总结（必背，核心考点）

（1）文字样式（6个高频属性，记准"属性名+作用+常用取值"）

color：文字颜色，首选十六进制（#333、#ff4444）；
font-size：文字大小，首选px单位（14px、16px、28px），区分文本层级；
font-weight：文字粗细，常用400（normal）、700（bold），数字优先；
font-family：文字字体，规范写法（多字体备用+兜底sans-serif）；
font-style：文字样式，常用normal、italic（斜体），不滥用；

text-decoration：装饰线，常用none（去下划线）、underline（下划线）、line-through（删除线）。

（2）段落样式（4个核心属性，重点掌握3个高频）

text-align：水平对齐，left（默认）、center（标题）、justify（长文本）；

line-height：行高+单行垂直居中，首选无单位数字（1.5），line-height=高度实现垂直居中；

text-indent：首行缩进，中文首选2em，适配字号；

letter-spacing：字间距，辅助调整，普通段落不设置。

（3）核心技巧（开发高频，必掌握）

单行文字垂直居中：容器height=line-height；

中文排版规范：普通段落首行缩进2em、左对齐、1.5倍行高；

链接样式规范：默认无下划线，hover显示下划线、变色；

样式精准应用：结合类、ID、伪类选择器，避免全局污染。

（4）衔接前序知识

文本样式必须结合选择器（类、ID、并集、后代、伪类）使用，遇到样式冲突时，遵循前2天所学的优先级规则（!important>内联>ID>类/伪类>元素>通配符），确保目标样式生效。

模块6：课后作业（巩固练习，必做）

作业要求：独立完成，手写代码，提交HTML+CSS文件，确保所有样式生效，重点练习核心技巧和属性应用，排查易错点。

基础作业：复制综合案例代码，逐行手写，修改所有文本的颜色、字号、行高，验证动画效果，确保每个属性都能灵活调整；
提升作业：新增3个文本模块（引用文本、标题文本、小提示文本），结合当天知识点设置样式，添加hover动画；
拓展作业：尝试用RGBA颜色设置半透明文本，用不同的line-height值测试行高效果，总结不同场景下行高的合理取值。

模块7：衔接次日内容

今日重点：掌握文本样式的设置和排版，解决"选中元素后如何美化文本"的问题；

次日内容：CSS盒模型（边框、内边距、外边距），核心解决"如何控制元素的大小和位置"，是页面布局的基础，需提前预习"盒模型核心概念"，为次日学习铺垫。

前端编程 课程十五、：CSS核心基础3：文字+段落样式

前端编程课程十五、：CSS核心基础3：文字+段落样式