首页 >web前端 >html教程 > 正文

html下划线颜色怎么改

原创2021-06-08 15:16:000440

方法: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中文网最新课程二维码

声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理

  • 相关标签:html 下划线
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 专题推荐

    作者信息

    醉折花枝作酒筹

    飞花飘絮,霓裳翩翩舞,几多情愫心飞扬。

    最近文章
    PHP中mysqli的基本操作有哪些961
    等了那么久的PHP代码拯救者Deliverer,来咯!396
    PHP调用其他文件中函数的方法是什么549
    推荐视频教程
  • HTML 中文开发手册HTML 中文开发手册
  • HTML5 Canvas 动画实战教程HTML5 Canvas 动画实战教程
  • HTML+CSS网页基础HTML+CSS网页基础
  • 前端课程(五郞八卦棍系列)第一棍:HTML5前端课程(五郞八卦棍系列)第一棍:HTML5
  • 新独孤九贱之:HTML5极速入坑新独孤九贱之:HTML5极速入坑
  • 视频教程分类