先看看默认的样式:
<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;
}
效果:
在链接中包含图标
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!!!