美文网首页
【CSS学习笔记12】-文本Text2

【CSS学习笔记12】-文本Text2

作者: 兔小小 | 来源:发表于2023-09-29 23:54 被阅读0次

向文本添加修饰线 text-decoration-line

text-decoration-line属性用于添加文本的装饰行。

h1 {
  text-decoration-line: overline;
}

h2 {
  text-decoration-line: line-through;
}

h3 {
  text-decoration-line: underline;
}

p {
  text-decoration-line: overline underline;
}

不建议为非链接的文本添加下划线,因为这通常会使读者感到困惑。

指定装饰线的颜色 text-decoration-color

h1 {
  text-decoration-line: overline;
  text-decoration-color: red;
}

h2 {
  text-decoration-line: line-through;
  text-decoration-color: blue;
}

h3 {
  text-decoration-line: underline;
  text-decoration-color: green;
}

p {
  text-decoration-line: overline underline;
  text-decoration-color: purple;
}

指定装饰线的样式 text-decoration-style

text-decoration-style属性用于设置装饰线的样式。

h1 { text-decoration-line: underline;
  text-decoration-style: solid; }

h2 { text-decoration-line: underline;
  text-decoration-style: double; }

h3 { text-decoration-line: underline;
  text-decoration-style: dotted; }

p.ex1 { text-decoration-line: underline;
  text-decoration-style: dashed; }

p.ex2 { text-decoration-line: underline;
  text-decoration-style: wavy; }

p.ex3 { text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: wavy; }

指定装饰线的粗细 text-decoration-thickness

h1 {
  text-decoration-line: underline;
  text-decoration-thickness: auto;
}

h2 {
  text-decoration-line: underline;
  text-decoration-thickness: 5px;
}

h3 {
  text-decoration-line: underline;
  text-decoration-thickness: 25%;
}

p {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: double;
  text-decoration-thickness: 5px;
}

简写属性 text-decoration

text-decoration属性是简写属性:

  • text-decoration-line(必填)
  • text-decoration-color(可选)
  • text-decoration-style(可选)
  • text-decoration-thickness(可选)

默认情况下,HTML 中的所有链接都带有下划线。有时你 看到链接的样式没有下划线。text-decoration: none;用于删除链接的下划线,

a {
  text-decoration: none;
}

相关文章

网友评论

      本文标题:【CSS学习笔记12】-文本Text2

      本文链接:https://www.haomeiwen.com/subject/kbcdbdtx.html