项目5：CSS3基础
黑龙江旅游职业技术学院 · 《网页设计与制作》
授课教师：刘继峰
授课教师：刘继峰
🎯 教学目标
知识目标
掌握CSS3基本语法、度量单位、颜色定义及引入方式；理解基础选择器、关系选择器的应用。
能力目标
能够运用CSS技术对网页样式进行统一管理和控制；能根据页面效果合理规划布局并实现样式设置。
素质目标
培养遵守规则、诚实守信的职业素养；养成勤学善思、严谨求实的工作作风；增强团队合作与工匠精神。
🚩 任务3：制作“《国门之外》介绍”页面
💡 任务分析： 新建HTML文档与CSS文件，使用CSS基础选择器（全局、元素、类、ID）设置网页外观样式。
🛠️ 核心知识点：CSS3基础选择器
1. 全局选择器 (*)：选中页面所有元素，常用于重置内外边距。
* {
margin: 0;
padding: 0;
}
margin: 0;
padding: 0;
}
2. 标记选择器 (元素选择器)：以HTML标签名定义，统一设置某类标签样式。
p {
font-size: 16px;
color: #333;
}
font-size: 16px;
color: #333;
}
3. 类选择器 (.)：通过 class 属性定义，灵活地为任意多个元素设置相同样式。
.text-red { color: red; }
.text-bold { font-weight: bold; }
<p class="text-red text-bold">这段文字既红又粗</p>
.text-bold { font-weight: bold; }
<p class="text-red text-bold">这段文字既红又粗</p>
4. ID选择器 (#)：通过 id 属性定义，为唯一的元素设置样式（页面中ID不可重复）。
#header { background-color: #f0f0f0; }
<div id="header">页面头部</div>
<div id="header">页面头部</div>
🚩 任务4：制作“相约冬奥会 一起向未来”新闻页面
💡 任务分析： 运用CSS关系选择器（后代、子代、兄弟、相邻）来精确控制嵌套结构中的元素样式。
🛠️ 核心知识点：CSS3关系选择器
1. 后代选择器 (空格)：选择父元素内部的所有指定后代元素（不限层级）。
.box p {
color: blue;
} <!-- 选择 class="box" 内部所有的 p 标签 -->
color: blue;
} <!-- 选择 class="box" 内部所有的 p 标签 -->
2. 子代选择器 (>)：仅选择父元素的直接子元素（第一层）。
.box > p {
font-weight: bold;
} <!-- 仅选择 .box 的直接子级 p，不包括孙子级 -->
font-weight: bold;
} <!-- 仅选择 .box 的直接子级 p，不包括孙子级 -->
3. 兄弟选择器 (~)：选择指定元素后面的所有同级兄弟元素。
h3 ~ p { color: green; }
<!-- 选择所有在 h3 后面的同级 p 标签 -->
<!-- 选择所有在 h3 后面的同级 p 标签 -->
4. 相邻选择器 (+)：仅选择指定元素后面紧挨着的那一个兄弟元素。
h3 + p { font-size: 18px; }
<!-- 仅选择紧跟在 h3 后面的那个 p 标签 -->
<!-- 仅选择紧跟在 h3 后面的那个 p 标签 -->
📝 随堂测试
请完成以下单选题，检验本节课的学习成果：
1. 在CSS中，如果想要为一个元素设置唯一的标识并应用样式，应该使用哪种选择器？
2. 下列哪个CSS选择器用于选择某个元素后面紧挨着的兄弟元素？
📌 课堂总结
本节课我们深入学习了CSS3的基础知识。重点掌握了四种基础选择器（全局、标记、类、ID）的语法与优先级（ID>类>标记>全局）， 以及四种关系选择器（后代、子代、兄弟、相邻）在复杂布局中的应用。 课后请同学们务必练习代码，理解“样式与结构分离”的核心思想，为后续的网页布局打下坚实基础。