样式化链接—CSS学习笔记

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第14天，点击查看活动详情

---

前言

在网页中，链接也是一个非常重要的元素，往往用来跳转到另一个页面。所以链接的样式就得和其他普通的文字等区分开，以表示其是链接可点击跳转。接下来我们先看一下链接的几种状态以便我们样式化。

样式化链接

在样式化链接前，我们需要知道链接有五种状态，链接的每种状态都对应一个伪类。

链接的状态

• 未访问状态：a:link，这是链接未访问时也就是默认的状态。
• 已访问状态：a:visited，这是链接访问过后的状态
• 鼠标悬浮状态：a:hover，当用户鼠标刚好停留在链接上时
• 选中状态：a:focus，一个链接当它被选中的时候 (比如通过键盘的 Tab 移动到这个链接的时候
• 激活状态：a:active，一个链接当它被激活的时候（比如鼠标点击）

默认的样式

链接在浏览器中有默认的表现形式。下面我们通过一个例子来看看。

我们观察一下，发现有以下形式

• 未访问链接颜色为蓝色，访问过变紫色
• 链接具有下划线
• 鼠标悬停时光标由指针变小手
• 激活时链接颜色变红

将样式应用到链接

接下来我们开始样式化链接，先写出我们的空规则集

a {
​
}
​
a:link {
​
}
​
a:visited {
​
}
​
a:focus {
​
}
​
a:hover {
​
}
​
a:active {
​
}

这几个规则的顺序是有意义的，因为链接的样式是建立在另一个样式之上的，比如，第一个规则的样式也会在后面的规则中生效，一个链接被激活 (activated) 的时候，它也是处于悬停 (hover) 状态的。如果你搞错了顺序，那么就可能不会产生正确的效果。要记住这个顺序，你可以尝试这样帮助记忆：LoVe Fears HAte.

接下来我们开始样式化，通常链接会在两个位置使用到，一个是段落中的链接，还有就是导航栏中的链接

段落中的链接

<p>
    欢迎访问<a href="#">我的网站</a>，想要了解更多信息，请联系邮箱<a href="#">123456@email.com</a>或电话
    <a href="#">00000000</a>
</p>

a {
    padding: 5px;
    text-decoration: none;
    outline: none;
}
​
a:link {
    color: blue;
}
​
a:visited {
    color: purple;
}
​
a:focus,
a:hover {
    /* border-bottom: 1px solid; */
    text-decoration: underline;
}
​
a:active {
    color: red;
}

这里padding是为了与普通文本拉开距离，text-decoration是在未访问时不显示下划线。

效果：

导航栏中的链接

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Books</a></li>
    <li><a href="#">Category</a></li>
    <li><a href="#">Goods</a></li>
    <li><a href="#">Information</a></li>
</ul>

ul {
    padding: 0;
    width: 100%;
}
​
li {
    display: inline;
}
​
a {
    outline: none;
    text-decoration: none;
    display: inline-block;
    width: 19%;
    margin-right: 0.625%;
    text-align: center;
    line-height: 50px;
    color: white;
}
​
li:last-child a {
    margin-right: 0;
}
​
a:link,
a:visited,
a:focus {
    background: darkblue;
}
​
a:hover {
    background: #333333;
}
​
a:active {
    background: #333333;
    color: yellowgreen;
}

在导航栏中就不显示下划线，且以行内块元素排列。

效果：