正文
CSS基础-链接
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
链接的状态
-
link 没有访问过的
-
visited 访问过的
-
hover 用户鼠标刚好停留在这个链接上时
-
focus 通过TAB键或者编程方法将一个链接选中时
-
active 链接被激活时
默认的链接样式
-
链接具有下划线
-
link状态是蓝色的
-
visited状态是紫色的
-
hover状态时光标变成一个小手
-
active状态是红色的
-
focus状态，用tab键选中链接时，链接周围有一个轮廓
将样式应用到链接
最好根据 link visited focus hover active 的顺序编写链接样式。
可以用
L
o
V
e
F
ears
HA
te 的顺序帮助记忆
link样式
color
visited样式
color
focus样式
border
background
outline
outline是绘制元素周围的一条线，位于边框的外围，不会占据元素空间，起到突出元素的作用，可以不是矩形。简写：color style width。
hover样式
border
background
active样式
color
background
示例：
body {
width: 300px;
margin: 0 auto;
font-size: 1.2rem;
font-family: sans-serif;
}
p {
line-height: 1.4;
}
a {
outline: none; /*取消focus状态的外围线*/
text-decoration: none; /*取消下划线*/
padding: 2px 1px 0; /*增加内边距，上2px,左右1px, 下0px*/
}
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;
}
在链接中包含图标
- link 没有访问过的
- visited 访问过的
- hover 用户鼠标刚好停留在这个链接上时
- focus 通过TAB键或者编程方法将一个链接选中时
- active 链接被激活时
- 链接具有下划线
- link状态是蓝色的
- visited状态是紫色的
- hover状态时光标变成一个小手
- active状态是红色的
- focus状态，用tab键选中链接时，链接周围有一个轮廓
将样式应用到链接
最好根据 link visited focus hover active 的顺序编写链接样式。
可以用
L
o
V
e
F
ears
HA
te 的顺序帮助记忆
link样式
color
visited样式
color
focus样式
border
background
outline
outline是绘制元素周围的一条线，位于边框的外围，不会占据元素空间，起到突出元素的作用，可以不是矩形。简写：color style width。
hover样式
border
background
active样式
color
background
示例：
body {
width: 300px;
margin: 0 auto;
font-size: 1.2rem;
font-family: sans-serif;
}
p {
line-height: 1.4;
}
a {
outline: none; /*取消focus状态的外围线*/
text-decoration: none; /*取消下划线*/
padding: 2px 1px 0; /*增加内边距，上2px,左右1px, 下0px*/
}
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;
}
在链接中包含图标
可以用
L
o
V
e
F
ears
HA
te 的顺序帮助记忆
body {
width: 300px;
margin: 0 auto;
font-size: 1.2rem;
font-family: sans-serif;
}
p {
line-height: 1.4;
}
a {
outline: none; /*取消focus状态的外围线*/
text-decoration: none; /*取消下划线*/
padding: 2px 1px 0; /*增加内边距，上2px,左右1px, 下0px*/
}
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;
}
若要实现这样的效果，即
外部链接旁边有一个带箭头的小图标
。外部链接是不属于本站的链接，通常带有"http"开头。
那么可以根据以下样式编码：
a {
padding: 2px 1px 0;
}
a:link {}
a:visited {}
a:focus, a:hover {}
a:active {}
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[href*="http"]
即，选中 <a> 元素，但是只选中拥有 href 属性，且属性的值包含 "http" 的 <a>的元素。
样式化链接为按钮
示例：
HTML部分
<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>
将多个链接置于一个列表中
CSS部分
body,html {
margin: 0;
font-family: sans-serif;
}
ul {
padding: 0; /*取消内边距*/
width: 100%; /*设置列表宽度是外部容器（body）的100%*/
}
li {
display: inline; /*将列表项设为内联元素，就不会换行*/
}
a {
outline: none; /*取消focus的外围线*/
text-decoration: none; /*取消下划线*/
display: inline-block; /*链接设置为内联块，就可以不用换行而且自定义块大小*/
width: 19.5%;
margin-right: 0.625%;
text-align: center;
line-height: 3;
color: black;
}
li:last-child a {
margin-right: 0;
/*
利用last-child选择器选择父元素中最后一个子元素，并且设置右侧外边距为0，
但是在edge浏览器中彷佛不能实现。
*/
}
a:link, a:visited, a:focus {
background: yellow;
}
a:hover {
background: orange;
}
a:active {
background: red;
color: white;
}
<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%; /*设置列表宽度是外部容器（body）的100%*/
}
li {
display: inline; /*将列表项设为内联元素，就不会换行*/
}
a {
outline: none; /*取消focus的外围线*/
text-decoration: none; /*取消下划线*/
display: inline-block; /*链接设置为内联块，就可以不用换行而且自定义块大小*/
width: 19.5%;
margin-right: 0.625%;
text-align: center;
line-height: 3;
color: black;
}
li:last-child a {
margin-right: 0;
/*
利用last-child选择器选择父元素中最后一个子元素，并且设置右侧外边距为0，
但是在edge浏览器中彷佛不能实现。
*/
}
a:link, a:visited, a:focus {
background: yellow;
}
a:hover {
background: orange;
}
a:active {
background: red;
color: white;
}
