继上期讲解完伪类和伪元素后，许多初学者反馈 CSS 属性繁多记不住，用到时总得查手册，效率低下。其实无需焦虑！本文将聚焦你日常开发中真正高频使用的 CSS 属性，分为字体和文本两大核心类别进行精讲。每个属性都遵循“概念解读 + 可运行代码示例 + 效果说明 + 应用场景 + 常见误区”的讲解节奏，力求清晰易懂，助你快速上手，彻底告别死记硬背。
在开始前，我们需要明确一个核心理念：CSS 属性是为 HTML 元素定义样式的工具，每个属性都对应一系列属性值。最好的学习方法是动手实践，将文中的代码复制到编辑器中，亲自修改属性值并观察变化，理解远胜于硬背。
一、高频 CSS 属性：字体类（控制文字视觉样式）
字体类属性是 CSS 中最基础、最常用的部分，无论是设置网页标题、正文还是按钮文字，都离不开它们。它们共同决定了文字的“相貌”，包括字体、大小、粗细、倾斜度和行间距。让我们逐一拆解。
1、font-family：指定字体族
通俗解释：font-family 用于设定元素的字体，例如微软雅黑、宋体、Arial 等。其关键技巧在于设置字体栈（用逗号分隔多个字体名称），以实现降级兼容。因为不同用户设备的系统字体不同，当首选字体不可用时，浏览器会自动使用列表中的下一个字体，确保文本始终正常显示。
常用字体推荐：
- 中文：微软雅黑 (
Microsoft YaHei)、黑体 (SimHei)、宋体 (SimSun)
- 英文/通用：
Arial, Helvetica, sans-serif（无衬线字体族，常用作兜底方案）
代码示例：
<!-- HTML结构 -->
<h2 class="title">这是标题（微软雅黑字体）</h2>
<p class="content">这是正文（微软雅黑，若没有则显示黑体，再没有显示无衬线字体）。This is English text (Arial).</p>
/* CSS样式 */
.title {
/* 首选微软雅黑，没有则用黑体，最后用无衬线字体兜底 */
font-family: "Microsoft YaHei", "SimHei", sans-serif;
}
.content {
/* 正文字体栈，与标题保持一致以维持页面视觉统一 */
font-family: "Microsoft YaHei", "SimHei", Arial, sans-serif;
}
效果说明：标题和正文会优先尝试渲染为“微软雅黑”，若该字体缺失则依次降级。英文部分通常会匹配到 Arial。这种机制有效避免了因字体缺失导致的乱码或显示异常。
实战场景：所有包含文本的元素，如标题 (h1-h6)、段落 (p)、链接 (a)、按钮 (button) 等。核心目标是保持页面字体风格的统一性。
常见误区：
- 字体名包含空格时，必须使用引号（单双引号皆可），例如
“Microsoft YaHei”。不含空格的字体名可以不加。
- 务必设置兜底字体族，如
sans-serif 或 serif，这是保证跨设备兼容性的安全网。
- 单个页面的字体种类不宜过多，通常标题与正文各用一种，最多不超过两种，过多会导致页面杂乱。
2、font-size：控制字体大小
通俗解释：font-size 设定文字的尺寸，是区分内容层级（如标题、正文、备注）的关键属性。新手应重点掌握三个单位：px（像素，绝对单位，最常用）、rem（相对于根元素 <html> 字体大小，利于响应式设计）、em（相对于父元素字体大小，需谨慎使用避免嵌套计算混乱）。优先使用 px 和 rem。
常用尺寸参考：
h1 主标题：32px - 48pxh2 栏目标题：24px - 32pxh3 子标题：18px - 24px- 正文
p：14px - 16px（最舒适的阅读尺寸）
- 备注/辅助文字：12px - 13px
代码示例：
<h1 class="h1-title">主标题（36px）</h1>
<h2 class="h2-title">栏目标题（28px）</h2>
<p class="content">正文文本（16px，最常用）</p>
<span class="tips">备注文字（12px，辅助说明）</span>
/* 设置根元素字体大小，方便 rem 单位计算（新手可固定为 16px） */
html {
font-size: 16px; /* 此时 1rem = 16px */
}
.h1-title {
font-size: 36px; /* 固定尺寸，主标题醒目 */
font-family: "Microsoft YaHei", "SimHei", sans-serif;
}
.h2-title {
font-size: 28px; /* 固定尺寸，栏目标题 */
}
.content {
font-size: 16px; /* 正文固定尺寸，阅读舒适 */
line-height: 1.8; /* 搭配行高，下文会讲 */
}
.tips {
font-size: 0.75rem; /* 基于根元素计算：0.75 * 16px = 12px，利于响应式适配 */
color: #999;
}
效果说明：不同层级的文字大小区分明确，视觉层次清晰。使用 rem 单位的备注文字，当根元素 font-size 改变时（例如为适配移动端调整），其大小会自动按比例缩放。
实战场景：所有文本元素。核心原则是层级清晰（标题 > 正文 > 辅助文字），让用户一目了然。
常见误区：
- 避免单位混用造成混乱：新手期建议统一使用
px，待掌握响应式布局后再重点应用 rem。
- 正文尺寸不宜过小或过大：不要小于
14px（阅读费力），也不建议大于 18px（显得笨拙），14px-16px 是最佳区间。
- 必须注明单位：不能写作
font-size: 16;，必须写 font-size: 16px;，否则样式无效。
3、font-weight：控制字体粗细
通俗解释：font-weight 用于定义字体的粗细程度，例如加粗标题或突出关键语句。最需要记住两个值：normal（正常，默认值）和 bold（加粗）。也可以用数值表示，400 等价于 normal，700 等价于 bold。
代码示例：
<h2 class="title">这是加粗的标题（bold）</h2>
<p class="content">这是正常的正文（normal），<span class="highlight">这是加粗的重点内容（bold）</span>，突出显示。</p>
<p class="light-text">这是偏细的文字（300，很少用，了解即可）</p>
.title {
font-family: "Microsoft YaHei", "SimHei", sans-serif;
font-size: 24px;
font-weight: bold; /* 标题加粗，醒目 */
}
.content {
font-size: 16px;
font-weight: normal; /* 正文正常，此声明可省略（默认即为 normal） */
}
.highlight {
font-weight: bold; /* 重点内容加粗，突出显示 */
color: #008cff;
}
.light-text {
font-size: 16px;
font-weight: 300; /* 较细的字重。注意：并非所有字体都支持该数值 */
}
效果说明：通过粗细对比，标题和重点内容得以突出，文本阅读起来富有层次感。数值 300 等细体字重，若当前字体不支持，则会回退到 normal 效果。
实战场景：标题 (h1-h6)、需要强调的文本（如警告信息）、按钮文字等。核心是有选择地加粗，切忌全文加粗导致没有视觉重点。
常见误区：
- 切忌滥用
bold：仅对需要突出的内容使用加粗，否则页面会失去重点。
- 牢记数值对应关系：
400 = normal, 700 = bold。
- 数值字重依赖字体支持：如果设置
100, 300, 500 等数值无效，直接使用 normal 或 bold 即可。
4、font-style：控制字体样式
通俗解释：font-style 控制文字是否倾斜。主要掌握两个值：normal（正常，默认值）和 italic（斜体）。另有一个 oblique（倾斜体），视觉效果与 italic 相似但原理不同，极少使用。斜体常用于引文、英文强调或备注说明。
代码示例：
<p class="quote">“这是一段引用文本，用斜体显示，突出引用的内容。” —— 引用自某文章</p>
<p class="english">This is English text, <span class="italic">italic style</span> (斜体英文强调).</p>
<p class="normal-text">这是正常的文字，不倾斜（默认normal）。</p>
.quote {
font-family: "Microsoft YaHei", "SimHei", sans-serif;
font-size: 16px;
font-style: italic; /* 引用文本使用斜体 */
color: #666;
line-height: 1.8;
margin: 10px 0;
padding-left: 20px;
border-left: 2px solid #ddd; /* 添加左侧边框，增强引用样式 */
}
.italic {
font-style: italic; /* 英文单词使用斜体强调 */
color: #008cff;
}
.normal-text {
font-style: normal; /* 显式声明为正常，此声明可省略 */
}
效果说明：引文通过斜体、灰色和左侧竖线被清晰地区分出来；英文中的特定词汇也通过斜体得到强调，而普通段落保持正常样式。
实战场景：引用内容、需要强调的外文词汇、备注说明等。核心是用斜体进行视觉区分，但不可滥用。
常见误区：
- 避免对中文正文使用斜体：中文斜体在屏幕上阅读非常费力，应使用加粗或改变颜色来强调中文内容。
- 默认值即是
normal：对于不需要倾斜的文本，无需额外声明此属性。
5、line-height：控制行高
通俗解释：line-height 定义行与行之间的垂直间距，即行高，对阅读体验影响巨大。其值可以是无单位数值（如 1.8）、px 或 rem。强烈推荐使用无单位数值，因为它表示行高是当前字体尺寸的倍数，能自适应字体大小变化。例如 font-size: 16px; line-height: 1.8; 计算出的行高为 28.8px。
常用行高参考：
- 正文
p：1.6 - 1.8
- 标题
h1-h6：1.2 - 1.5
- 按钮文字：1.2 左右
- 引用文本：1.8 - 2
代码示例：
<h2 class="title">标题（行高1.3，紧凑）</h2>
<p class="content-good">这是行高1.8的正文文本，行间距适中，阅读起来很舒适，不会挤在一起。这是行高1.8的正文文本，行间距适中，阅读起来很舒适，不会挤在一起。</p>
<p class="content-bad">这是行高1.2的正文文本，行间距太小，挤在一起，阅读费力。这是行高1.2的正文文本，行间距太小，挤在一起，阅读费力。</p>
.title {
font-size: 24px;
font-weight: bold;
line-height: 1.3; /* 标题行高较小，显得紧凑 */
margin-bottom: 10px;
}
.content-good {
font-size: 16px;
line-height: 1.8; /* 正文最佳行高，自适应字体大小 */
color: #333;
margin-bottom: 10px;
}
.content-bad {
font-size: 16px;
line-height: 1.2; /* 行高过小，阅读体验差 */
color: #333;
}
效果说明：对比之下，line-height: 1.8 的正文段落呼吸感强，易于阅读；而 line-height: 1.2 的段落则显得拥挤不堪。
实战场景：所有包含多行文本的元素，尤其是正文段落。核心目标是显著提升文本的可读性。
常见误区：
- 优先使用无单位数值：避免使用固定
px 值，后者在字体大小改变时需要手动调整行高。
- 正文行高范围：不建议小于
1.6（拥挤），也不建议大于 2（松散），1.6-1.8 是黄金区间。
- 行高具有继承性：可在
body 元素上统一设置 line-height，其子元素会继承该值，便于全局管理。
字体类属性小结
字体类五大属性是网页文字样式的基石，总结如下：
font-family：设定字体栈，统一中英文字体并做好降级。font-size：设定大小，建立清晰的内容层级。font-weight：控制粗细，有选择地突出重点。font-style：控制倾斜，用于引文或外文强调。line-height：调整行高，是提升阅读体验的关键。
补充：这些属性可使用 font 复合属性简写，语法顺序为：font: style weight size/line-height family;。但新手期建议分开书写，更清晰且不易出错。
二、高频 CSS 属性：文本类（控制文本布局与装饰）
文本类属性与字体类属性相辅相成，前者控制文字的“样子”，后者则掌控文字的“排版”，如对齐、缩进、装饰等。两者结合，方能实现专业、美观的文本呈现。
1、color：设置文本颜色
通俗解释：color 属性用于定义文本颜色，是最基础的属性之一。主要有三种颜色表示法：十六进制（如 #333，最常用）、RGB/RGBA（如 rgb(0, 140, 255) 或 rgba(0, 0, 0, 0.5) 带透明度）、颜色关键字（如 red，不精确，少用）。
常用颜色参考：
- 正文：
#333（深灰，比纯黑 #000 柔和）
- 标题：
#222 或 #008cff（蓝色系，醒目）
- 辅助文字：
#999（浅灰）
- 警告/重点：
#ff0000（红）或 #ff6600（橙）
- 链接：
#008cff（蓝）
代码示例：
<h2 class="title">标题颜色（#008cff，蓝色）</h2>
<p class="content">正文颜色（#333，深灰色），阅读舒适。</p>
<span class="tips">辅助文字（#999，浅灰色）</span>
<span class="warning">警告提示（#ff6600，橙色）</span>
<a href="#" class="link">链接文字（#008cff，蓝色）</a>
<p class="transparent">透明文字（rgba(0,0,0,0.5)，半透明）</p>
.title {
color: #008cff; /* 十六进制，最常用 */
font-size: 24px;
font-weight: bold;
}
.content {
color: #333; /* 正文首选深灰色 */
font-size: 16px;
line-height: 1.8;
}
.tips {
color: #999; /* 辅助文字浅灰色 */
font-size: 12px;
}
.warning {
color: #ff6600; /* 警告文字橙色 */
font-weight: bold;
}
.link {
color: #008cff; /* 链接蓝色 */
text-decoration: none; /* 清除默认下划线 */
}
.transparent {
color: rgba(0, 0, 0, 0.5); /* RGBA，最后一个参数0.5表示50%透明度 */
font-size: 16px;
}
效果说明：通过颜色清晰区分了不同功能和层级的文本，RGBA 则可用于实现半透明效果，适合水印等场景。
实战场景：所有文本元素。核心是建立合理、协调的配色方案，区分内容主次。
常见误区：
- 正文避免纯黑：使用
#333 等深灰色更为柔和舒适。
- 优先使用十六进制：
RGBA 仅在需要透明度时使用。
- 控制页面颜色数量：主色、辅助色等加起来建议不超过 3 种，以免杂乱。
2、text-align：设置水平对齐方式
通俗解释：text-align 定义文本在其容器内的水平对齐方式。常用值：left（左对齐，默认）、center（居中对齐）、right（右对齐）。另有一个 justify（两端对齐），中文场景下较少使用。
代码示例：
<div class="container">
<h2 class="title-center">标题（居中对齐，center）</h2>
<p class="content-left">正文（左对齐，left，默认值），这是正文文本，左对齐是最常用的对齐方式，符合中文阅读习惯。</p>
<p class="time-right">2026年2月7日（右对齐，right）</p>
<p class="content-justify">两端对齐（justify），该方式会让文本的左右边缘都对齐，看起来更整齐，但中文阅读体验有时不如左对齐。</p>
</div>
.container {
width: 400px; /* 容器需有宽度，对齐效果才明显 */
margin: 0 auto;
}
.title-center {
text-align: center; /* 标题居中 */
color: #008cff;
font-size: 24px;
}
.content-left {
text-align: left; /* 正文左对齐，此声明可省略 */
color: #333;
font-size: 16px;
line-height: 1.8;
}
.time-right {
text-align: right; /* 时间、金额等信息常右对齐 */
color: #999;
font-size: 12px;
margin: 10px 0;
}
.content-justify {
text-align: justify; /* 两端对齐，了解即可 */
color: #333;
font-size: 16px;
line-height: 1.8;
}
效果说明：不同的对齐方式应用于不同场景，符合常见的排版规范和用户预期。
实战场景：标题居中、正文左对齐、时间/金额右对齐等。核心是符合内容语义和阅读习惯。
常见误区：
- 正文优先使用左对齐：符合中文从左至右的阅读习惯。
- 容器需有宽度：对齐是相对于父容器的，若容器宽度为100%，则左对齐和居中对齐视觉上无区别。
- 该属性仅作用于文本和内联元素：要使块级元素（如
div）自身在页面中水平居中，需使用 margin: 0 auto;。
3、text-decoration：设置文本装饰线
通俗解释：text-decoration 用于给文本添加装饰线。关键值：none（无，最常用）、underline（下划线）、line-through（删除线）。还有 overline（上划线），极少使用。
最常用场景：清除链接默认下划线、为重点文字添加下划线、为作废内容添加删除线。
代码示例：
<a href="#" class="link">链接文字（清除下划线，none）</a>
<p class="highlight">重点提示文字（加下划线，underline）</p>
<p class="old-price">原价：<span class="del">199元</span>（删除线，line-through）</p>
<p class="new-price">现价：99元（无装饰线）</p>
<p class="overline">上划线文本（overline，很少用）</p>
.link {
color: #008cff;
text-decoration: none; /* 清除链接默认下划线，最常用！ */
font-size: 16px;
}
.link:hover {
text-decoration: underline; /* 鼠标悬停时显示下划线，提升可交互性 */
}
.highlight {
color: #ff6600;
text-decoration: underline; /* 重点文字加下划线 */
font-size: 16px;
font-weight: bold;
}
.old-price {
color: #999;
font-size: 14px;
}
.del {
text-decoration: line-through; /* 原价加删除线 */
}
.new-price {
color: #ff0000;
font-size: 16px;
font-weight: bold;
}
.overline {
text-decoration: overline; /* 上划线，了解即可 */
font-size: 16px;
}
效果说明：链接默认无下划线，悬停时出现，这是现代网页的常见设计；删除线清晰地标明了价格变动。
实战场景：自定义链接样式、突出显示重点信息、表示已删除或过时的内容。
常见误区：
- 务必清除链接默认下划线：并可通过
:hover 状态重新添加以提供反馈。
- 避免给普通正文加下划线：以免与链接混淆。
- 装饰线颜色：可使用复合写法如
text-decoration: underline red;，但新手分开设置 color 和 text-decoration 更清晰。
4、text-indent：设置首行缩进
通俗解释：text-indent 定义文本块首行的缩进量，是中文排版的常用规范。推荐使用 em 单位，1em 等于当前元素的字体大小，因此 text-indent: 2em; 表示缩进两个字符宽度。
代码示例：
<p class="para1">这是首行缩进2个字符的中文段落（text-indent: 2em;），这是中文排版的规范写法，看起来更整洁、更专业。</p>
<p class="para2">这是没有首行缩进的中文段落，看起来不够规范，不如首行缩进的段落整洁。</p>
.para1 {
color: #333;
font-size: 16px;
line-height: 1.8;
text-indent: 2em; /* 首行缩进2字符 */
margin: 10px 0;
}
.para2 {
color: #333;
font-size: 16px;
line-height: 1.8;
/* 无首行缩进 */
}
效果说明：缩进后的段落更符合传统中文排版习惯，显得规整且易于区分段落起始。
实战场景：中文正文段落 (p)。英文段落和标题通常不需要首行缩进。
常见误区：
- 使用
em 而非 px：em 单位能自适应字体大小变化。
- 仅用于中文段落：标题、列表、英文段落等不需要此属性。
- 只影响首行：该属性仅控制第一行的缩进。
5、text-overflow：处理文本溢出
通俗解释：text-overflow 指定当文本溢出其容器时如何显示。最常用的值是 ellipsis（显示省略号 …）。重要：该属性不能单独生效，必须与以下两个属性配合使用：white-space: nowrap;（禁止换行）和 overflow: hidden;（隐藏溢出内容）。
代码示例：
<div class="box">
<h3 class="title-ellipsis">这是一个很长很长很长很长很长很长很长的标题，超出容器宽度后显示省略号</h3>
<p class="content-ellipsis">这是一段很长很长很长很长很长很长很长很长很长很长的文本，超出容器宽度后显示省略号。</p>
<p class="content-clip">这是一段很长很长很长很长很长很长很长很长很长很长的文本，超出容器宽度后直接截断。</p>
</div>
.box {
width: 300px; /* 容器必须有固定宽度 */
border: 1px solid #ddd;
padding: 10px;
margin: 0 auto;
}
.title-ellipsis {
font-size: 18px;
color: #333;
/* 三者配合，缺一不可 */
white-space: nowrap; /* 1. 不换行 */
overflow: hidden; /* 2. 隐藏溢出 */
text-overflow: ellipsis; /* 3. 溢出显示省略号 */
margin: 10px 0;
}
.content-ellipsis {
font-size: 14px;
color: #666;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 10px 0;
}
.content-clip {
font-size: 14px;
color: #666;
white-space: nowrap;
overflow: hidden;
text-overflow: clip; /* 直接截断，不显示省略号 */
}
效果说明：前两个例子在文本过长时优雅地显示为省略号，既节省空间又提示用户内容未完。最后一个例子则生硬地截断，体验较差。
实战场景：列表项标题、导航菜单项、表格单元格等空间受限且需避免换行的单行文本。
常见误区：
- 必须三项配合：
white-space: nowrap;、overflow: hidden;、text-overflow: ellipsis; 缺一不可。
- 容器需有固定宽度：否则文本不会溢出。
- 仅适用于单行文本：此方法只实现单行省略。多行文本省略需要其他 CSS 技巧，可后续在云栈社区的 CSS 板块深入学习。
6、white-space：控制空白符和换行处理
通俗解释：white-space 控制元素内空白符（空格、换行）的处理方式以及文本是否自动换行。关键值：nowrap（不换行，配合 text-overflow 使用）、normal（合并多余空白，自动换行，默认值）、pre（保留所有空白和换行，类似 <pre> 标签）。
代码示例：
<div class="box">
<p class="nowrap">这是不换行的文本（white-space: nowrap;），配合overflow和text-overflow可实现省略号。</p>
<p class="normal">这是正常换行的文本（white-space: normal;，默认值），当文本超出容器宽度时，会自动换行。</p>
<p class="pre-text">这是保留空格和换行的文本（white-space: pre;），
这里有手动换行，
还有多个空格 （会保留），
适合展示代码等。</p>
</div>
.box {
width: 300px;
border: 1px solid #ddd;
padding: 10px;
margin: 10px auto;
}
.nowrap {
white-space: nowrap; /* 不换行 */
overflow: hidden;
text-overflow: ellipsis;
font-size: 16px;
color: #333;
}
.normal {
white-space: normal; /* 正常换行，默认值 */
font-size: 16px;
color: #333;
line-height: 1.8;
}
.pre-text {
white-space: pre; /* 保留所有空白和换行 */
font-size: 14px;
color: #666;
background-color: #f5f5f5;
padding: 10px;
}
效果说明：nowrap 实现了单行省略效果；normal 是标准的段落行为；pre 严格保留了源码中的格式，适合展示代码片段。
实战场景：nowrap 用于需要省略号的单行文本；normal 适用于绝大多数正文；pre 用于需要保留原始格式的文本展示。
常见误区：
- 勿对正文随意使用
nowrap：会导致文本横向溢出容器，破坏布局。
- 区分
white-space: pre; 与 <pre> 标签：前者是 CSS 属性，可将任何元素变为预格式文本；后者是 HTML 语义化标签。
- 省略号三件套：再次强调，
nowrap 是省略号效果的必要条件之一。
文本类属性小结
文本类属性与字体类属性协同工作，共同构建专业的文本排版：
color：定义颜色，建立视觉层次。text-align：控制水平对齐，符合排版逻辑。text-decoration：添加装饰线，用于链接、重点和删除内容。text-indent：实现中文段落首行缩进。text-overflow & white-space：联手实现单行文本溢出省略号效果，是实战高频技巧。
你可以将这些属性灵活组合，例如一套标准的中文正文样式可以是：{ font-size: 16px; line-height: 1.8; color: #333; text-indent: 2em; }。掌握这些核心属性，你就能应对绝大部分网页文字样式需求。如果想探索更多像 CSS Variables 这样的高级特性，可以持续关注相关技术社区。
发表于 2026-2-11 20:15:13
|
查看: 32|
回复: 0
