text-decoration属性来修饰指定文本

RHZ • 2022-10-22 • Code, 笔记

text-decoration是以下几种属性的简写:

  • text-decoration-line : 线条类型
  • text-decoration-color : 线条颜色
  • text-decoration-style : 线条样式

他常用的值有：

none-默认值-正常文本
inherit-从父类中继承属性
overline-在文本上方绘制水平线
underline-在文本下方绘制水平线
line-through-在文本中绘制水平线（替换HTML <s>标记）
/*html代码*/
<p class="none">什么也没发生</p>
<p class="inherit">我是儿子和我爹一样</p>
<p class="overline">看我上面！</p>
<p class="underline">看我下面！</p>
<p class="line-through">看我自己！</p>
/*css*/
p.none {
   text-decoration: none;
}
p.inherit {
   text-decoration: inherit;
}
p.overline {
   text-decoration: overline;
}
p.underline {
   text-decoration: underline;
}
p.line-through {
   text-decoration: line-through;
}

效果对比：

text-decoration属性来修饰指定文本插图

 可以将underline，overline或line-through组合起来，以添加多条装饰线。

<p><span style="text-decoration: underline">我是</span><span style="text-decoration: overline">一个结合体</span>></p>
text-decoration属性来修饰指定文本插图1

 text-decoration: blink这个值是有效的,可以使文本闪烁，但是被弃用，大多数浏览器忽略它。

这个属性允许对文本设置某种效果，如加下划线。如果后代元素没有自己的装饰，祖先元素上设置的装饰会“延伸”到后代元素中。不要求用户代理支持 blink。

整个代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指定文本装饰</title>
<style>
  p.none {
    text-decoration: none;
  }
  p.inherit {
    text-decoration: inherit;
  }
  p.overline {
    text-decoration: overline;
  }
  p.underline {
    text-decoration: underline;
  }
  p.line-through {
    text-decoration: line-through;
  }
</style>
</head>
<body>
<p class="none">什么也没发生</p>
<p class="inherit">我是儿子和我爹一样</p>
<p class="overline">看我上面！</p>
<p class="underline">看我下面！</p>
<p class="line-through">看我自己！</p>
<p><span style="text-decoration: underline">我是</span><span style="text-decoration: overline">一个结合体</span></p>
</body>
</html>

版权声明：
作者：RHZ
链接：https://www.rhzhz.cn/2022/10/22/text-decoration%e5%b1%9e%e6%80%a7%e6%9d%a5%e4%bf%ae%e9%a5%b0%e6%8c%87%e5%ae%9a%e6%96%87%e6%9c%ac/
来源：RHZ | 用文字记录工作和学习生活
文章版权归作者所有，未经允许请勿转载。

THE END
分享
二维码
海报
text-decoration属性来修饰指定文本
text-decoration是以下几种属性的简写: text-decoration-line : 线条类型text-decoration-color : 线条颜色text-decoration-style : 线条样式 他常……
<<上一篇
下一篇>>