建站之星做出的网站不安全,装修案例英文,网页设计按钮代码模板,php网站开发结构CSS超链接样式详解 1.超链接伪类2.深入了解:hover:hover用于div:hover用于img 3.鼠标样式浏览器鼠标样式自定义鼠标样式 1.超链接伪类
在CSS中#xff0c;我们可以使用“超链接伪类”来定义超链接在鼠标单击的不同时期的样式
语法#xff1a;
a:link{…}
a:visited{…}
a:… CSS超链接样式详解 1.超链接伪类2.深入了解:hover:hover用于div:hover用于img 3.鼠标样式浏览器鼠标样式自定义鼠标样式 1.超链接伪类
在CSS中我们可以使用“超链接伪类”来定义超链接在鼠标单击的不同时期的样式
语法
a:link{…}
a:visited{…}
a:hover{…}
a:active{…}定义4个伪类必须按照“link、visited、hover、active”的顺序进行不然浏览器可能无法正常显示这4种样式 实例
!DOCTYPE html
html langutf-8
headtitle/titlestylea {text-decoration: none;}a:link {color: red;}a:visited {color: purple;}a:hover {color: yellow;}a:active {color: blue;}/style
/head
body
a hrefhttps://www.baidu.com target_blank百度/a
/body
/html2.深入了解:hover
“:hover”伪类可以定义任何一个元素在鼠标经过时的样式
:hover用于div
!DOCTYPE html
html langutf-8
headtitle/titlestylediv {width: 100px;height: 30px;line-height: 30px;text-align: center;color: white;background-color: lightskyblue;}div:hover {background-color: hotpink;}/style
/head
body
divtest/div
/body
/html默认的状态 鼠标移动到div块处div块会变色 :hover用于img
!DOCTYPE html
html langutf-8
headtitle/titlestyleimg:hover {border: 2px solid red;}/style
/head
body
img srchttps://img2.baidu.com/it/u2888988461,4260177699fm253fmtautoapp138fJPEG?w499h281 alt背景图片
/body
/html默认状态下 鼠标移动到图片处图片会自动添加红色边框 3.鼠标样式
在CSS中对于鼠标样式的定义我们有两种方式浏览器鼠标样式和自定义鼠标样式
浏览器鼠标样式
在CSS中我们可以使用cursor属性来定义鼠标样式
语法
cursor:取值;浏览器鼠标样式一览表 实例
!DOCTYPE html
html langutf-8
headstylediv {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;}/styletitle/title
/head
body
div iddiv_default鼠标默认样式/div
div iddiv_pointer鼠标手状样式/div
/body
/html自定义鼠标样式
除了使用浏览器自带的鼠标样式我们还可以使用cursor属性来自定义鼠标样式
语法
cursor:url(图片地址),属性值;这个“图片地址”是鼠标图片地址其中鼠标图片后缀名一般都是“.cur”我们可以使用一些小软件来制作
这个“属性值”一般只会用到3个分别是default、pointer和text。
!DOCTYPE html
html langutf-8
headstylediv {width: 100px;height: 30px;line-height: 30px;text-align: center;background-color: hotpink;color: white;font-size: 14px;}#div_default {cursor: url(xxx), default;}#div_pointer {cursor: url(xxx), pointer;}/styletitle/title
/head
body
div iddiv_default鼠标默认样式/div
div iddiv_pointer鼠标手状样式/div
/body
/html
