CSS基础笔记——超链接样式

在浏览器中，超链接默认情况下字体为蓝色，带有下划线，鼠标单击时字体为红色，单击后为紫色

而在CSS中，我们可以使用超链接伪类来定义超链接在鼠标单击的不同时期的样式

a:link{...}
a:visited{...}
a:hover{...}
a:active{...}

定义四个伪类，必须按照link、visited、hover、active的顺序进行，不然浏览器可能无法正常显示这四种样式

<!DOCTYPE html>
<html><head><meta charset="utf-8"/><title>字体样式</title><style type="text/css">a{text-decoration: none;}a:link{color: red;}a:visited{color: purple;}a:hover{color: yellow;}a:active{color: blue;}</style></head><body><a href="http://www.bilibili.com" target="_blank">BiliBili</a></body>
</html>

text-decoration：none表示去掉下划线

在实际开发中，并不是每一个超链接都必须定义这四种状态下的样式，一般只会用到未访问和鼠标经过时的状态

对于未访问时状态，我们直接针对a元素定义就行了，没必要使用a:link

a{color:red;text-decoration:none;
}
a:hover{color:blue;text-decoration:underline;
}

深入了解：hover

事实上，：hover伪类可以定义任何一个元素在鼠标经过时的样式

举例：":hover"用于div

<!DOCTYPE html>
<html><head><meta charset="utf-8"/><title>字体样式</title><style type="text/css">div{width: 100px;height: 30px;line-height: 30px;text-align: center;background-color: lightblue;}div:hover{background-color: lightcoral;}</style></head><body><div>我爱学习</div></body>
</html>

在鼠标经过一张图片时为其添加边框

<!DOCTYPE html>
<html><head><meta charset="utf-8"/><title>字体样式</title><style type="text/css">img:hover{border: 2px solid skyblue;}</style></head><body><img src="maomao.jpg" alt=""></body>
</html>

：hover伪类应用非常广泛，我们要好好掌握

CSS基础笔记——超链接样式相关推荐

html+css基础笔记_CSS样式_part1_2
1.CSS背景样式属性: background-color:背景色 background-image:背景图 url背景地址,默认水平垂直铺满背景图写法:background-image: url ...
CSS基础笔记——边框样式
在浏览网页的过程中,边框样式随处可见.几乎所有的元素都可以定义边框边框样式有三个属性想要为一个元素定义边框样式,必须要同时设置border-width.border-style.border-co ...
CSS基础笔记（多看多记冲冲冲）
加油加油加油,天天做笔记! 入门跟着黑马的pink老师在b站的视频走的. 这是他的b站链接. https://www.bilibili.com/video/BV14J4114768?p=1 文章目录 ...
妙味课堂——HTML+CSS基础笔记
妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...
CSS基础笔记（w3school）
CSS 概述 CSS 基础语法 1.CSS语法 2.值的不同写法和单位 3.记得写引号 4.多重声明 5.空格和大小写 CSS 高级语法 1.选择器的分组 2.继承及其问题 3.友善地对待Netsca ...
CSS基础(part7)--字体样式属性
学习笔记,仅供参考,有错必纠参考自:CSS中文文档文章目录 CSS CSS的长度单位字体样式属性 font-size font-family font-weight font-style fon ...
CSS之设置超链接样式以及设置鼠标形状
超链接在任意一个网页上都是最基本的元素之一,通过超链接可以实现页面的跳转.功能的激活等,我们来学习如何使用CSS设置超链接的样式定义超链接是使用**标签,用于从一个页面链接到另一个页面, 元素最重要 ...
php超链接样式,html和css中设置超链接样式方法的总结
在之前的文章中我们介绍了关于html中超链接的颜色设置,我们都也知道超链接在网站中都是无处不在的,超链接是跳转到另一个页面的入口,当你把鼠标移动到超链接上,会有颜色或者样式的改变,那么我们今天就给大家 ...
css如何设置超链接样式
css设置超链接样式是通过伪类来实现的 (1) :link:设置a对象在未被访问前的样式表属性. (2) :visited:设置a对象在其链接地址已被访问过时的样式表属性. (3) :hover:设置 ...

CSS基础笔记——超链接样式

深入了解：hover

CSS基础笔记——超链接样式相关推荐

最新文章

热门文章