CSS控制链接

最新推荐文章于 2021-08-03 21:21:24 发布

周天祥

最新推荐文章于 2021-08-03 21:21:24 发布

阅读量9.2w

点赞数 3

分类专栏： CSS

本文链接：https://blog.csdn.net/u014646662/article/details/49208621

版权

CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

设置链接的样式

能够设置链接样式的 CSS 属性有很多种（例如 color, font-family, background 等等）。

链接的特殊性在于能够根据它们所处的状态来设置它们的样式。

链接的四种状态：

a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻

实例

a:link {color:#FF0000;}		/* 未被访问的链接 */
a:visited {color:#00FF00;}	/* 已被访问的链接 */
a:hover {color:#FF00FF;}	/* 鼠标指针移动到链接上 */
a:active {color:#0000FF;}	/* 正在被点击的链接 */

自定义链接的CSS类

a.类名称:状态

使用顺序

link-visited-hover-active

使用顺序不能错

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>控制连接</title>
<style type="text/css">
a:link {
color: red;
text-decoration: none;
} /* 未被访问的链接 */
a:visited {
color: blue;
} /* 已被访问的链接 */
a:hover {
color: yellow;
} /* 鼠标指针移动到链接上 */
a:active {
color: fuchsia;
} /* 正在被点击的链接 */
input{
width: 200px;
height: 30px;
border: 2px solid gold;
vertical-align: middle;
line-height: 30px;
font-size: 25px;
font-weight: 500;
}
/*获取焦点时的样式*/
input:FOCUS{
background: #ccffcc;
}
</style>
</head>
<body>
<div id="link">
<a href="http://log.csdn.net/u014646662/article/details/49202783">CSS 长度单位</a>|
<a href="http://blog.csdn.net/u014646662/article/details/49202955">CSS在网页的中应用方式</a>|
<a href="http://blog.csdn.net/u014646662/article/details/49202857">CSS 颜色单位</a>|
<a href="http://blog.csdn.net/u014646662/article/details/49202919">CSS控制字体</a>|
<a href="http://www.w3school.com.cn/css/css_link.asp">CSS链接</a>
<br/><br/><br/>
<label>用户名：<input type="text" name="userName"></label><br/><br/>
<label>密码：<input type="text" name="password"></label>
</div>
</body>
</html>

周天祥

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS控制链接

1.链接文本正常显示的状态 a:link 2.鼠标置于链接文本之上 a:hover 3.鼠标按下链接文本 a:active 4.访问过的链接文本状态 a:visited 自定义链接的CSS类a.类名称:状态使用顺序link-visited-hover-active使用顺序不能错
复制链接

扫一扫