HTML 超级链接与 CSS 样式设置

一、本节课学习内容

1. 认识空链接及其作用
2. 为空链接设置彩色样式（赤橙黄绿青蓝紫）
3. 为多个标题分组设置不同 CSS 样式
   二、空链接知识点
4. 什么是空链接
   在 标签中，href="#" 就是空链接。
   它看起来是链接，但不会跳转到其他页面。
5. 空链接的作用
   • 页面占位，先做结构，以后再填真实地址
   • 配合 JS 做交互（弹窗、菜单、点击事件）
   • 保留链接的样式（小手、可点击状态）
   • 导航菜单的父级项使用
6. 基础写法
   空链接
   三、任务一：空链接设置为赤橙黄绿青蓝紫

实现思路

使用 CSS 类选择器，给每个链接单独设置颜色。

完整代码

空链接
内部链接
外部链接
锚记
电子邮件
点我下载
JS交互 效果

7 个链接依次显示：
赤 → 橙 → 黄 → 绿 → 青 → 蓝 → 紫
四、任务二：4 个标题一分组设置样式

要求：

• 第 1、3 个标题使用同一样式

• 第 2、4 个标题使用另一样式

完整代码

标题一 1

标题一 2

标题一 3

标题一 4

五、本节课重点总结 1. 空链接 href="#" 不跳转，只占位、做交互。 2. CSS 类选择器 .类名 可以给多个标签设置相同样式。 3. 颜色设置 直接使用英文：red、orange、yellow、green、cyan、blue、purple。 4. 分组样式 定义两个类，分别给不同标签使用，实现统一风格。