CSS超链接样式和鼠标样式

超链接样式

超链接伪类

语法

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

说明

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

“love hate”。我们把这个顺序规则称为“爱恨原则”。

伪类	说明
a:link	未访问时的样式
a:visited	已访问后的样式
a:hover	鼠标经过时的样式
a: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: green;}a:hover {color: blue;}a:active {color: yellow;}</style></head><body><a href="http://www.baidu.com" target="_blank">baidu</a></body>
</html>

简化超链接样式

通常只有用到2种状态：未访问前的状态和鼠标经过时的状态。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title> </title><style type="text/css">a {color: red;text-decoration: none;}a:hover {color: blue;}</style></head><body><div><a href="http://www.baidu.com" target="_blank">baidu</a></div></body>
</html>

鼠标样式

浏览器鼠标样式

语法

cursor: 取值;

取值

使用

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><style type="text/css">div {width: 100px;height: 30px;line-height: 30px;text-align: center;background-color: hotpink;color: white;font-size: 14px;}#div_default {cursor: default;}#div_pointer {cursor: pointer;}</style></head><body><div id="div_default">鼠标默认样式</div><div id="div_pointer">鼠标手状样式</div></body>
</html>

自定义鼠标样式

语法

cursor:url(图片地址),属性值;

使用

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><style type="text/css">div {width: 100px;height: 30px;line-height: 30px;text-align: center;background-color: grey;color: white;font-size: 14px;}#div_default {cursor: url(img/ic_night.png), default;}#div_pointer {cursor: url(img/ic_day.png), pointer;}</style></head><body><div id="div_default">鼠标默认样式</div><div id="div_pointer">鼠标手状样式</div></body>
</html>

CSS超链接样式和鼠标样式相关推荐

八、pink老师的学习笔记—— CSS用户界面样式（鼠标样式、轮廓线、防止拖拽文本域）
2. CSS用户界面样式所谓的界面样式, 就是更改一些用户操作样式,以便提高更好的用户体验. 更改用户的鼠标样式 (滚动条因为兼容性非常差,我们不研究) 表单轮廓等. 防止表单域拖拽 2.1 鼠标样 ...
css设置字体颜色、文本对齐方式、首行缩进、文本装饰、列表样式、鼠标样式、禁止文本域拖拽、轮廓线、块级元素对齐方式、文字溢出设置
color:设置字体颜色: 取值方式有:1.颜色值red,green等 .2.十六进制#FF0000,#FF2313等.3.RGB代码rgb(225,225,112)或rgb(100%,55%,0%) ...
CSS超链接样式详解
CSS超链接样式详解 1.超链接伪类 2.深入了解:hover :hover用于div :hover用于img 3.鼠标样式浏览器鼠标样式自定义鼠标样式 1.超链接伪类在CSS中,我们可以使用& ...
html中怎么改变鼠标形状,css鼠标样式语法及20种可选值（属性）
我们对Windows各种各样的鼠标样式都不陌生,当鼠标移动到不同的地方时,当鼠标执行不同的功能时,当系统处于不同的状态时,都会使鼠标的形状发生变化.而在网页上往往只有当鼠标在超级链接上时才出现一个手形 ...
鼠标样式(cursor)
css学习地址: http://www.dreamdu.com/css/property_cursor/ cursor -- 定义鼠标样式取值: [ [<uri> ,]* [ auto ...
Flutter Web 鼠标样式修改
在使用Flutter开发Web中为了更好的交互体检,往往会根据需求动态修改鼠标样式. MouseRegion(cursor: judgeMouseCursor(),onEnter: (PointerE ...
CSS超链接样式，去除下划线等
控制超链接样式链接的四种状态: a:link - 普通的.未被访问的链接 a:visited - 用户已访问的链接 a:hover - 鼠标指针位于链接的上方 a:active - 链接被点击的时刻 ...
HTML中设置鼠标悬停状态伪类,四大伪类,css鼠标样式设置,reset操作,静止对文本操作...
本文将要为您介绍的是四大伪类,css鼠标样式设置,reset操作,静止对文本操作,教程操作方法:07.31自我总结一.a标签的四大伪类 a:link{样式} 未访问时的状态(鼠标点击前显示的状态) ...
CSS——美化网页元素（字体样式，文本样式，阴影，超链接伪类，列表，背景，渐变）
为什么要美化网页 1.1有效的传递页面信息 1.2美化网页,页面漂亮,才能吸引用户 1.3凸显页面主题 1.4提高用户体验 span标签:重点要突出的字使用该标签套起来 <!DOCTYPE ht ...

CSS超链接样式和鼠标样式

文章目录

CSS超链接样式和鼠标样式

超链接样式

超链接伪类

简化超链接样式

鼠标样式

浏览器鼠标样式

自定义鼠标样式

CSS超链接样式和鼠标样式相关推荐

最新文章

热门文章