CSS基础-链接
链接的状态
- link 没有访问过的
- visited 访问过的
- hover 用户鼠标刚好停留在这个链接上时
- focus 通过TAB键或者编程方法将一个链接选中时
- active 链接被激活时
默认的链接样式
- 链接具有下划线
- link状态是蓝色的
- visited状态是紫色的
- hover状态时光标变成一个小手
- active状态是红色的
- focus状态,用tab键选中链接时,链接周围有一个轮廓
将样式应用到链接
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;
}
在链接中包含图标
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; /*设置右侧内边距,为背景图片留出空间,不与文本重叠*/
}
样式化链接为按钮
<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;
}
CSS基础-链接的更多相关文章
- 前端开发:css基础知识之盒模型以及浮动布局。
前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把 ...
- CSS基础总结
CSS基础总结链接地址:http://segmentfault.com/a/1190000002773955
- HTML5 -入门 (---css样式-------------(css基础与css选择器)---------------------—)
---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在sty ...
- 妙味课堂——HTML+CSS基础笔记
妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- CSS基础(01)
1. Css基础 1.1 CSS(层叠样式表 Multiple Styles) CSS 是 Cascading Style Sheets(层叠样式表)的简称. CSS 语言是一种标记语言,它不需要 ...
- (转)第一天 XHTML CSS基础知识 文章出处:标准之路(http://www.aa25.cn/div_css/902.shtml)
欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准. 学习本系列教程需有一定html和css基础,也 ...
- CSS 基础总结
CSS基础 Doctype 声明位于文档中的最前面,处于 标签之前.告知浏览器的解析器,用什么文档类型 规范来解析这个文档. 在标准模式中,浏览器根据规范呈现页面: 在混杂模式中,页面以一种比较宽松的 ...
- Form标签+Css基础
一.Form表单标签 <form action="" method=""></form> 表单就是用来将用户的信息提交到服务器 ...
随机推荐
- TCP中RTT的测量和RTO的计算 以及 接收缓存大小的动态调整
RTT测量 在发送端有两种RTT的测量方法,但是因为TCP流控制是在接收端进行的,所以接收端也需要 有测量RTT的方法. /* Receiver "autotuning" code ...
- shell中if/seq/for/while/until
1.if语句格式: if 判断条件:then statement1 statement2 fi; 例子: 判断/test/a普通文件是否存在,存在则输出yes,不存在则输出no,并创建. #! / ...
- 在多个浏览器中添加IDM插件
许多朋友下载了IDM(Internet Download Manager)不知如何使用.把包含视频的链接放到软件新建任务,下载下来的的却是网页而不是视频.该软件下载视频的其中一个方法,需安装浏览器插件 ...
- CorelDRAW常用工具之手绘工具
对于平面设计师来说,一个好用顺手的手绘工具是必不可少的,CorelDRAW的手绘工具能将手绘笔触转换成平滑的线条或者形状. 1.基础操作 CorelDRAW的手绘工具组包含手绘.2点线.贝塞尔.钢笔. ...
- guitar pro 系列教程(十七):Guitar Pro怎么导入音色库?
前面的章节讲述了关于Guitar Pro相关功能的介绍以及使用,其中也有提到音色库,玩音乐的朋友都知道,音色库是一个乐器的必备,今天小编要跟大家讲的就是关于Guitar Pro音色库是如何导入进去的, ...
- 一看就懂的:MySQL数据页以及页分裂机制
文章公号 首发!连载中~ 欢迎各位大佬关注, 回复:"抽奖" 还可参加抽活动 文末有二维码 一.知识回顾 回顾一下之前和大家分享的知识点 看了前面的文章,想必你肯定了解了什么是Bu ...
- js控制某个div在页面加载完成5秒后隐藏
<div id="k">测试</div><script>setTimeout("document.getElementById('k' ...
- 体育成绩统计/ Score
偏水向,请部分学术控谅解 题目过长,不再描述. 很显然就是一道大模拟对吧,我在这里贡献一下我打此题的思路与过程. 或许有些奇淫巧技可以供一些没有过掉的神犇借鉴一下. 2020.11.26 中午: 昨天 ...
- P4771 八百标兵奔北坡
观察题目中关于北边的定义,发现是以当前点为顶点,向上的倒三角(自己想想为什么). 然后就可以直接 DP 了,令 \(f_{i,j}\) 表示点 \(\left(i,j\right)\) 的答案. \[ ...
- 微服务手册:API接口9个生命节点,构建全生命周期管理
互联网应用架构:专注编程教学,架构,JAVA,Python,微服务,机器学习等领域,欢迎关注,一起学习. 对于API,在日常的工作中是接触最多的东西,特别是我们软件这一行,基本就是家常便饭了,在百度百 ...