text-decoration 属性的简单介绍

最新推荐文章于 2024-06-14 20:04:03 发布

Tea-pd

最新推荐文章于 2024-06-14 20:04:03 发布

阅读量2.4k

点赞数 5

文章标签： java servlet 前端

本文链接：https://blog.csdn.net/tea_tea_/article/details/125396759

版权

本文介绍了CSS的text-decoration属性，用于定义文本的修饰，包括下划线、上划线、删除线等。通过示例展示了如何使用text-decoration-line、text-decoration-color和text-decoration-style子属性，以及其在不同元素如链接、标题上的应用。

摘要由CSDN通过智能技术生成

前言：本人是新生小白，如有错误之处欢迎指出

首先第一点我们要知道什么是text-decoration 属性

前言：本人是新生小白，如有错误之处欢迎指出

我们先写一个基础框架

<!DOCTYPE html>
<html>
<head>
    <title>overflow</title>
</head>
<body>
    
</body>
</html>

接下来进行简单介绍

text-decoration 属性是指规定添加到文本的修饰

text-decoration 属性是以下三种属性的简写：

text-decoration-line
text-decoration-color
text-decoration-style

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>text-decoration</title> 
<style>
h1.under {
    text-decoration: underline;
}
h1.over {
    text-decoration: overline;
}
p.line {
    text-decoration: line-through;
}
p.blink {
    text-decoration: blink;
}
a.none {
    text-decoration: none;
}
p.underover {
    text-decoration: underline overline;
}
 
</style>
</head>
 
<body>
<h1 class="under">下划线</h1>
<p class="line">删除线</p>
<p class="blink">闪烁效果，但浏览器不会显示效果</p>
<h1 class="over">下划线</h1>
<p>这是一个 <a class="none" href="#">链接</a>，默认有下划线的</p>
<p class="underover">上划线与下划线</p>
 
</body>
 
</html>