您的位置:首页 > CSS技巧 > 【 返回上一页

css text-decoration下划线颜色设置

div css布局中text-decoration下划线颜色如何设置?

其实这个CSS问题很简单,因为text-decoration颜色与字体颜色是保持一致的,字体设置什么颜色,那么下划线就是什么颜色的。

接下来我们看看通过对两段文字中分别对一些文字设置不同颜色同时设置下划线样式,我们来观察下是否css字体颜色与下划线样式保持一致。

1、完整HTML+CSS布局下划线颜色与字体颜色实例代码如下

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>设置下划线颜色实例 ThinkCSS</title> 
  6. <style> 
  7. .expa{ text-decoration:underline; color:#F00} 
  8. .expb{ text-decoration:underline; color:#00F} 
  9. </style> 
  10. </head> 
  11. <body> 
  12. 欢迎访问ThinkCSS网,<span class="expa">我被加下划线字体颜色为红色</span><br> 
  13. 欢迎访问ThinkCSS网,<span class="expb">我被加下划线字体颜色为蓝色</span>! 
  14. </body> 
  15. </html> 

对class=expa设置CSS字体颜色为红色;对class=expb设置字体颜色为蓝色,两者同时也是设置下划线。

2、css text-decoration下划线颜色实例效果截图


text-decoration颜色设置实例截图

从上可以看出text-decoration不管是设置下划线还是删除线贯穿线 上划线颜色均是和字体颜色保持一致的,随字体颜色改变而改变并且保持统一的。

扩展了解关于下划线颜色:
css设置下划线颜色与字体颜色不同

相关标签: 颜色 下划线
如需转载,请注明文章出处和来源网址:http://www.thinkcss.com/jiqiao/977.shtml

日期:2016-07-27 21:33:50 来源:www.thinkcss.com 作者:div+css

热门点击