欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

html下划线颜色怎么改

程序员文章站 2022-03-21 17:46:13
...

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

html下划线颜色怎么改

本教程操作环境: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>

效果:

html下划线颜色怎么改

● 第二个就是给标签加一个底部边框: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>

效果:

html下划线颜色怎么改

推荐学习:html视频教程

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

相关标签: html 下划线