text-decoration特性详细介绍
text-decoration 特性是用来设定文字装饰线呢， text-decoration 特性1共有4个值。
text-decoration特性值表明表
HTML标识自带装饰线
在刚开始实践活动 text-decoration 特性以前，笔者先给大伙儿普及下 HTML 中的标识自带装饰线如： u标识 、 s标识 ，若有不全大伙儿能够在下面评价中告知笔者,终究笔者也是前端开发的1个小白,期待和大伙儿互相沟通交流，互相帮助，相互发展。
u标识
下面让大家进到 u 标识的实践活动， u 标识自带的是文字下划线。
编码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF⑻">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>设定文字装饰线</title>
</head>
<body>
<u>取得成功并不是战胜他人，而是更改自身</u>
</body>
</html>
結果图
留意： u 标识还可以相互配合 HTML 中的别的标识应用，举例：将 u 标识嵌套循环到 h1 标识中应用。
编码块
<h1><u>取得成功并不是战胜他人，而是更改自身</u></h1>
s标识
下面让大家进到 s 标识的实践活动， s 标识自带的是文字删掉线。
编码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF⑻">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>设定文字装饰线</title>
</head>
<body>
<s>取得成功并不是战胜他人，而是更改自身</s>
</body>
</html>
結果图
留意： s 标识还可以嵌套循环，和 u 标识1致，笔者就但是多的详细介绍了。
none除去装饰线
让大家进到 text-decoration 特性的 none 值实践活动，实践活动內容如：笔者将 HTML 网页页面中的 s 标识自带的删掉线给除去掉。
编码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF⑻">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>设定文字装饰线</title>
<style>
s{
text-decoration: none;
}
</style>
</head>
<body>
<s>取得成功并不是战胜他人，而是更改自身</s>
</body>
</html>
結果图
留意： u 标识、 s 标识、包含 text-decoration 特性值的全部的装饰线都可以以去掉哦。
underline设定下划线
让大家进到 text-decoration 特性的 underline 值实践活动，实践活动內容如：笔者将 HTML 网页页面中的 h2 标识中的文字设定1个下划线。
编码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF⑻">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>设定文字装饰线</title>
<style>
h2{
text-decoration: underline;
}
</style>
</head>
<body>
<h2>取得成功并不是战胜他人，而是更改自身</h2>
</body>
</html>
結果图
overline设定上划线
让大家进到 text-decoration 特性的 overline 值实践活动，实践活动內容如：笔者将 HTML 网页页面中的 h2 标识中的文字设定1个上划线。
编码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF⑻">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>设定文字装饰线</title>
<style>
h2{
text-decoration: overline;
}
</style>
</head>
<body>
<h2>取得成功并不是战胜他人，而是更改自身</h2>
</body>
</html>
結果图
line-through设定删掉线
让大家进到 text-decoration 特性的 line-through 值实践活动，实践活动內容如：笔者将 HTML 网页页面中的h2标识中的文字设定1个删掉线。
编码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF⑻">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>设定文字装饰线</title>
<style>
h2{
text-decoration: line-through;
}
</style>
</head>
<body>
<h2>取得成功并不是战胜他人，而是更改自身</h2>
</body>
</html>
結果图
以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。
作者： 笑容是最开始的信念
出处：https://www.cnblogs.com/lq0001/p/11878033.html
版权：本站应用「CC BY 4.0」创作共享资源协议书，转载请在文章内容显著部位注明作者及出处。