今天说下CSS字体装饰文本text-decoration, 该属性规定添加到文本的修饰，可以给文本添加下划线、删除线和上划线等。
具体的语法规则为:
div {
text-decoration:underline;
}
共有四种属性:
none 默认值 没有装饰线(最常用)
underline 下划线 链接a自带下划线(常用)
overline上划线 (基本不用)
line-through 删除线(不常用)
看下效果展示:
下划线展示如上，对应的代码如下:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Document</title>
<style>
/*下划线展示*/
div {
text-decoration: underline;
}
</style>
</head>
<body>
<div>人保好，还是平安好呢？一个是央企，一个是巨头</div>
</body>
</html>
接着是上划线展示:
用的不多，对应的代码如下:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Document</title>
<style>
/*上划线展示*/
div {
text-decoration: overline;
}
</style>
</head>
<body>
<div>人保好，还是平安好呢？一个是央企，一个是巨头</div>
</body>
</html>
当下划线为none时，即不展示下划线。
如果想让带下划线的链接能跳转但是不展示下划线，应该怎么处理呢？
来看看效果:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Document</title>
<style>
/*不展示下划线*/
</style>
</head>
<body>
<div>人保好，还是平安好呢？一个是央企，一个是巨头</div>
<a href=”#”>人保好，还是平安好呢？一个是央企，一个是巨头</a>
</body>
</html>
需要将第二行的下划线效果去掉，我们看下效果:
下划线不展示了，但是可以跳转，看下对应代码:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Document</title>
<style>
/*不展示下划线*/
a {
text-decoration: none;
}
</style>
</head>
<body>
<div>人保好，还是平安好呢？一个是央企，一个是巨头</div>
<a href=”#”>人保好，还是平安好呢？一个是央企，一个是巨头</a>
</body>
</html>
最后再试下删除线，来看下效果:
看下对应的代码:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Document</title>
<style>
/*删除线*/
div {
text-decoration: line-through;
}
</style>
</head>
<body>
<div>人保好，还是平安好呢？一个是央企，一个是巨头</div>
</body>
</html>
四种属性都已经展示了，今天就到这里了，大家晚安~
声明：所有白马号原创内容，未经允许禁止任何网站及个人转载、采集等一切非法引用。本站已启用原创保护，有法律保护作用，否则白马号保留一切追究的权利。发布者：白马号，转转请注明出处：https://www.bmhysw.com/article/37094.html
微信扫一扫 
支付宝扫一扫 
