链接的状态

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

默认的链接样式

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

将样式应用到链接

  最好根据 link visited focus hover active 的顺序编写链接样式。
  可以用 LoVFears 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;
}

CSS基础-链接的更多相关文章

  1. 前端开发:css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  2. CSS基础总结

    CSS基础总结链接地址:http://segmentfault.com/a/1190000002773955

  3. HTML5 -入门 (---css样式-------------(css基础与css选择器)---------------------—)

    ---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在sty ...

  4. 妙味课堂——HTML+CSS基础笔记

    妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...

  5. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  6. CSS基础(01)

    1. Css基础 1.1 CSS(层叠样式表 Multiple Styles)   CSS 是 Cascading Style Sheets(层叠样式表)的简称. CSS 语言是一种标记语言,它不需要 ...

  7. (转)第一天 XHTML CSS基础知识 文章出处:标准之路(http://www.aa25.cn/div_css/902.shtml)

    欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准. 学习本系列教程需有一定html和css基础,也 ...

  8. CSS 基础总结

    CSS基础 Doctype 声明位于文档中的最前面,处于 标签之前.告知浏览器的解析器,用什么文档类型 规范来解析这个文档. 在标准模式中,浏览器根据规范呈现页面: 在混杂模式中,页面以一种比较宽松的 ...

  9. Form标签+Css基础

      一.Form表单标签 <form action="" method=""></form>    表单就是用来将用户的信息提交到服务器 ...

随机推荐

  1. TCP中RTT的测量和RTO的计算 以及 接收缓存大小的动态调整

    RTT测量 在发送端有两种RTT的测量方法,但是因为TCP流控制是在接收端进行的,所以接收端也需要 有测量RTT的方法. /* Receiver "autotuning" code ...

  2. shell中if/seq/for/while/until

    1.if语句格式:  if 判断条件:then statement1 statement2 fi; 例子: 判断/test/a普通文件是否存在,存在则输出yes,不存在则输出no,并创建.  #! / ...

  3. 在多个浏览器中添加IDM插件

    许多朋友下载了IDM(Internet Download Manager)不知如何使用.把包含视频的链接放到软件新建任务,下载下来的的却是网页而不是视频.该软件下载视频的其中一个方法,需安装浏览器插件 ...

  4. CorelDRAW常用工具之手绘工具

    对于平面设计师来说,一个好用顺手的手绘工具是必不可少的,CorelDRAW的手绘工具能将手绘笔触转换成平滑的线条或者形状. 1.基础操作 CorelDRAW的手绘工具组包含手绘.2点线.贝塞尔.钢笔. ...

  5. guitar pro 系列教程(十七):Guitar Pro怎么导入音色库?

    前面的章节讲述了关于Guitar Pro相关功能的介绍以及使用,其中也有提到音色库,玩音乐的朋友都知道,音色库是一个乐器的必备,今天小编要跟大家讲的就是关于Guitar Pro音色库是如何导入进去的, ...

  6. 一看就懂的:MySQL数据页以及页分裂机制

    文章公号 首发!连载中~ 欢迎各位大佬关注, 回复:"抽奖" 还可参加抽活动 文末有二维码 一.知识回顾 回顾一下之前和大家分享的知识点 看了前面的文章,想必你肯定了解了什么是Bu ...

  7. js控制某个div在页面加载完成5秒后隐藏

    <div id="k">测试</div><script>setTimeout("document.getElementById('k' ...

  8. 体育成绩统计/ Score

    偏水向,请部分学术控谅解 题目过长,不再描述. 很显然就是一道大模拟对吧,我在这里贡献一下我打此题的思路与过程. 或许有些奇淫巧技可以供一些没有过掉的神犇借鉴一下. 2020.11.26 中午: 昨天 ...

  9. P4771 八百标兵奔北坡

    观察题目中关于北边的定义,发现是以当前点为顶点,向上的倒三角(自己想想为什么). 然后就可以直接 DP 了,令 \(f_{i,j}\) 表示点 \(\left(i,j\right)\) 的答案. \[ ...

  10. 微服务手册:API接口9个生命节点,构建全生命周期管理

    互联网应用架构:专注编程教学,架构,JAVA,Python,微服务,机器学习等领域,欢迎关注,一起学习. 对于API,在日常的工作中是接触最多的东西,特别是我们软件这一行,基本就是家常便饭了,在百度百 ...