CSS设置链接样式
默认情况下链接显示蓝色,访问过后显示红色。CSS为a元素提供了4个状态伪类选择器:
- a:link,链接的默认样式。
- a:visited,链接已被访问过的样式。
- a:hover,鼠标放在链接上的样式。
- a:active,点击链接时的样式。
链接默认样式存在下划线,可以使用text-decoration属性
设置,我们设置未访问过的链接没有下划线,将鼠标停留和点击链接的样式设置为underline,就是有下划线:
a:link,a:visited{
color:red; /*链接的默认样式为红色*/
text-decoration: none; /*去掉默认链接的下划线*/
}
a:hover,a:active{
color: black;
text-decoration: underline;
}
在规则具有相同的优先级的时候,后一个将会被执行!一般按照顺序定义链接样式:link-visited-hover-active
。
CSS设置下划线样式
CSS可以使用text-decoration属性、border-bottom属性、background属性定义下划线样式。我们可以看一下各自的使用方法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>链接下滑线样式设置</title>
<style type="text/css">
a{
text-decoration: none; /*去掉所有链接的下划线*/
color: #666;
}
a:hover{
color: red; /*鼠标停留在链接时,文字颜色为红色*/
font-weight: bold; /*鼠标停留在链接时,文字加粗*/
}
.underline1 a:hover{
text-decoration: underline; /*鼠标停留在链接时,链接加下划线*/
}
.underline2 a{
border-bottom: solid 1px black; /*链接下划线默认样式为实线1px,黑色 */
}
.underline2 a:hover{
border-bottom: dashed 1px red; /*鼠标停留在链接时,虚线1px红色*/
}
.underline3 a:hover{
background: url("1.jpg") left bottom repeat-x; /*背景图像下划线 左下 x轴平铺*/
}
</style>
</head>
<body>
<ol>
<li class="underline1">
<p>使用text-decoration属性定义下划线样式</p>
<ul>
<li><a href="#">首页</a></li>
</ul>
</li>
<li class="underline2">
<p>使用border属性定义下滑线样式</p>
<ul>
<li><a href="#">首页</a></li>
</ul>
</li>
<li class="underline3">
<p>使用backgound属性定义下划线样式</p>
<ul>
<li><a href="#">首页</a></li>
</ul>
</li>
</ol>
</body>
</html>
可以为下划线添加动态的gif图像,这样就可以是下滑线更加丰富,自行寻找合适的gif图像尝试。一般现在有动态的进度条,非常适合做下划线的背景图像!
CSS定义类型标识样式
类型标识样式,就是链接上角带有图标,由于鳄鱼君比较懒,所以不在进行图片说明,知道使用方法就可以了:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>类型标识样式</title>
<style type="text/css">
a[href="https:"]{ /* 选择href属性以https开头的属性值*/
background:url("1.jpg") no-repeat right top; /*图片不平铺 在右上角*/
}
a[href$=".txt"]{ /*选择href属性以.txt结尾的属性值 */
background: url("2.jpg") no-repeat right top;
}
</style>
</head>
<body>
<p><a href="https://www.e1yu.com">鳄鱼教程</a></p>
<p><a href="#" download="文件名.txt">点击下载TXT文件</a></p>
</body>
</html>
CSS定义链接的按钮样式
设置a链接为按钮样式,只需要把a的display属性设置为block,然后修改width、height和其他属性来创建需要的样式和点击区域:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>链接的按钮样式</title>
<style type="text/css">
body{
font: 140%/1.6 "Gill Sans",Futura,sans-serif;
color: #666;
background: #fff;
}
a:link,a:visited{
display: block; /*该元素以块状元素显示*/
width: 6em; /*块状元素宽度为6em*/
padding: 0.2em;
background-color: #9488E9; /*把背景颜色修改为天蓝色 */
border:solid 1px black; /*块状元素的边框 实线 黑色*/
border-radius: 3px; /*边框圆角*/
color: #000000; /*块状元素文字的颜色*/
text-align: center; /*块状元素文字居中对齐*/
text-decoration: none; /*去掉默认的下划线*/
}
a:hover{ /*鼠标放在链接上的样式*/
background-color: red; /*背景颜色*/
color: blue; /*字体颜色 */
}
</style>
</head>
<body>
<p><a href="https://www.e1yu.com" target="_blank" rel="noopener noreferrer">鳄鱼教程</a></p>
</body>
</html>
声明:1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!