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的<canvas>标签作用

Html 的<title> 标签

Html怎么自定义列表

Html中的段落文本如何换行？一篇文章告诉你换行标签br的用法

Html style标签怎么用

图文详解<img>标签中alt属性和title属性的区别

Html的<style>标签

Html中div标签有什么作用

Html提交按钮怎么改字

Html的基本结构有哪些

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




标签：

打赏

取消

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

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

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

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

相关推荐

评论

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