html下划线颜色怎么改

PHP中文网 JavaScript 百度已收录

本文摘自PHP中文网，作者醉折花枝作酒筹，侵删。

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

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

有两个方法

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

示例：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<!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样式控制实现需要各式各样下划线效果。

阅读剩余部分

相关阅读 >>

Html元素的语法与构成

Html里em的标签有什么用

如何从javascript到typescript？

Html怎么设置封面计时

Html文件路径有哪些类型

Html可以做什么

Html乱码怎么办

Html怎么导入图片

Html禁止右键复制功能

htm和Html是什么

更多相关阅读请进入《Html》频道 >>




标签：

打赏

取消

感谢您的支持，我会继续努力的!

扫码支持
扫码打赏，您说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

分享从这里开始，精彩与您同在

相关推荐

评论

管理员已关闭评论功能...