4 CSS 学习笔记第四节 链接

#####CSS 学习笔记第四节/链接

---

1.什么是链接

其实就是<a href="http://www.baidu.com">百度一下,你就知道</a>标签啦.他就是一个连接.而这个东西他有四个伪类.也就是他对应的四种不同的状态.然后呢,在 CSS 中其实可以对应他四种不同的状态设置他的样式.

废话不多说有一个方便的记忆方法,总结就是"LOVE HATE"

• a:link - 正常，未访问过的链接
• a:visited - 用户已访问过的链接
• a:hover - 当用户鼠标放在链接上时
• a:active - 链接被点击的那一刻

上面的就是连接对应的四种状态,然后呢?我们可以在不同的状态下设置不同的样式,见下面的代码:

a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
复制代码

注意 连接的四种状态不可以顺序颠倒,一定顺序写正确,就是上买呢代码块中的那个样子.

---

2.补充内容

然后呢?一般我们在CSS 中设置连接的相关的属性的时候,一般在都是在没有 hover 的时候让他没有下划线,在鼠标放上去的时候展示下划线.然后可能会有改变背景色的一个需求.看下面的一个代码:

/*关于 A 标签的字体颜色的设置 */
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
/*在不同的伪类下面的一个背景色的变化*/
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
复制代码

---

结束语:

写到了这里其实关于<a></a>的CSS 设置注意事项也就没有了,只是因为他有一个伪类的这个东西,所以这一节详细的介绍一下他.色油拉拉

转载于:https://juejin.im/post/5a39da79f265da4320036220