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

1. 掌握CSS网页样式基本概念。
2. 掌握字体、文本、边框、背景属性的设置方法。

能力目标

1. 能够独立使用CSS样式设计网页。
2. 能在基础网页中添加创新点与特效。

素质目标

1. 培养集思广益、团结合作解决问题的能力。
2. 培养精益求精、认真严谨的工作态度。

🚩 任务1：制作“诗词鉴赏”页面
💡 任务要求： 熟练掌握CSS字体样式的设置方法，完成“诗词鉴赏”页面制作。

🛠️ 核心知识点：字体属性

  • font-family: 设置字体系列（如"幼圆", "宋体"），用逗号分隔备用字体。
  • font-size: 设置字体大小，常用单位 px（像素）、em（相对值）。
  • font-weight: 设置粗细（normal, bold, 100-900数值）。
  • font-style: 设置风格（normal, italic斜体, oblique倾斜）。

🧩 简写属性 (font)

可以将多个字体属性合并为一行代码，至少需指定 font-size 和 font-family。

/* 语法示例：字体风格 粗细 大小/行高 字体 */
#A1 {
  font: oblique bold 18px/20px "宋体", Calibri;
}
🚩 任务2：制作“东北烈士纪念馆”页面
💡 任务要求： 掌握CSS文本样式的设置方法，注意主题颜色选择，突出页面主题。

🛠️ 核心知识点：文本属性

属性 说明与示例
color 设置文本颜色。支持预定义颜色(red)、十六进制(#ff0000)、rgb(255,0,0)、rgba(255,0,0,0.5)、hsl/hsla。
line-height 设置行高。若要垂直居中，可将line-height设为与height相同数值。
letter-spacing 设置字符间距。正值增加间距，负值减小间距。
text-align 水平对齐方式。left(左), right(右), center(居中), justify(两端对齐)。
text-decoration 文本修饰。underline(下划线), line-through(删除线), overline(上划线), none(去除链接下划线)。
text-indent 首行文本缩进。例如：text-indent: 2em; (通常为2个字符宽度)。
text-shadow 文本阴影。格式：h-shadow v-shadow blur color。例如：2px 2px 4px rgba(0,0,0,0.5)。
🚩 任务3：制作“中国脊梁”页面
💡 任务要求： 掌握CSS边框样式的设置方法，利用边框属性美化“中国脊梁”页面。

🛠️ 核心知识点：边框属性

属性/类别 说明与示例
基础属性 border-width (宽度), border-style (样式), border-color (颜色)
简写方式 border: 1px solid #000; (宽度 样式 颜色)
圆角边框 border-radius: 20px; (可单独设置四个角，如 border-top-left-radius)
图片边框 border-image: url() round stretch; (使用图片作为边框)
常见样式 dotted (点线), dashed (虚线), solid (实线), double (双线), groove (3D凹槽)
🚩 任务4：制作“热点新闻”页面
💡 任务要求： 掌握CSS背景属性的设置方法，完成“新闻热点”页面布局。

🛠️ 核心知识点：背景属性

属性 说明
background-color 设置背景颜色，默认值为none。
background-image 设置背景图像。例如：url(img/bg.jpg)。
background-repeat 背景平铺方式。repeat(平铺), repeat-x(水平), repeat-y(垂直), no-repeat(不平铺)。
background-position 背景位置。可使用方位词(top left)或百分比/像素值。
background-size 设置背景尺寸大小。例如：cover (覆盖), 100% 200px。
background-clip 背景剪裁区域。border-box (默认), padding-box, content-box。
CSS3渐变
  • 线性渐变: background: linear-gradient(to right, red, yellow);
  • 径向渐变: background: radial-gradient(circle, red, yellow);
  • 重复渐变: background: repeating-radial-gradient(...);
📝 随堂测试

请根据本节课所学的CSS3样式知识，完成以下测试题。选择答案后，点击底部“提交答案”按钮查看结果。

1. 在CSS中，若要设置文本的首行缩进为2个字符，应使用以下哪个属性？

  • A. margin-left: 2em;
  • B. text-indent: 2em;
  • C. padding-left: 2em;
  • D. font-indent: 2em;

2. 以下哪个CSS3属性用于给元素添加圆角效果？

  • A. border-style
  • B. border-image
  • C. border-radius
  • D. box-shadow

3. 若想让背景图片完全覆盖整个容器且保持比例，应设置 background-size 的值为？

  • A. auto
  • B. cover
  • C. contain
  • D. 100%
📌 课堂总结

本节课我们深入学习了CSS3网页样式的四大核心模块：字体、文本、边框和背景。通过四个实战任务，希望大家掌握以下核心内容：

  • 字体样式： 掌握 font-family、font-size、font-weight 及 font 简写属性的使用。
  • 文本样式： 熟练运用 color、line-height、text-align、text-shadow 等属性美化文本排版。
  • 边框样式： 掌握 border 简写、border-radius 圆角以及 border-image 图片边框的设置方法。
  • 背景样式： 熟悉 background 系列属性，特别是 background-size、background-position 以及 CSS3 渐变（线性/径向）的应用。
💡 课后寄语：

CSS3赋予了网页丰富的视觉表现力。请同学们课后结合本节课的知识点，独立完善四个实战任务的页面效果，尝试在页面中加入更多创新点与特效，做到学以致用！