第18课美化网页方法多课件2025-2026学年人教版初中信息科技七年级全一册
2026-05-13
|
33页
|
25人阅读
|
0人下载
普通
资源信息
| 学段 | 初中 |
|---|---|
| 学科 | 信息科技 |
| 教材版本 | 初中信息科技人教版七年级全一册 |
| 年级 | 七年级 |
| 章节 | 第18课 美化网页方法多 |
| 类型 | 课件 |
| 知识点 | - |
| 使用场景 | 同步教学-新授课 |
| 学年 | 2025-2026 |
| 地区（省份） | 全国 |
| 地区（市） | - |
| 地区（区县） | - |
| 文件格式 | PPTX |
| 文件大小 | 4.35 MB |
| 发布时间 | 2026-05-13 |
| 更新时间 | 2026-05-13 |
| 作者 | xkw_087412037 |
| 品牌系列 | - |
| 审核时间 | 2026-05-13 |
| 下载链接 | https://m.zxxk.com/soft/57848570.html |
| 价格 | 1.00储值（1储值=1元） |
| 来源 | 学科网 |
内容正文：
第18课 美化网页方法多
让我们的网页穿上漂亮的“外衣”
人教版初中信息科技 · 七年级全一册
1.7.2013
同学们好！欢迎来到今天的信息科技课。在前面的课程中，我们已经学会了如何搭建一个简单的网页。但大家有没有觉得，那个只有文字和图片的页面看起来有点单调呢？今天，我们就来学习第18课——美化网页方法多，一起为我们的网页穿上漂亮的“外衣”，让它变得更加生动和吸引人！
‹#›
温故知新——我们的网页“毛坯房”
现状：仅有骨架的HTML页面
知识点回顾：HTML = 房子的“骨架”
我们已掌握<html>, <body>, <p>等标签来搭建网页基础结构。它能让浏览器正确解析内容，但看起来非常朴素。这就像刚建好的“毛坯房”，虽然功能完备、遮风挡雨，但光秃秃的缺乏美感，不够吸引人。
课堂思考 🤔
1. 看到这样简陋的网页，你有什么感觉？
2. 如果让你来“装修”它，你最想改变哪些地方？（提示：颜色、字体、图片位置等）
避坑指南 📝
易错点：认为“只要有内容就足够”，忽视网页美观。
提示：美观且易用的网页，才能留住更多访问者。“装修”非常重要！
1.7.2013
在开始新内容之前，我们先来回顾一下。大家还记得我们之前学的HTML吗？我们用它搭建了网页的基本结构，就像盖好了一座房子的框架。大家看左边的图，这就是我们之前做的网页，是不是很像一个毛坯房？虽然能住人，但光秃秃的，不够美观。那么，今天我们就要学习如何给这个“毛坯房”进行装修。
‹#›
学习目标 — 今天我们要学的“网页装修技巧”
01 基础装修 · HTML
📝 核心任务：
掌握HTML自带的格式化标签（h1-h6标题、b加粗、i斜体、u下划线等），为网页内容打好基础。
💡 简单类比：就像给毛坯房修补墙面，先把文字的基本格式理顺。
02 进阶升级 · CSS
✨ 核心价值：
CSS是网页的“专业美容师”！它能帮我们自由控制网页的字体样式、色彩搭配、背景图案以及整体布局。
🎯 学习目标：让我们的网页从“能用”变成“专业又美观”。
03 实战 & 思考
把网页比作“毛坯房”：
• 刷油漆 → 改颜色 • 铺地板 → 换背景 • 摆家具 → 定布局
⚡️ 今日实战：用CSS美化文本、背景和边框。
🤔 猜一猜：HTML和CSS谁更强大？
💡 提示：循序渐进，先基础后进阶！
1.7.2013
那么，今天我们要学习哪些“装修技巧”呢？我们的学习地图主要分为三步。首先是“基础装修”，学习用一些简单的HTML标签来美化文字。然后，我们会认识一位新朋友——CSS，它是进行“专业装修”的利器。最后，我们会通过实战，学习如何用CSS来美化文本、背景和边框。大家可以先猜一猜，哪种方法更强大呢？
‹#›
课程导入 —— 从“毛坯房”到“精装房”
💡 核心概念：什么是网页美化？
定义：对网页的文字、图片、布局等视觉元素进行设计调整，提升体验与美感。
价值：清晰传达信息，吸引访问者，提升停留时间。
类比：就像“大厨烹饪”，用同样的食材（内容），通过精心摆盘（设计）变得诱人。
🤔 课堂互动：找不同
• 对比左右两个页面，你更喜欢哪一个？为什么？
• 试着观察并列举：右侧页面在字体、颜色、背景、对齐方式等方面做了哪些优化？
⚠️ 避坑指南
易错点：认为美化就是“五颜六色”。
正确思路：服务内容、有效传达信息是核心，切忌盲目炫技。
1.7.2013
大家看这张对比图，左边是我们之前的“毛坯房”网页，右边是经过美化后的“精装房”网页。是不是差别很大？这就是网页美化的魅力。它就像大厨烹饪美食，同样的食材，经过精心摆盘，就会变得非常诱人。我们今天的任务，就是学会如何成为一名优秀的“网页大厨”。
‹#›
HTML基础美化标签 —— 标题标签
📝 核心知识点
定义：提供<h1>到<h6>六个标签，对应从大到小、从最重要到最次要的标题层级。
价值：不仅是改变样式，更赋予“标题”语义，帮助浏览器和搜索引擎理解网页结构。
类比：就像一本书的目录，<h1>是书名，<h2>是章节，<h3>是小节，层次分明。
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3>
<h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6>
🤔 课堂互动
制作“我的校园”网页：
“我的校园”应该用什么标签？
“校园风光”、“我的班级”用什么标签？
⚠️ 避坑指南
不要为了调整文字大小而随意使用<h1>。
一个页面通常只保留一个<h1>作为主标题，且层级不要跳级。
1.7.2013
好，我们首先来学习第一种基础装修技巧：使用HTML的标题标签。HTML提供了从<h1>到<h6>六个标签，就像我们看书时的章节目录一样，<h1>是最大的标题，<h6>是最小的。它们不仅能改变文字大小，更重要的是告诉浏览器和搜索引擎这是标题。大家要记住，要按照内容的层级来使用它们，不能乱用哦。
‹#›
HTML基础美化标签——<b> 标签
💡 核心知识点
•定义：<b> 标签专门用来定义粗体文本 (Bold Text)。
•生活类比：就像看书时用荧光笔涂亮重点一样，它是网页内容的“荧光笔”。
<p>今天的天气非常 <b>晴朗</b>，适合外出游玩。</p>
👉 效果：页面上的“晴朗”二字会被加粗突出显示。
✍️ 课堂互动
试着写一句话，并用 <b> 标签，把你认为最重要的词加粗！
⚠️ 避坑指南
切勿过度使用！如果满屏都是粗体，重点反而不突出了。
1.7.2013
接下来是`<b>`标签，它的作用很简单，就是让文字变粗。这就像我们读书时用荧光笔划出重点一样，在网页里，`<b>`标签就是我们的“荧光笔”，可以用来强调重要的内容。但大家要注意，不能用得太多，否则就没有重点了。
‹#›
HTML基础美化标签 —— <i> 标签
📝 核心定义与价值
定义：用于定义斜体文本 (Italic text)，改变外观以区分内容。
场景：常用于引用名言、标注技术术语、外文单词或分类学名称。
<p>爱因斯坦曾说：<i>“想象力比知识更重要。”</i></p>
<p>这个功能需要用到<i>JavaScript</i>语言。</p>
🤔 课堂小互动
除了刚才的例子，你还能想到哪些场景适合用斜体？
(如：电影名、书名、科学术语...)
⚠️ 易错点辨析
<b> 加粗：侧重“强调重要性”
<i> 斜体：侧重“视觉区分/语调”
两者语义不同，不要混用哦！
1.7.2013
与<b>标签类似，<i>标签也是我们在HTML中常用的文本格式化标签。但它的作用和语义与粗体是完全不同的。
<i>标签主要是为了“区分”文本，而不是为了“强调”。它就像我们手写时，把引用的句子或者一个外来词、一个专业术语特意写成手写体一样，是为了让读者一眼看出这部分内容的性质。
在代码案例中，我们可以看到，无论是引用爱因斯坦的名言，还是提到“JavaScript”这个技术名词，使用斜体都能很好地与上下文进行区分。
大家一定要注意，不要把它和<b>搞混了。比如，如果你想强调“这个按钮非常重要”，用<b>；但如果你是想写“请看《哈利波特》这本书”，书名就应该用<i>。
现在大家思考一下，还有什么场景适合使用斜体？比如电影名字、飞机航班号或者是拉丁语学名。
‹#›
HTML基础美化标签——<u>标签
💡 核心知识点
定义：用于为文本添加下划线 (Underline)，突出重点或标示专有名词。
类比：就像老师在作业中，在需要订正的词语下方画的红线一样。
<p>请同学们重点阅读 <u>第三段</u> 的内容。</p>
效果：第三段文字下方会出现一条下划线
🤔 课堂小互动
现代网页中，下划线通常代表什么？提示：点击后跳转。
⚠️ 易错点提示
不要滥用！用户容易把它误认成超链接，造成交互误解。
1.7.2013
最后一个基础标签是<u>，它的作用是给文字加上下划线。大家可以把它想象成老师批改作业时，在需要订正的地方画的那条线。不过要特别注意，在现代网页里，下划线通常代表超链接，所以我们使用<u>标签时要非常小心，以免让用户产生误解。
‹#›
综合练习（一）：美化“大熊猫”介绍
任务描述
请使用我们刚刚学过的 HTML 标签（h1-h6, b, i, u），为右侧的文字添加适当的格式，使其结构更清晰，重点更突出。
🎯 练习要求：
1. 将“大熊猫”作为页面主标题。
2. 将“外形特征”、“食性”、“生活习性”作为二级标题。
3. 在“外形特征”段落中，将“黑白相间”加粗。
4. 在“食性”段落中，将“99%的食物都是竹子”用斜体标出。
5. 在“生活习性”段落中，将“中国四川、陕西和甘肃的山区”加上下划线。
原始文本素材
大熊猫
大熊猫属于食肉目、熊科、大熊猫亚科和大熊猫属唯一的哺乳动物。
外形特征
大熊猫体型肥硕似熊、丰腴富态，头圆尾短，头躯长1.2-1.8米，尾长10-12厘米。体重80-120千克，最重可达180千克，体色为黑白两色，脸颊圆，有很大的黑眼圈，标志性的内八字的行走方式，也有解剖刀般锋利的爪子。
食性
大熊猫的食性是其最为奇特和有趣的习性之一，因为它几乎完全靠吃竹子为生。在野外自然采食的50多种植物中，竹类就占一半以上，而且占全年食物量的99%。
生活习性
大熊猫生活在海拔2600-3500米的茂密竹林里... 主要栖息地是中国四川、陕西和甘肃的山区。
1.7.2013
好了，学完了四个基础标签，我们来动手练习一下。这里有一段关于大熊猫的介绍文字，请大家使用`h1-h6`, `b`, `i`, `u`这些标签，按照右边的要求来美化它。这不仅能巩固我们学过的知识，还能让大家体会到美化带来的效果。
‹#›
综合练习（二）：参考代码
代码案例
<h1>大熊猫</h1>
<p>大熊猫属于食肉目...哺乳动物。</p>
<h2>外形特征</h2>
<p>体色为<b>黑白两色</b>...锋利的爪子。</p>
<h2>食性与习性</h2>
<p>占全年食物量的<i>99%</i>。主要栖息地是<u>四川、陕西、甘肃</u>的山区。</p>
效果预览
🐼 大熊猫
属于食肉目、熊科，是中国特有的珍稀哺乳动物。
📏 外形特征
体型肥硕，体色为黑白两色，有标志性的黑眼圈和内八字行走方式。
🍃 生活习性
食物的99%为竹子。栖息地主要在四川、陕西和甘肃的山区。
思考与互动
❓ 对比检查
大家对比一下自己的代码和参考代码，看看标签的使用上有什么不同？
💡 感受差异
加上标签后，排版是不是比纯文本清晰多了？关键信息也更容易被找到！
1.7.2013
大家都完成了吗？我们来看一下参考代码。通过使用标题标签，我们把文章分成了清晰的几个部分。通过加粗、斜体和下划线，我们突出了关键信息。是不是感觉内容一下子就变得有结构、有重点了？这就是基础美化的力量。
‹#›
综合练习（三）：易错点提醒
标签的正确嵌套
在使用多个标签时，一定要注意嵌套顺序。正确逻辑应遵循“先进后出”原则。
✅ 正确示范：
<p>这是一个<b>重要</b>的段落。</p>
说明：内部标签需在父标签内闭合。
❌ 错误示范：
<p>这是一个<b>重要的段落。</p></b>
说明：标签交叉导致解析错误。
标签的闭合
除了少数自闭合标签 (如 <img/>)，大多数标签必须成对出现，缺一不可。
✅ 正确示范：
<h1>一级标题</h1>
说明：开始与结束标签一一对应。
❌ 错误示范：
<h1>一级标题 (无结束标签)
说明：可能导致后续页面样式混乱。
教学互动
请快速检查一下
你刚才写的代码，
有没有出现这两种
“小马虎”的错误？
自查并修改错误
1.7.2013
在练习中，老师发现有些同学可能会犯一些小错误。这里特别提醒大家两点：第一，标签要正确嵌套，就像穿衣服一样，先穿的后脱。第二，标签要记得闭合，有开始就要有结束。大家快检查一下自己的代码，看看有没有这些问题。
‹#›
基础美化小结
我们学会了什么？
📌 标题标签 (h1-h6)：定义不同级别的标题，清晰构建文档的层级结构。
🔍 粗体标签 (<b>)：用于突出文章中的关键、重要信息，吸引阅读注意力。
✏️ 斜体标签 (<i>)：适合标示专业术语、引用内容或表达特殊语气。
🖋️ 下划线标签 (<u>)：标示特殊文本，需谨慎使用，避免与超链接混淆。
这些标签的局限性
⚠️ 1. 功能天花板低
只能做基础的格式化。想要渐变颜色、阴影、动态效果？抱歉，做不到。
🔄 2. 维护噩梦
样式和内容混杂在一起。若要修改全站所有标题的颜色，需要逐个页面修改，费时费力。
解锁新技能！
为了解决上面的问题，让网站变得更美观、更好维护，我们需要一位新朋友来帮忙——
CSS
Cascading Style Sheets
层叠样式表 · 网页美容师
1.7.2013
好了，我们来总结一下刚才学的内容。我们学会了用标题、粗体、斜体和下划线标签来美化网页。但是，大家有没有发现，这些方法功能比较有限，而且修改起来很麻烦。如果我想把所有`<b>`标签的颜色都改成红色，是不是要一个一个改？太麻烦了！为了解决这个问题，我们需要一个更强大的工具，它就是CSS。
‹#›
认识新朋友 —— 什么是 CSS？
📖 核心定义
CSS 是CascadingStyleSheets (层叠样式表) 的缩写。它是一种专门用来描述网页外观与视觉样式的标记语言。
✨ 核心价值
精确控制字体、颜色、间距、背景等所有视觉效果，实现了“内容(HTML)”与“表现(CSS)”的完美分离。
🏠 生活化类比
如果说 HTML 是房子的钢筋水泥和砖瓦（结构），那么 CSS 就是房子的装修风格、家具样式和色彩搭配（表现）。
🤔 课堂小思考
“内容与表现分离”有什么好处？
(提示：统一修改、代码清晰、团队分工明确)
⚠️ 易错提示：CSS不是标签，它通过“选择器”精准定位 HTML 元素，再通过独立的规则系统来定义样式。
1.7.2013
那么，CSS到底是什么呢？它的全称是“层叠样式表”，是一种专门用来美化网页的语言。它最大的特点就是实现了“内容”和“表现”的分离。HTML负责放内容，CSS负责控制内容长什么样。就像盖房子，HTML是砖瓦，CSS就是装修风格。这样做的好处是，我们可以统一修改整个网站的样式，非常方便。
‹#›
CSS如何工作？——内容与表现分离
01 / 核心定义
将样式规则单独提取出来，通过选择器精准作用于HTML元素，实现样式与内容的解耦。
02 / 核心价值
极大提升灵活性与可维护性。只需修改一份CSS文件，网站所有页面的样式即可同步更新。
03 / 生活类比
像学校统一更换校服：学校(CSS)发新款，所有学生(HTML元素)统一换新，无需个人操心。
📄 HTML (内容)
<p class="highlight">这段文字要特殊样式</p>
<p>这段是普通样式</p>
🎨 CSS (样式规则)
.highlight {
color: rgb(200, 16, 46);
font-size: 16px;
}
🤔 课堂思考
若网站有100个页面标题，想统一换个颜色，用CSS和直接改HTML哪个更方便？
⚠️ 避坑指南
不要在HTML里用<font>标签写样式了！这是过时技术，CSS才是规范的正确选择。
1.7.2013
CSS是如何工作的呢？它的核心思想就是“内容与表现分离”。我们把所有的样式规则都写在一个单独的CSS文件里。就像学校统一发校服一样，学校（CSS）规定了样式，所有学生（HTML元素）都自动应用这个样式。这样一来，修改起来就非常方便了。比如要改标题颜色，只需要改CSS文件里的一条规则，所有页面的标题就都变了。
‹#›
CSS的三种引入方式
01. 行内样式 (Inline)
定义：直接在 HTML 标签中使用 style 属性来定义样式，仅对当前标签生效。
<p style="color: red;">
红色文字</p>
💡 类比：给某位同学单独定制的“个性衣服”
02. 内部样式表 (Internal)
定义：在 HTML 文档的 <head> 标签中使用 <style> 标签定义，作用于当前整个页面。
<head> <style>
p { color: blue; }
</style> </head>
💡 类比：为一个班级设计的“班服”
03. 外部样式表 (External)
定义：将所有 CSS 规则写在独立的 .css 文件中，通过 <link> 标签引入，可作用于整个网站。
<link rel="stylesheet" href="style.css">
💡 类比：为全校学生设计的“统一校服”
🤔 课堂思考：今天的课程我们主要会使用哪种方式？
（引导：内部样式表。因为它能作用于整个页面，同时代码写在同一个文件里，方便学习和演示。）
⚠️ 易错点提示
避免在同一个元素上混用多种方式，容易造成样式冲突且难以调试。初学者建议先熟练掌握内部样式表。
1.7.2013
CSS有三种引入方式。第一种是行内样式，直接写在标签里，适合快速测试。第二种是内部样式表，写在<head>里，适合单个页面。第三种是外部样式表，写在单独的.css文件里，这是最推荐的方式，适合整个网站。我们今天的课程主要使用内部样式表，因为它既方便又能体现CSS的核心思想。
‹#›
CSS语法详解（一）：规则的构成
p{color:red;font-size:16px; }
CSS 规则由选择器与声明块两部分组成
选择器 (Selector)
p
告诉浏览器，这条样式规则要应用到哪个 HTML 元素上。
声明块 (Declaration Block)
{ ... }
由一对大括号包裹，内部包含一条或多条具体的样式声明。
声明 (Declaration)
color: red;
由“属性”和“值”共同组成，描述具体的样式设置。
属性 (Property)
color, font-size
你想要修改的样式的“名字”，如颜色、字体大小等。
值 (Value)
red, 16px
属性的具体“设置”，决定了样式最终的表现形式。
分隔符
: 分隔属性和值 ; 结束声明
标点符号虽然不起眼，但语法的正确性全靠它们！
1.7.2013
要学习CSS，首先要理解它的语法。一个CSS规则很简单，主要由两部分组成：选择器和声明块。选择器就像是点名，告诉浏览器要给谁设置样式。声明块就是具体的样式要求，里面包含了属性和值。比如`color: red;`，`color`是属性，`red`是值。大家要记住这些基本组成部分。
‹#›
CSS语法详解（二）：选择器初体验
选择器是 CSS 的核心，它决定了样式规则作用的对象。让我们通过几个简单的例子，快速上手三种最常用的选择器：
元素选择器
📝 语法：直接使用 HTML 元素的名称 (如 p, div, h1)。
🎯 作用：选中页面上所有该类型的元素，是最基础的选择方式。
💡 示例：
/* 选中所有段落，文字变蓝 */
p {
color: blue;
}
ID 选择器
📝 语法：以 # 开头，后面紧跟 ID 名称。
🎯 作用：选中页面上具有特定 ID 的唯一元素。ID 在页面中必须唯一。
💡 示例：
/* 选中ID为 'special' 的元素 */
#special {
font-weight: bold;
}
类选择器
📝 语法：以 . 开头，后面紧跟类名。
🎯 作用：选中页面上所有具有该类名的元素。可复用性最高，最常用。
💡 示例：
/* 选中所有class为 'box' 的元素 */
.box {
background: yellow;
}
1.7.2013
我们重点来看一下选择器。选择器有很多种，我们先学三种最常用的。第一种是元素选择器，比如`p`，它会选中页面上所有的段落。第二种是ID选择器，用`#`号，它用来选中一个独一无二的元素。第三种是类选择器，用`.`号，它可以选中多个元素，非常灵活。
‹#›
CSS语法详解（三）：小练习
1. 将所有 `<h1>` 标题的颜色设置为红色。
___ {color: ___; }
✅ 答案：选择器 `h1` ，值 `red`
2. 将ID为 `main-title` 的元素字体大小设为 36px。
___main-title {font-size: ___; }
✅ 答案：ID选择器前缀 `#` ，值 `36px`
3. 将所有class为 `warning` 的元素背景色设为黄色。
___warning {background-color: ___; }
✅ 答案：类选择器前缀 `.` ，值 `yellow`
4. 将所有 `<p>` 元素的文本居中对齐。
p { ___: ___; }
✅ 答案：属性 `text-align` ，值 `center`
1.7.2013
理论讲完了，我们来做个小练习，巩固一下CSS的语法。这里有四个小题目，请大家填上正确的代码。这能帮助大家更好地理解选择器、属性和值是如何配合工作的。
‹#›
使用CSS美化文本 — 设置文本颜色 (color)
�� 核心知识点
定义：`color` 属性专门用于定义网页中文本的颜色，是CSS最基础的样式之一。
价值：区分信息层级、突出重点、营造氛围，就像用不同颜色的笔做笔记一样直观。
p{ color:blue; }/* 直接使用颜色英文单词 */
h1{ color:#FF0000; }/* 更精确的十六进制色值写法 */
🤔 课堂小互动
• 除了red和blue，你还知道哪些颜色单词？
• 猜猜 #00FF00 是什么颜色？
⚠️ 易错点提示
• 注意拼写：是color不是 colour。
• 十六进制色值必须以#开头。
1.7.2013
现在我们正式进入CSS实战环节！首先学习如何设置文本颜色。使用`color`属性就可以了。我们可以直接写颜色的英文单词，比如`red`、`blue`，也可以用更精确的十六进制值，比如`#FF0000`代表红色。这就像我们用不同颜色的笔写笔记一样，可以让内容更有层次感。
‹#›
使用CSS美化文本 —— 设置字体大小 (font-size)
📖 核心概念
💡 定义：`font-size` 属性用于精确控制网页中文本的尺寸大小。
✨ 价值：区分层级（标题/正文），提升阅读体验。
🍿 生活化类比：就像调节电视/手机音量一样，按需调整文字“视觉音量”。
💻 代码示例
body{ font-size: 16px; /* 正文基础字号 */ }
h1{ font-size: 36px; /* 标题醒目字号 */ }
➡️ 效果：页面正文清晰易读，标题放大突出。
❓ 课堂小问答
1. 代码中的 `px` 是什么单位？
👉像素 (Pixel)：屏幕上最小的显示单位。
2. 除了 `px`，还有哪些单位？
👉em, rem, %(后续进阶课程再详细介绍)。
⚠️ 易错点提示
错误写法：font-size: 20;(缺少单位，浏览器无法识别！)
正确写法：font-size: 20px;(一定要加上单位 px)
💡 小贴士：CSS中长度值通常都需要单位，别偷懒哦！
1.7.2013
接下来是设置字体大小，使用`font-size`属性。我们最常用的单位是`px`，也就是像素。比如`font-size: 36px;`就表示字体大小为36像素。大家一定要记住，写数值的时候千万不要忘记写单位`px`，否则浏览器是不认识的。
‹#›
使用CSS美化文本 — 设置字体类型 (font-family)
📝 核心知识点
定义：`font-family` 属性用于定义网页文本的字体样式（字型）。
类比：就像写字时，选择用钢笔、毛笔还是圆珠笔，不同工具写出的字气质各异。
body {/* 字体栈：浏览器依次尝试匹配，兼容所有设备 */
font-family: "Microsoft YaHei", Arial, sans-serif;
}
💡 课堂互动
你知道电脑里有哪些中文字体吗？
（如：宋体、黑体、微软雅黑...）
⚠️ 避坑指南
不要只用生僻的特殊字体！
要以通用字体族（如 sans-serif）结尾兜底。
1.7.2013
我们还可以用CSS来改变字体，就像我们写字可以选择不同的笔一样。使用font-family属性就可以。为了保证网页在不同电脑上都能显示正确的字体，我们通常会设置一个字体列表，浏览器会依次尝试，如果第一个字体找不到，就用第二个，以此类推。
‹#›
使用CSS美化文本——文本对齐 (text-align)
核心知识点
💡 定义：
用于设置文本内容在其容器中的水平对齐方式。它控制的是文本块整体，而非单个字符。
⚙️ 常用属性值：
•left：左对齐 (大多数浏览器默认值)
•center：居中对齐
•right：右对齐
•justify：两端对齐 (类似报纸排版)
代码与效果
📝 代码示例：
h1 {
/* 让页面主标题居中 */
text-align: center;
}
p {
/* 正文段落整齐排列 */
text-align: justify;
}
✨ 效果描述：
应用后，标题文本会位于页面水平中央，显得醒目；而正文段落文本会均匀分布在左右边距之间，阅读体验更佳。
思考与互动
🤔 大家思考一下：
1. 在设计网页时，什么场景下，你会使用text-align: center;？
(例如：标题、按钮文字、页面logo等)
2. 又在什么场景下，会使用text-align: right;？
(例如：购物车金额、文章落款日期、导航栏右侧链接等)
1.7.2013
除了字体和颜色，我们还可以控制文本的对齐方式。使用text-align属性，我们可以让文本左对齐、居中对齐或者右对齐。比如，我们通常会让页面的主标题居中显示，这样看起来更美观。
大家可以看左边的知识点卡片，里面列出了最常用的四个值，其中justify两端对齐常用于正文排版。中间的代码框展示了实际的写法，非常直观。右边的问题请大家结合自己的上网经验思考一下，看看生活中都在什么地方见过这些对齐方式。
‹#›
CSS 文本美化综合练习
任务描述
请使用我们刚刚学过的 CSS 文本属性，为下方的 HTML 代码添加样式，让这段“个人简介”看起来更清晰、美观。
<h1>我的个人简介</h1>
<p>大家好，我叫小明，是一名七年级的学生。</p>
<p>我喜欢编程、阅读和打篮球。</p>
<p>我的梦想是成为一名优秀的程序员。</p>
美化要求清单
01. 页面背景与基础设置
将页面背景色设置为非常浅的灰色：#f5f5f5
02. 主标题 <h1> 样式优化
字体：微软雅黑 | 大小：36px | 颜色：深蓝 #000080 | 对齐：居中
03. 正文段落 <p> 样式优化
字体：宋体 | 大小：18px | 颜色：深灰 #333333 | 首行缩进：2em
1.7.2013
现在，我们把刚才学的文本美化知识综合起来用一下。这里有一段简单的个人简介，大家需要根据要求，写出对应的CSS代码，让它变得更漂亮。这个练习会用到背景色、字体、颜色、大小和对齐方式等多个属性。
‹#›
CSS文本美化综合练习：参考代码
💻 参考代码 Code Snippet
body{
background-color: #f5f5f5;
font-family: "SimSun", serif;/* 页面默认字体：宋体 */
color: #333;font-size: 18px;
}
h1{
font-family: "Microsoft YaHei", sans-serif;
color: #000080;font-size: 36px;text-align: center;
}
p{text-indent: 2em;/* 首行缩进2字符 */}
✨ 效果预览 (Expected Result)
页面背景变为浅灰色 #f5f5f5，营造舒适的阅读感。
标题居中显示为深蓝色，正文段落首行自动缩进两个字符。
🤔 课堂思考 & 互动
❓ 对比自己的代码，是否实现了所有样式要求？
💡text-indent: 2em;是什么意思？
“em”是相对单位，2em 即缩进“两个当前字体大小”的距离，是实现中文排版首行缩进的最佳方式。
1.7.2013
我们来看一下参考代码。通过设置body的样式，我们统一了整个页面的背景和字体。然后通过h1和p的选择器，分别对标题和段落进行了精细的调整。特别是text-indent: 2em;实现了首行缩进，让排版更符合中文阅读习惯。大家都做对了吗？
‹#›
使用CSS美化盒子 —— CSS盒模型简介
由内到外依次为：内容 → 内边距 → 边框 → 外边距
📝 什么是“盒模型”？
在 CSS 中，所有 HTML 元素都可以被看作一个矩形“盒子”。它由四个核心部分组成：内容(content)、内边距(padding)、边框(border)和外边距(margin)。掌握它是理解 CSS 布局的基石。
📦 生活化理解：就像一个快递包裹
物品=内容 | 填充物=内边距 | 纸箱厚度=边框 | 包裹间距离=外边距
❓ 课堂小测
1. 想让两段文字距离变大？→margin
2. 想让文字离框框有留白？→padding
⚠️ 避坑指南
元素的最终宽高 = 内容宽高 + 左右/上下内边距 + 左右/上下边框。千万别漏掉后两项哦！
1.7.2013
学会了美化文本，我们接下来学习如何美化“盒子”。在CSS里，每个元素都像一个盒子。这个盒子有四个部分：内容、内边距、边框和外边距。
大家可以把它想象成一个快递包裹，内容是里面的东西，内边距是填充物，边框是盒子本身，外边距是和其他包裹的距离。理解了盒模型，我们就能更好地控制网页布局。
这里有两个常见的问题，大家可以快速思考一下：如果想让两个段落之间空出更大的距离，我们应该调整哪个属性？答案是外边距margin。如果想让文字和它的边框之间有一些空隙，应该调整哪个属性？答案是内边距padding。最后，一定要注意，元素的最终宽高是内容、内边距和边框的总和，这是初学者最容易忽略的点。
‹#›
使用CSS美化盒子——设置背景颜色 (background-color)
💡 核心知识点
• 定义：background-color 属性用于为HTML元素（如盒子、页面）设置背景颜色。
• 价值：为页面划分区域，增强层次感，突出重点内容。
• 类比：就像给房间的不同墙壁刷上不同的乳胶漆。
💻 代码实战
body{background-color:#f0f0f0; }
h1{background-color:rgb(255, 215, 0); }
💡 效果：页面整体背景变为浅灰，标题背景变为醒目黄色。
🎮 动手试一试
请尝试为一个p(段落) 标签添加样式：
1. 给它设置一个深红色背景。
2. 将文本颜色设置为白色，观察效果。
⚠️ 避坑指南
易错点：背景色和文字色太接近（如浅灰底配深灰字），导致对比度不足，用户看不清内容。
💡 小妙招：遵循“深色背景配浅色文字，浅色背景配深色文字”的原则，保证可读性。
1.7.2013
我们首先来看盒子的背景。使用`background-color`属性，我们可以为任何元素设置背景颜色。比如，我们可以给整个页面设置一个浅灰色背景，或者给标题设置一个醒目的黄色背景。但要注意，设置背景色时一定要考虑文字的可读性，确保文字颜色和背景色有足够的对比度。
‹#›
使用CSS美化盒子 —— 设置边框 (border)
📝 核心概念
•定义：一个简写属性，可同时设置元素边框的宽度、样式、颜色。
•价值：清晰勾勒轮廓，起分隔和装饰作用。就像给照片装上相框一样。
p {border: 2px solid red;}
💡 效果：段落周围出现 2px 宽、红色、实线的边框。
🤔 试一试
除了 solid (实线)，猜猜 dashed (虚线) 和 dotted (点线) 效果长什么样？
⚠️ 易错提示
只写宽和色，但忘了写 border-style？
默认是none (无)，边框不会显示！
1.7.2013
接下来是边框。使用border属性，我们可以给元素加上一个边框，就像给照片装个相框一样。border是一个简写属性，我们可以一次性设置它的宽度、样式和颜色，比如border: 2px solid red;就表示一个2像素宽的红色实线边框。大家要记住，边框样式是必须设置的，否则边框不会显示。
‹#›
使用CSS美化盒子 —— 设置边距 (margin 和 padding)
💡 核心定义与价值
◀ Margin (外边距):元素与“邻居”之间的空隙。
◀ Padding (内边距):元素内容与“自己边框”之间的空隙。
💡 生活类比：Margin是同桌间的过道，Padding是衣服里的空间。合理留白让页面更舒展！
// 代码实现案例
p {
border: 1px solid black;
margin: 20px; /* 四周空出20px给邻居 */
padding: 10px; /* 内部文字与边框保持10px距离 */
}
🤔 课堂小思考
如果只想给盒子设置“上方”的外边距，应该怎么写？
💡 答案：margin-top: 20px;
⚠️ 避坑指南
容易混淆两者的作用？记住这个简单口诀：
“Margin 管外部，Padding 管内部”
1.7.2013
最后是边距，这里有两个重要的属性：margin和padding。margin是外边距，控制元素和其他元素之间的距离。padding是内边距，控制元素内容和它自己边框之间的距离。大家可以记住这个口诀：margin管外，padding管内。合理使用它们，可以让我们的页面布局更加美观、舒展。
‹#›
CSS盒子美化综合案例
任务描述
请运用本节课所学的所有CSS知识（文本样式、背景、边框、边距），对下方的基础 HTML 页面进行全面美化，让它焕然一新。
<h1>欢迎来到我的博客</h1>
<div class="post">
<h2>第一篇文章</h2>
<p>这是我的第一篇博客文章，希望大家喜欢。</p>
</div>
<div class="post">
<h2>第二篇文章</h2>
<p>这是我的第二篇博客文章，内容更精彩。</p>
</div>
🎨 美化要求
01. 页面背景：设置为柔和的浅灰色 (#f4f4f4)，营造舒适阅读感。
02. 主标题：“欢迎来到我的博客”需居中显示，字体为微软雅黑，颜色设为深灰色。
03. 文章卡片：背景为纯白，1px灰色边框，15px内边距，20px底部外边距，实现错落有致的排版。
04. 文本细节：文章标题(h2)为蓝色，段落(p)首行缩进 2em，增强可读性。
1.7.2013
现在是终极挑战！我们要把今天学的所有CSS知识都用上，来美化一个简单的博客页面。这个任务涵盖了文本样式、背景、边框、内外边距等所有知识点。大家可以分组讨论，合作完成，看看哪一组设计的页面最漂亮。
‹#›
CSS盒子美化综合案例：参考代码
💻 核心代码解析
body{
background-color: #f4f4f4;/* 页面浅灰背景 */
margin: 0; padding: 20px;
}
.post{
background-color: white;/* 卡片白底 */
border: 1px solid #ddd; padding: 15px;
margin-bottom: 20px;/* 卡片间距 */
}
.post h2{
color: #007bff;/* 标题蓝色高亮 */
border-bottom: 1px solid #eee;/* 底部装饰线 */
}
🎨 效果预览
我们通过为页面设置整体背景色，为文章容器.post添加白色背景、灰色边框和合理的内边距，成功将单调的文字转化为精致的“卡片式”布局。标题部分增加了底部装饰线，让层级更分明，阅读体验更佳。
🤔 课堂互动时刻
1. 对比参考代码，你自己的设计有什么不同？谁的更有创意？
2..post h2用了哪种选择器？它能帮我们实现什么效果？
（答案：后代选择器，精准控制.post容器内的h2样式）
1.7.2013
时间到！我们来看一下参考代码。通过为`.post`类设置背景、边框和内外边距，我们创建了漂亮的卡片效果。通过后代选择器`.post h2`，我们精确地控制了文章标题的样式。大家的作品都非常棒！这说明大家已经基本掌握了CSS美化网页的方法。
‹#›
本课总结
网页美化方法
🔹 HTML 基础美化
• 标题: h1 ~ h6 (层级分明)
• 格式化: b(加粗), i(斜体), u(下划线)
🔹 CSS 专业美化 (核心)
•核心思想：内容与表现分离
•语法：选择器 { 属性: 值; }
•常用样式：color, font-size, text-align, background-color, border, margin, padding
互动思考
❓ 快速回顾
你还记得 CSS 的核心思想是什么吗？
(答案：内容与表现分离)
💡 自由分享
你觉得今天学到的 CSS 属性中，
哪一个最有趣？为什么呢？
避坑指南
⚠️ 常见误区
“学会了强大的 CSS，HTML 标签就不重要了？”
✅ 正确理解
HTML 负责页面的结构与语义，CSS 负责表现与样式。
两者相辅相成，缺一不可。
例：h1 不仅是“变大加粗”，更代表“最重要的标题”。
1.7.2013
好了，一节课很快就过去了。我们来总结一下今天学的内容。我们学习了两种网页美化方法：HTML基础标签和CSS。重点掌握了CSS的核心思想——内容与表现分离，以及如何使用CSS来美化文本和盒子。希望大家记住，HTML和CSS是相辅相成的，一个负责结构，一个负责表现。
‹#›
课后作业
为什么要做这个作业？
📌 核心价值：独立完成网页美化，检验并巩固对 CSS 布局与样式的理解。
💡 生活化类比：就像学会了做菜，需要亲手炒几个菜，才能真正掌握火候和调味技巧。
创建你的个人介绍页 (about_me.html)
1.基础内容：标题、一段自我介绍、你的兴趣爱好（使用列表标签）。
2.CSS 美化挑战：设置背景色/图、标题居中、段落行高、列表加边框和内边距，并给列表项加上鼠标悬停效果。
创意与分享
尽情发挥你的创意，不要局限于课堂代码，设计一个独一无二的个人主页！
✨ 下节课我们将挑选几位同学的优秀作品进行展示分享，期待你的大作！
避坑指南
🚫 易错点：直接复制粘贴课堂代码，没有真正理解代码含义。
💡 小提示：遇到问题先尝试自己独立思考和书写，再回看笔记或教材。记住，独立完成的思考过程才是最重要的。
1.7.2013
最后是我们的课后作业。请大家创建一个介绍你自己的网页，并使用今天学到的CSS知识对它进行全面美化。这次作业给了大家更多发挥创意的空间，比如可以尝试设置背景图片，或者添加一些鼠标悬停效果。希望大家认真完成，下节课我们一起来欣赏大家的作品！
‹#›
谢谢观看
下课啦！
1.7.2013
好了，同学们，今天的课程就到这里。我们已经学会了如何为网页穿上漂亮的外衣。希望大家课后多多练习，创造出更多精彩的网页。下课！
‹#›
$
资源预览图
1
2
3
4
5
6
相关资源
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。