一 css链接
链接可以利用任何css属性(例如,color,font-family,background等)来设置样式.
其余,链接的样式可以不同,详细取决于所处的状态.以下伪选择器可用:
a:link 定义正常的为访问链接的样式
a:visited 定义访问链接的样式
a:active 一旦点击链接,链接就会激活
a:hover 当鼠标悬停时,链接的样式
下面的例子,创建一个链接,当鼠标移动到它上面的时候会改变样式
html代码:
<p><a href=\"大众https://www.sougou.com\"大众 target=\"大众_blank\公众>搜狗</a></p>
css代码:
a:hover{ color:red; }
实行结果如下:
这是鼠标移动到链接上时,显示的样式
当为链接设置样式时,必须遵守以下规则:
a:hover 必须在a:link和a:visited之后
a:active 必须在a:hover之后
默认情形下,文本链接由浏览器加下划线.
处理带链接的文本,css最常见的用法之一是删除下划线.不才面的示例中,text-decoration属性用于删除下划线.
html代码:
<p><a class=\"大众text-decoration\公众 href=\"大众https:www.sougou.com\"大众>我的下划线已经被删除了!</a></p>
css代码:
a.text-decoration:link{text-decoration:none;}
效果如下:
以下属性用于掌握链接的样式:
border:none 从包含链接的图像中删除边框
outline:none 删除IE中点击链接行上的虚线边框
二 css自定义鼠标光标样式
css许可你将鼠标悬停在元素上时,设置所需的光标样式.例如,你可以将光标变动为手形图标,帮助图标等.而不是默认的指针.
不才面的例子中,当我们将鼠标移动到span元素上时,鼠标指针被设置为一个帮助图标.(cursor便是光标的意思)
<span style=\"大众cursor:help;\公众>须要帮忙么?</span>
效果如下:
cursor属性还有许多其他的值.例如:
default:默认光标
crosshair:光标显示为十字准线
pointer:光标显示为手形图标
cursor的值比较多,用图片显示给大家:
常日改变鼠标光标的外不雅观,是为了提高网站访问者的体验.但是,选择缺点的光标风格也可能会引起误解.
