CSS设置超链接以及按钮样式
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>