CSS设置超链接以及按钮样式

鳄鱼君Ba

发表文章数:519

热门标签

,

Vieu四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
首页 » CSS和CSS3教程 » 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>

未经允许不得转载:作者:鳄鱼君Ba, 转载或复制请以 超链接形式 并注明出处 鳄鱼君Ba
原文地址:《CSS设置超链接以及按钮样式》 发布于2020-04-09

分享到:
赞(1) 赏杯咖啡

评论 抢沙发

7 + 2 =


文章对你有帮助可赏作者一杯咖啡

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.6主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册