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

掌握CSS3基本语法、度量单位、颜色定义及引入方式；掌握CSS选择器（属性、伪类、伪元素）的应用。

能力目标

能运用CSS技术对网页进行样式设置，实现网页布局、字体、颜色等视觉效果的统一控制。

素质目标

培养遵守规则意识、严谨求实作风、团队协作精神及精益求精的工匠精神。

🚩 任务1：制作“《致青春》诗歌赏析”页面
💡 任务分析： 学习CSS属性选择器（E[attribute]），根据HTML元素的属性及属性值来选择元素并定义样式。

📝 核心知识点：属性选择器

  • E[attribute]： 选择具有指定属性的元素。
    /* 选择所有具有 class 属性的元素 */ [class] { color: #f00; font-size: 20px; }
  • E[attribute="value"]： 选择指定属性且值等于特定值的元素。
    /* 选择 type 属性值为 text 的 input 元素 */ input[type="text"] { background-color: yellow; }
🚩 任务2：制作“中国古代建筑集萃”页面
💡 任务分析： 学习CSS伪类选择器，包括超链接伪类（:link, :visited, :hover, :active）和结构伪类（:first-child, :last-child, :nth-child）。

📝 核心知识点：伪类选择器

选择器 作用说明
a:link 超链接未被访问时的状态
a:visited 超链接被访问后的状态
a:hover 鼠标悬停时的状态
a:active 鼠标点击瞬间的状态
结构伪类示例：
  • E:first-child：选择父元素的第一个子元素E。
  • E:last-child：选择父元素的最后一个子元素E。
  • E:nth-child(n)：选择父元素的第n个子元素E (n可为数字、even、odd、公式)。
🚩 任务3：制作“《战狼》影评”页面
💡 任务分析： 学习CSS伪元素选择器（::first-line, ::first-letter, ::before, ::after），用于向元素的特定部分添加特殊样式或内容。

📝 核心知识点：伪元素选择器

  • ::first-line： 定义指定元素文本的第一行样式（只用于块元素）。
    p::first-line { font-size: 24px; color: red; }
  • ::first-letter： 定义指定元素文本的首字母样式。
    p::first-letter { font-size: 24px; font-weight: bold; color: blue; }
  • ::before / ::after： 在元素内容前面或后面插入内容，需配合 content 属性使用。
    /* 在段落前添加文字，在段落后添加图片 */ p::before { content: "【导读】"; color: red; } p::after { content: url('img/css3.jpg'); }
📝 随堂测试

请完成以下单选题，检验本节课的学习成果：

1. 在CSS中，如果想要选择所有具有 'title' 属性的 div 元素，应该使用哪个选择器？
2. 在CSS中，a:hover 伪类的作用是什么？
📌 课堂总结

本节课我们深入学习了CSS3的基础选择器应用。重点掌握了：

  1. 属性选择器：通过元素的属性及属性值来选择元素（如 E[attribute]）。
  2. 伪类选择器：包括超链接的四种状态（:link, :visited, :hover, :active）以及结构伪类（如 :first-child, :nth-child(n)）。
  3. 伪元素选择器：用于向元素的特定部分添加特殊样式或内容（如 ::first-line, ::before, ::after）。

课后作业：请同学们尝试制作一个简单的个人简介页面，要求至少使用3种不同的CSS选择器来美化页面。