CSS 文字装饰 详解
css3基础 2022-05-23 12:03:11小码哥的IT人生shichen
CSS 文字装饰
文字装饰
text-decoration 属性用于设置或删除文本装饰。
text-decoration: none; 通常用于从链接上删除下划线：
示例代码：
a {
text-decoration: none;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
a {
text-decoration: none;
}
</style>
</head>
<body>
<p>没有下划线的链接：<a href="https://www.phpcodeweb.com">phpcodeweb.com</a></p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
其他 text-decoration 值用于装饰文本：
示例代码：
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
注释：建议不要在非链接文本加下划线，因为这经常会使读者感到困惑。
