先看看默认的样式:

<p><a href="https://mozilla.org">A link to the Mozilla homepage</a></p>

p {
  font-size: 2rem;
  text-align: center;
}

效果：

将样式应用到一些链接

开始之前先写出空规则集，这很重要

a {

}
a:link {

}
a:visited {

}
a:focus {

}
a:hover {

}
a:active {

}

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

接下来填充进去看看会发生什么事情

<p>There are several browsers available, such as <a href="https://www.mozilla.org/zh-CN/firefox/">Mozilla
Firefox</a>, <a href="https://www.google.com/chrome/index.html">Google Chrome</a>, and
<a href="https://www.microsoft.com/zh-CN/windows/microsoft-edge">Microsoft Edge</a>.</p>

body {
  width: 300px;
  margin: 0 auto;
  font-size: 1.2rem;
  font-family: sans-serif;
}
p {
  line-height: 1.4;
}
a {
  outline: none;
  text-decoration: none;
  padding: 2px 1px 0;
}
a:link {
  color: #265301;
}
a:visited {
  color: #437A16;
}
a:focus {
  border-bottom: 1px solid;
  background: #BAE498;
}
a:hover {
  border-bottom: 1px solid;     
  background: #CDFEAA;
}
a:active {
  background: #265301;
  color: #CDFEAA;
}

效果：

点击查看效果，注意鼠标点击按住不放触发focus

在链接中包含图标

a[href*="http"] {
  background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;
  background-size: 16px 16px;
  padding-right: 19px;
}

在a标签中带有http的标签添加这个图标，设置no-repeat，指定位置是100%在内容右边且离上方为0px，hi用background-size来定义图标的大小，最后在链接上设置padding-right为背景图片留出空间，保证不会与文本重叠。

效果:

样式化链接为按钮

直接上例子了哟

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Pizza</a></li>
  <li><a href="#">Music</a></li>
  <li><a href="#">Wombats</a></li>
  <li><a href="#">Finland</a></li>
</ul>

body,html {
  margin: 0;
  font-family: sans-serif;
}
ul {
  padding: 0;
  width: 100%;
}
li {
  display: inline;
}
a {
  outline: none;
  text-decoration: none;
  display: inline-block;
  width: 19.5%;
  margin-right: 0.625%;
  text-align: center;
  line-height: 3;
  color: black;
}
ul:last-child a {
  margin-right: 0;
}
a:link, a:visited, a:focus {
  background: yellow;
}
a:hover {     
  background: orange;
}
a:active {
  background: red;
  color: white;
}

看看上面发生了什么？

主要是几个有趣的部分:

我们的第二条规则删除了 <ul> 元素的默认的 padding，然后设置了它的宽度是外部容器 <body> (在这次条件下) 的 100% 。
<li> 元素通常默认是块元素 (可见 types of CSS boxes 回顾)，意味着它们各自会占用一行。在这个例子中，我们创建了一组水平列表的链接，所以在第三条规则中，我们设置了 display 属性为 inline，这会导致列表中的每项内容都会一起出现在同一行，它们现在表现得就像内联元素。
第四条规则，主要是 <a> 元素的样式，这里比较复杂; 让我们一步一步来看：
- 和前面的例子一样，我们首先关掉了 text-decoration 和 outline，我们不希望这些破坏我们链接的样子。
- 接着，我们设置 display 为 inline-block ，<a> 元素默认为内联元素，而且我们不希望它们像值为 block 时一样，线条超出自己的内容，我们确实想要控制它们的大小inline-block 允许我们这样做。
- 接着是尺寸的设置! 我们要填满整个 <ul> 的宽度，为按钮之间留一些间距 (margin) (但不是右边边缘的间距)，我们有 5 个按钮需要容纳，所以它们的大小应该一样。为了做到这一点，我们设置 width 为 19.5%，然后 margin-right 为 0.625%. 你会注意到所有宽度加起来是 100.625%, 这样会让最后一个按钮溢出 <ul> ，然后显示到下一行中。但是，我们使用了下一条规则让它恢复到了 100%，这条规则选中了列表中的最后一个 <a>元素，然后删除了它的间距 (margin)。完成!
- 最后三条声明就比较简单了，主要是为链接各个状态添加了颜色。我们居中了每个链接中的文本，设置 line-height 为 3，让按钮有一些高度 (这也具有垂直居中文本的优点)，并设置文本的颜色为黑色。

效果：

样式化链接为按钮效果

over!!!

CSS总结（链接）

先看看默认的样式:

将样式应用到一些链接

在链接中包含图标

样式化链接为按钮

猜你喜欢