CSS text-decoration设置文本下划线上划线删除线以及闪烁的文本属性笔记

原创 国哥笔记  2018-09-25 19:56  阅读 1,165 views 次

text-decoration属性定义及用法

css中,text-decoration属性是用来定义添加到文本的修饰,使用text-decoration属性可以为文本添加下划线、上划线、删除线以及设置闪烁的文本。目前大多数浏览器也支持该属性。

 

text-decoration属性语法格式

Css语法:text-decoration: none \ underline \ overline \ line-through \ blink \ inherit;

JavaScript 语法: object.style.textDecoration="none \ underline \ overline \ line-through \ blink \ inherit";

 

text-decoration属性值说明

  • none:文本没有任何修饰(默认);
  • underline :定义文本下显示一条线;
  • overline:定义文本上显示一条线;
  • line-through:定义穿过文本的一条线;
  • blink :定义闪烁的文本(目前大多数浏览器不支持该属性);
  • Inherit:从父元素继承text-decoration属性的属性值。

 

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS text-decoration设置文本下划线上划线删除线以及闪烁的文本属性笔记</title>
<style type="text/css">
body{background: #ddd;font-size:20px;}
#a,#b,#c,#d{margin-top: 16px;;}
#a{text-decoration: underline;}
#b{text-decoration: overline;}
#c{text-decoration: line-through;}
</style>
</head>
<body>
<div id = "a">double属性值将显示为双线</div>
<div id = "b">dotted属性值将显示为点状线</div>
<div id = "c">dashed属性值将显示为虚线</div>
</body>
</html>

 

运行结果:

CSS text-decoration设置文本下划线上划线删除线以及闪烁的文本属性笔记

 

更多css属性请移步到——>css属性大全

本文地址:https://www.ggbiji.com/css-text-decoration.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情