html下划线颜色怎么改

方法：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>
    

效果：

● 第二个就是给标签加一个底部边框：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下划线颜色怎么改的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！