项目5：CSS3基础
黑龙江旅游职业技术学院 · 《网页设计与制作》
授课教师：刘继峰
🎯 教学目标
知识目标

掌握CSS3基本语法、度量单位、颜色定义及三种引入方式（行内、内嵌、链接）。

能力目标

能独立使用CSS控制网页文本样式、颜色及背景，实现结构与表现分离。

素质目标

培养严谨求实的职业素养，遵守规则意识及一丝不苟的工匠精神。

🚩 任务1：制作“绵绵用力，久久为功”页面
💡 职业素养： 通过CSS样式设置，理解“工匠精神”中精益求精的含义，培养审美能力。

🛠️ 任务要求

编写一个页面，利用CSS技术修改文本的对齐方式、字号、颜色和背景色。

📚 核心知识点：CSS3简介与语法

CSS3 (层叠样式表)： 网页的“皮肤”。它实现了网页结构(HTML)与表现(CSS)的分离，提高了代码的可维护性。

语法格式：
选择器 { 属性: 属性值; }
例如：p { color: red; font-size: 20px; }

📏 常用度量单位

单位 类型 描述
px 绝对/相对 像素，最常用的单位，代表屏幕的一个点。
em 相对 相对于父元素字体大小，2em表示两倍。
rem 相对 相对于根元素(html)的字体大小。
% 相对 相对于父元素的百分比。

调 颜色的定义

在CSS中，颜色可以通过多种方式定义：

  • 颜色名： 如 red, blue, green。
  • 十六进制： 如 #ff0000 (红), #000000 (黑), #ffffff (白)。
  • RGB函数： 如 rgb(255, 0, 0) 或带透明度的 rgba(255, 0, 0, 0.5)。
🚩 任务2：制作“李商隐《咏史二首·其二》”页面
💡 文化自信： 通过技术手段展示中华优秀传统文化，增强民族自豪感。

🛠️ 任务要求

完成古诗赏析页面，重点掌握CSS的三种引入方式：

  1. 行内样式： 写在标签的 style 属性内（优先级最高，但不推荐大量使用）。
  2. 内嵌样式： 写在 <head> 标签内的 <style> 标签中。
  3. 链接样式： 将CSS代码写在单独的 .css 文件中，通过 <link> 标签引入（最推荐，利于维护）。

📚 核心知识点：CSS引入方式对比

方式 语法示例 特点
行内样式 <p style="color: red;"> 权重高，但结构与样式混杂，难以维护。
内嵌样式 <style> p {color: red;} </style> 适用于单页样式，减少了HTTP请求。
链接样式 <link rel="stylesheet" href="css/style.css"> 结构与表现完全分离，利于团队协作和缓存。

⚠️ 注意事项：优先级与层叠性

继承性： 子元素会继承父元素的某些样式（如字体颜色）。

层叠性： 当样式发生冲突时，权重高的样式会覆盖权重低的样式。

优先级顺序： 行内样式 > 内嵌样式/链接样式 (同权时，后写的生效)。

📝 随堂测试

请完成以下测试，检验本节课的学习成果：

1. 在CSS中，用于定义网页“皮肤”和样式的语言是？
2. 如果想让CSS样式只作用于当前页面，且不想让代码混乱，最好使用哪种方式？
3. 在CSS中，以下哪个颜色代码表示红色？
📌 课堂总结

本节课我们初步认识了CSS3，了解了它作为网页“皮肤”的重要作用。我们学习了CSS的基本语法、常用的度量单位（如px、em）和颜色定义方式，并掌握了CSS的三种引入方式及其优先级。

课后作业： 请结合本节课所学，尝试为你之前写过的HTML页面添加一个外部CSS文件，并修改页面的背景色和文字颜色。