• 技术文章 >web前端 >html教程

    html下划线颜色怎么改

    醉折花枝作酒筹醉折花枝作酒筹2021-06-08 15:16:00原创57

    方法:1、给元素设置“text-decoration:underline;color:颜色值”样式即可;2、使用border-bottom属性,只需要给元素设置“border-bottom:大小 样式 颜色”样式即可。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    有两个方法

    ● 第一个就是给标签加上一个text-decoration:underline,属性,设置下划线的颜色需要设置元素的color属性,缺点是文字颜色和下划线颜色是一致的,不能单独控制。

    示例:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <title>Document</title>
        <style>
          .css-00F {
            text-decoration:underline;
            color: #090;
          }
        </style>
      </head>
      <body>
        <p>
          css实践之文字下划线颜色-<span class="css-00F">我的下划线与文字为绿色</span>
        </p>
      </body>
    </html>

    效果:

    ]O05UXBYTS77$D8`GAH_%[V.png

    ● 第二个就是给标签加一个底部边框:border-bottom:1px solid red,要想与文字有间距使用padding-bottom属性就可以了!第二种可以单独控制下划线的样式!

    (推荐学习:CSS视频教程)

    在需要改变的文字下划线样式地方,使用css border-bottom下边框样式来变通地实现替代text-decoration下划线样式的效果;通过对文字设置下边框颜色、下边框宽度、下边框虚线或实线等CSS样式控制实现需要各式各样下划线效果。

    示例:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <title>Document</title>
        <style>
          .css-F00 {
            border-bottom: 1px solid #f00;
          }
          .css-00F {
            border-bottom: 1px solid #00f;
            color: #090;
          }
          .css-333 {
            border-bottom: 1px solid #333;
          }
        </style>
      </head>
      <body>
        <p>css实践之文字下划线颜色-<span class="css-F00">我的下划线实现为红色</span></p>
        <p>css实践之文字下划线颜色-<span class="css-00F">我的下划线实现为蓝色,文字为绿色</span></p>
        <p>css实践之文字下划线颜色-<span class="css-333">我的下划线实现为黑色</span></p>
      </body>
    </html>

    效果:

    NVHWE_MUGIBFD]$WGLG~WOF.png

    推荐学习:html视频教程

    以上就是html下划线颜色怎么改的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:html 下划线
    上一篇:html定位有几种方式 下一篇:html中空格怎么打
    第16期线上培训班

    相关文章推荐

    • html中的clear是什么意思• html问号后的值怎么获取• html怎么调用下级目录的图片• html如何进行页面注释• H5和HTML的区别是什么• html定位有几种方式

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网