主题
CSS 基础（四）
本页对应 CSS 基础，共 7 段视频，约 49 分钟。
学习目标
- 能为元素设置文字颜色，正确使用十六进制颜色（
#开头、6 位/3 位缩写）、rgb()与rgba()格式，并说明透明度的取值与效果。 - 能使用浏览器开发者工具检查页面结构与样式，定位被划掉或带警告的 CSS 声明，并在源代码中修正后刷新验证。
- 能根据新闻详情效果图先复制文字并搭建 HTML 结构，再按从上到下的顺序完成标题、来源、段落、图片等样式设置。
- 能通过给独占一行的父级盒子添加类名并设置
text-align: center，实现图片水平居中，且不影响页面其他div。 - 能独立完成综合案例二的标题、段落和列表样式，设置字号、颜色、行高、首行缩进、加粗及链接颜色，并与效果图对照验证。
知识点
案例目标与制作思路
本节做“新闻详情”综合案例：标题、来源时间、正文段落、正文配图。效果图如下，保留原图并把 alt 改为中文：
为什么需要：综合案例要把前面学的标题、段落、加粗、图片、文字样式串起来，形成完整页面。
怎么想：按转写稿强调的网页制作思路：从上到下，先整体再局部；先搭 HTML 标签，再用 CSS 美化。不要一上来就调样式。
怎么做：先把新闻文字复制进 HTML，判断每块内容用什么标签：大标题用 h1，来源时间用 div，正文段落用 p，图片放在 div 里。
易错点：不要先纠结颜色和字号；结构没搭好就调样式，后面容易返工。来源行不要随手用 p，因为 p 后面要统一首行缩进，来源行并不缩进。
先搭 HTML 结构：先标签，再局部
为什么需要：标签决定页面内容的层级和语义，也决定后面 CSS 选择器怎么写。
怎么想：标题独占一行用 h1；来源和时间是一行说明文字，用 div；每段正文用 p；“央视网消息：”需要加粗，用 strong 包住；图片单独放在一个容器里，方便后面只控制这张图。
怎么做：得到如下 HTML：
html
<h1>在希望的田野上 | 湖北秋收开镰 各地多举措保增产增收</h1>
<div>来源：央视网 | 2222年12月12日 12:12:12</div>
<p><strong>央视网消息：</strong>眼下，湖北省秋收开镰已有一周多的时间。水稻收割已经超过四成，玉米收割七成。湖北省通过大力推广新品种水稻，建设高标准农田等一系列措施，为秋粮稳产提供有力支撑。</p>
<p>中稻占据了湖北全年粮食产量的一半以上。在湖北的主产区荆门市，370万亩中稻已经收割四成以上。</p>
<div class="pic">
<img src="./1.jpg" alt="">
</div>
<p>王化林说的新品种，是湖北省研发的杂交水稻“华夏香丝”，不仅产量高，还具有抗病、抗倒、抗高温的特性。在荆门漳河镇的一工程示范田内，像“华夏香丝”这样抗旱节水的品种还有20多个，这些水稻新品将在荆门全面推广，确保来年增产增收。</p>
<p>此外，湖北还大力推进高标准农田建设。截至今年6月，已建成3980万亩高标准农田。目前，湖北全省仍有1800多万亩中稻正在有序收割中，预计10月中旬收割完毕。</p>易错点：strong 左右要保留合适空格，避免文字挤在一起；图片容器要起类名，不能只写一个裸 div，否则后面很难单独控制图片区域。
再用 CSS 美化：按效果图逐项写
为什么需要：HTML 只给内容，CSS 才让标题居中、字号颜色接近新闻页效果。转写稿提到开发中很少用纯黑，常用 #333 这类较柔和的十六进制颜色；颜色写十六进制时不要漏 #。
怎么想：先看效果图要什么：h1 不要加粗、水平居中、30px、#333；来源行 14px、#999；所有 p 首行缩进 2 个字、18px、#333；图片区域水平居中。
怎么做：保留笔记 CSS：
html
<style>
h1 {
text-align: center;
font-weight: 400;
font-size: 30px;
color: #333;
}
div {
font-size: 14px;
color: #999;
}
p {
text-indent: 2em;
font-size: 18px;
color: #333;
}
/* div {
text-align: center;
} */
.pic {
text-align: center;
}
</style>易错点：font-size 不要写成 font-style；text-indent: 2em 是首行缩进两个字；font-weight: 400 表示不加粗；text-align: center 要写对，别漏分号；单位 px 不要漏。
图片居中与类名隔离
为什么需要：图片本身不能像文字那样直接靠 h1、p 的 text-align 居中；转写稿说，要给图片的“父亲”加水平居中，而且这个父盒子要独占一行。
怎么想：如果用 span 包图片，span 不是独占一行的盒子，效果不可靠；如果直接写 div { text-align: center; }，页面中所有 div 都会居中，连上面的来源行也会被影响。
怎么做：给图片外层 div 起类名 pic，CSS 写 .pic { text-align: center; }。这样只有调用了 pic 类名的这个 div 执行居中。
易错点：类选择器要写点，如 .pic；HTML 中写 class="pic"；不要为了省事直接让所有 div 居中。转写稿中注释掉的 div { text-align: center; } 正是在提醒这个问题。
用调试工具验证与排错
为什么需要：代码一多，靠肉眼找错误很累。调试工具能快速指出哪条 CSS 有问题。
怎么想：打开浏览器按 F12，或右键选择“检查”；左侧看 HTML，右侧看 CSS。若某条样式被划掉、前面有黄色感叹号，就重点检查它。
怎么做：例如发现 font-size: 30 没生效，可在调试工具中看到它被划掉，补上 px 后再回源码修改；也可用上下箭头微调数值，用颜色面板切换十六进制或 RGB 观察效果。
易错点：调试工具只能帮助发现问题，不会真正修改源码；在调试工具里改完，刷新页面会还原。最终仍要回到 HTML/CSS 文件中改，并刷新验证。
先看效果与素材
这一节做“综合案例二：CSS 简介”，目标不是背单词，而是把前面学的标题、段落、列表、链接、加粗、颜色、行高、缩进和调试工具串起来。整体思路是：先把文字复制进来搭好 HTML 结构，再从上往下写 CSS 样式，最后用调试工具检查问题。
颜色：为什么需要、怎么想、怎么做、易错点
为什么需要：页面默认是黑字白底，标题、正文、链接、提示文字要有层次，就必须控制颜色。
怎么想：开发中最常用十六进制；需要半透明时用 RGBA；英文颜色名和 RGB 主要用于认识、测试。
怎么做：十六进制以 # 开头，如 #333、#0069c2；RGB 写成 rgb(255,0,0)；RGBA 多一个透明度，如 rgba(0,0,0,.6)，透明度范围 0 到 1。十六进制可简写，但必须“两两相同”，如 #000000 可写 #000，#ff6700 不能乱简写。
易错点：# 不能漏；font-size 不是 font-style；line-height: 30px 别漏单位；纯黑纯红开发中不一定好看，常用 #333、#444 这类柔和颜色。
调试工具：为什么需要、怎么想、怎么做、易错点
为什么需要：代码一多，靠肉眼找错很慢。调试工具能快速定位哪个选择器、哪条样式出问题。
怎么想：它只帮我们“发现问题”，不会真正修改源码；改完源码还要刷新验证。
怎么做：F12 或右键“检查”打开；左边看 HTML，右边看 CSS。选中元素后，被划掉的样式、前面的黄色叹号都提示有问题。转写稿里 height: 100 少了 px，调试工具划掉并提示，回到源码对应行补上 px 后刷新即可。调宽度、颜色时可在调试面板里点数值按上下箭头微调，满意后把结果复制回代码。
易错点：调试面板里的修改刷新就没了，不能当成最终代码；看到报错要回到源文件改，不要只在面板里“假装修好”。
搭建 HTML 结构：为什么需要、怎么想、怎么做、易错点
为什么需要：结构是样式的“抓手”，结构乱了，CSS 选择器就难写。
怎么想：先看效果图分块：大标题用 h1，来源信息可用带类名的 div，正文段落用 p，列表用 ul>li，重点文字用 strong，链接用 a。
怎么做：笔记中的结构如下，先保留：
html
<h1>CSS（层叠样式表）</h1>
<p>层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 <a href="#">样式表</a> 语言，用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。</p>
<p><strong>CSS 是开放网络的核心语言之一</strong>，由 W3C 规范 实现跨浏览器的标准化。CSS 节省了大量的工作。 样式可以通过定义保存在外部.css 文件中，同时控制多个网页的布局，这意味着开发者不必经历在所有网页上编辑布局的麻烦。CSS 被分为不同等级：CSS1 现已废弃， CSS2.1 是推荐标准， CSS3 分成多个小模块且正在标准化中。</p>
<ul>
<li>CSS 介绍 如果你是 Web 开发的新手，请务必阅读我们的 CSS 基础 文章以学习 CSS 的含义和用法。</li>
<li>CSS 教程 我们的 CSS 学习区 包含了丰富的教程，它们覆盖了全部基础知识，能使你在 CSS 之路上从初出茅庐到游刃有余。</li>
<li>CSS 参考 针对资深 Web 开发者的 <a href="#">详细参考手册</a> ，描述了 CSS 的各个属性与概念。</li>
</ul>易错点：标题不要用多个 div 硬凑；来源信息若用 div，最好加类名，如 class="time"，否则后面容易误伤其他 div。
写 CSS 样式：为什么需要、怎么想、怎么做、易错点
为什么需要：结构只负责内容，样式负责还原效果图。
怎么想：从上往下：标题去粗、居中、改字号颜色；来源改小字灰色；所有段落统一字号、颜色、行高、首行缩进；列表统一字号行高；链接单独改颜色。
怎么做：笔记样式如下：
html
<style>
h1 {
color: #333;
}
p {
text-indent: 2em;
font-size: 14px;
color: #444;
line-height: 30px;
}
a {
color: #0069c2;
}
li {
font-size: 14px;
color: #444;
line-height: 30px;
}
</style>案例中还会补：h1 { font-weight: 400; text-align: center; font-size: 30px; }，来源用 .time { color: #999; font-size: 14px; }，正文 p 常用 font-size: 18px; color: #333; text-indent: 2em;，列表 li 用 font-size: 14px; line-height: 30px; color: #444;。
易错点：text-indent: 2em 是首行缩进两个汉字；text-align: center 是水平居中；strong 一般直接包文字加粗，不必所有加粗都写样式。
图片水平居中：为什么需要、怎么想、怎么做、易错点
为什么需要：图片本身不是独占一行的盒子，直接给 img 加 text-align: center 往往不生效。
怎么想：让“独占一行的父容器”居中，再让里面的图片跟着居中。
怎么做：给图片外套一个 div，起类名如 pic，写 .pic { text-align: center; }。不要直接给所有 div 写居中，否则上面的 .time 也会被影响。
易错点：用 span 包图片通常不行，因为 span 不是独占一行；给所有 div 加居中会“误伤”其他模块，类名的意义就是只让调用的元素生效。
第二个案例与收尾
第二个案例更简单：标题 h1 改 #333，段落 p 设 font-size: 14px; color: #444; line-height: 30px; text-indent: 2em;，列表 li 同样设字号、行高；重点句用 strong 包起来；链接统一改 color: #0069c2。写完后用调试工具检查颜色、字号、行高和加粗是否符合效果图，再刷新确认。记住：先结构，后样式；先大面，后细节；调试工具只负责帮你找问题。
课件图示（PPTX）
代码示例
案例一：新闻详情页（笔记 07）
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>新闻详情</title>
<style>
h1 {
text-align: center;
font-weight: 400;
font-size: 30px;
color: #333;
}
div {
font-size: 14px;
color: #999;
}
p {
text-indent: 2em;
font-size: 18px;
color: #333;
}
.pic {
text-align: center;
}
</style>
</head>
<body>
<h1>在希望的田野上 | 湖北秋收开镰 各地多举措保增产增收</h1>
<div class="time">来源：央视网 | 2222年12月12日 12:12:12</div>
<p><strong>央视网消息：</strong>眼下，湖北省秋收开镰已有一周多的时间。水稻收割已经超过四成，玉米收割七成。湖北省通过大力推广新品种水稻，建设高标准农田等一系列措施，为秋粮稳产提供有力支撑。</p>
<p>中稻占据了湖北全年粮食产量的一半以上。在湖北的主产区荆门市，370万亩中稻已经收割四成多。</p>
<div class="pic">
<img src="./1.jpg" alt="">
</div>
<p>王化林说的新品种，是湖北省研发的杂交水稻“华夏香丝”，不仅产量高，还具有抗病、抗倒、抗高温的特性。在荆门漳河镇的一工程示范田内，像“华夏香丝”这样抗旱节水的品种还有20多个，这些水稻新品将在荆门全面推广，确保来年增产增收。</p>
<p>此外，湖北还大力推进高标准农田建设。截至今年6月，已建成3980万亩高标准农田。目前，湖北全省仍有1800多万亩中稻正在有序收割中，预计10月中旬收割完毕。</p>
</body>
</html>关键行与易错点
h1默认是加粗的，用font-weight: 400取消加粗；text-align: center让标题文字水平居中。div是标签选择器，会命中页面里所有 div（包括.pic），所以写样式时要意识到“它会影响到谁”，必要时给 div 起类名（如.time、.pic）区分开。text-indent: 2em是首行缩进两个字，em是相对当前字号计算的，字号变了缩进也跟着变。- 图片水平居中：
img是行内元素，直接给img加text-align没用，必须给它的父盒子加text-align: center。父盒子必须是独占一行的盒子（div/p 这类），用span包图片是不行的。 div的font-size: 14px; color: #999会把.pic也一起设置，但.pic里只有图片，视觉上没有影响。
案例二：CSS 简介页（笔记 08）
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS 简介</title>
<style>
h1 {
color: #333;
}
p {
text-indent: 2em;
font-size: 14px;
color: #444;
line-height: 30px;
}
a {
color: #0069c2;
}
li {
font-size: 14px;
color: #444;
line-height: 30px;
}
</style>
</head>
<body>
<h1>CSS（层叠样式表）</h1>
<p>层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 <a href="#">样式表</a> 语言，用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。</p>
<p><strong>CSS 是开放网络的核心语言之一</strong>，由 W3C 规范 实现跨浏览器的标准化。CSS 节省了大量的工作。 样式可以通过定义保存在外部.css 文件中，同时控制多个网页的布局，这意味着开发者不必经历在所有网页上编辑布局的麻烦。CSS 被分为不同等级：CSS1 现已废弃， CSS2.1 是推荐标准， CSS3 分成多个小模块且正在标准化中。</p>
<ul>
<li>CSS 介绍 如果你是 Web 开发的新手，请务必阅读我们的 CSS 基础 文章以学习 CSS 的含义和用法。</li>
<li>CSS 教程 我们的 CSS 学习区 包含了丰富的教程，它们覆盖了全部基础知识，能使你在 CSS 之路上从初出茅庐到游刃有余。</li>
<li>CSS 参考 针对资深 Web 开发者的 <a href="#">详细参考手册</a> ，描述了 CSS 的各个属性与概念。</li>
</ul>
</body>
</html>关键行与易错点
line-height: 30px是行高，从上一行文字上沿到下一行文字上沿的距离，段落和列表项都统一给了 30px。- 段落加粗用
<strong>标签包住文字即可，不必专门写 CSS（“一般情况直接包个 strong 就可以了”）。 - 链接颜色由
a { color: #0069c2 }控制；这里没有写text-decoration: none，所以下划线保留，是符合效果图的。 li和p的字号、颜色、行高是分别写的两条规则，因为它们是不同的标签选择器，不能指望p的样式自动作用到li上。- 单词易错：字号是
font-size，不是font-style；行高是line-height；数字后面单位px不能漏。
案例三：颜色表示法演示（转写稿 视频1）
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>颜色表示法</title>
<style>
.hex {
color: #ff0000;
}
.hex-short {
color: #f00;
}
.hex-gray {
color: #333;
}
.hex-blue {
color: #00f;
}
.rgb {
color: rgb(255, 0, 0);
}
.bg {
background-color: #f5f5f5;
}
.rgba-box {
background-color: rgba(0, 0, 0, .6);
color: #fff;
}
.rgba-box2 {
background-color: rgba(0, 0, 0, .2);
color: #fff;
}
</style>
</head>
<body>
<div class="hex">十六进制红色 #ff0000</div>
<div class="hex-short">简写红色 #f00</div>
<div class="hex-gray">灰色 #333</div>
<div class="hex-blue">蓝色 #00f</div>
<div class="rgb">RGB 格式 rgb(255, 0, 0)</div>
<div class="bg">背景色 #f5f5f5</div>
<div class="rgba-box">半透明黑色 rgba(0, 0, 0, .6)</div>
<div class="rgba-box2">更透明 rgba(0, 0, 0, .2)</div>
</body>
</html>关键行与易错点
- 十六进制必须以
#开头，共 6 位：前两位是红、中间两位是绿、后两位是蓝。#000是黑，#fff是白，#f00是纯红，#00f是纯蓝。 - 6 位中两两相同的可以简写成 3 位：
#000000→#000，#ff0000→#f00，#ffffff→#fff。像#f6700这种不是两两相同的，不能简写。 - 只要 6 位数字都一样，就一定是灰色：
#333偏深，#888居中，#fff最白。 rgb(255, 0, 0)与#ff0000等价，三个数字取值范围是 0–255（共 256 个）。rgba()比rgb()多一个参数，是透明度，取值 0–1，0完全透明、1完全不透明；0.6可以省略写成.6，但那个点不能省，写成6就错了。- 实际开发中最常用十六进制，需要半透明盒子时才用
rgba；十六进制不用背，用测量工具取色后复制即可。
常见错误
现象：给
.pic加text-align: center后图片仍不居中。
原因：img是行内元素，自身没有“父容器居中”能力；或父容器不是独占一行。
修法：给包住图片的独占一行容器加类名，再对该类名设置居中；不要直接给img加。现象：新闻详情页“来源/时间”也被居中了。
原因：直接写div { text-align: center; }，命中了页面所有div。
修法：给来源/时间单独起类名，只对目标类名写样式，避免标签选择器扩大作用域。现象：图片居中用
span包起来无效。
原因：span不是独占一行的盒子，不能承担该居中场景。
修法：改用独占一行容器并加独立类名；后续学显示模式后再理解本质。现象：十六进制颜色不生效或颜色异常。
原因：漏写#；或简写时没有满足“两两相同”条件。
修法：十六进制必须以#开头；简写前检查每组两位是否相同，不相同就写完整 6 位。现象：
RGBA半透明效果不对。
原因：透明度写成60、50等；或把0.6误写成6。
修法：透明度范围用0到1；可省略前导0，如.6，但不能写成6。现象：段落首行缩进距离不对。
原因：把text-indent: 2em写成2px或漏单位。
修法：按效果图要求写2em，并检查是否被其他选择器覆盖。现象：调试工具里改好后刷新又恢复。
原因：DevTools 只用于检查和临时调试，不会改源码。
修法：在工具中定位问题和试调数值，确认后回到 HTML/CSS 源码中修改并刷新验证。现象：文字大小不生效。
原因：把font-size误写成font-style或fount-size。
修法：检查属性拼写和单位；用调试工具看该声明是否被划掉。
练习
- 按效果图完成“新闻详情”页：先搭 HTML 结构，再依次处理标题、来源时间、段落、图片居中；要求来源时间不被图片居中样式影响。
- 完成“CSS 简介”页：处理标题、段落首行缩进、行高、列表、链接颜色，并保留链接下划线。
- 用 DevTools 定位一个故意写错的样式（如漏
px、漏#、属性拼错），记录“现象—原因—源码修法”，刷新验证。 - 将同一颜色的英文单词、十六进制、RGB、RGBA 各写一遍，并说明哪个适合普通文字、哪个适合半透明遮罩。
- 给新闻详情页中的图片居中写两种方案并对比：直接给
img加样式 vs 给带类名的独占一行父容器加样式，说明哪种可维护。
原视频对照
| # | 视频 | 时长 |
|---|---|---|
| 1 | 颜色 | 15:09 |
| 2 | 调试工具 | 07:47 |
| 3 | 综合案例-html结构 | 04:18 |
| 4 | 综合案例-样式上 | 05:15 |
| 5 | 综合案例-样式下 | 04:44 |
| 6 | 综合案例2 | 06:13 |
| 7 | 作业布置 | 06:22 |
小结
- 综合案例按“先整体结构、再局部样式；先标签、再美化”的顺序推进。
- 样式选择器要控制作用域，能起类名就不要用标签选择器大面积命中。
- 图片居中优先检查父容器是否独占一行，并给父容器独立类名。
- 颜色开发中优先使用十六进制，务必保留
#；半透明场景再考虑RGBA。 - 调试工具用于发现问题、试调数值，最终必须回到源码修改。
- 案例实现先完成大面样式，再做细节微调，不要一开始陷入局部。
- 同类元素要建立可区分命名习惯，避免样式互相污染。
- 练习时以效果图标注为依据，逐项核对字号、颜色、缩进、行高和对齐。