35、网页链接样式与级联样式表详解

网页链接样式与级联样式表详解

1. 链接样式基础

链接在样式方面表现独特，如同元素世界的变色龙，能根据不同情况瞬间改变样式。具体如下：
- 未访问链接 ：指用户从未点击过的链接，默认显示为蓝色。
- 悬停状态 ：当鼠标悬停在链接上但未点击时，部分浏览器会显示“title”属性的文本提示，且某些网页上链接样式会改变。
- 已访问链接 ：用户点击过的链接，通常与未访问链接颜色不同，多数浏览器中默认显示为紫色。

与其他元素不同， <a> 元素的样式会随状态改变。若想为链接设置不同状态的样式，可借助伪类。示例代码如下：

a:link { 
    color: green;
}
a:visited { 
    color: red;
}
a:hover { 
    color: yellow;
}

操作步骤：
1. 将上述规则添加到“lounge.css”文件底部。
2. 保存“lounge.css”文件。
3. 重新加载“lounge.html”页面。
4. 测试链接的不同状态，若想看到未访问链接的绿色，可能需清除浏览器历史记录。

1.1 常见问题解答

• 问题1 ：若像普通元素一样为 <a> 元素设置样式，如 a { c