CSS基础-链接

链接的状态

• link 没有访问过的
• visited 访问过的
• hover 用户鼠标刚好停留在这个链接上时
• focus 通过TAB键或者编程方法将一个链接选中时
• active 链接被激活时

 

默认的链接样式

• 链接具有下划线
• link状态是蓝色的
• visited状态是紫色的
• hover状态时光标变成一个小手
• active状态是红色的
• focus状态，用tab键选中链接时，链接周围有一个轮廓

 

将样式应用到链接

　　最好根据 link visited focus hover active 的顺序编写链接样式。

　　可以用 LoVe Fears HAte 的顺序帮助记忆

 

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;
}

 

 

在链接中包含图标

若要实现这样的效果，即外部链接旁边有一个带箭头的小图标。外部链接是不属于本站的链接，通常带有"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;
}