css文本属性_CSS文本装饰属性简介

css文本属性

描述 (Description)

This property specifies the decorations that will be applied to the text content of an element. These decorations are rendered in the color specified by the element’s color property.

此属性指定将应用于元素的文本内容的修饰。 这些装饰以元素的color属性指定的颜色呈现。

The text decorations are not technically inherited, but the effect is similar to inheritance. If they’re set on an inline element, they apply to all boxes generated by that element. If they’re set on a block-level element, the setting is applied to an anonymous inline box that encompasses all inline children in the normal flow, and also to all block-level descendants in the normal flow. The decorations are not propagated to floated or absolutely positioned descendants, or to descendant inline tables or inline blocks.

文本修饰在技术上不是继承的，但效果类似于继承。 如果将它们设置在内联元素上，则它们将应用于该元素生成的所有框。 如果将它们设置在块级元素上，则该设置将应用于匿名内联框，该框包含正常流中的所有内联子级，以及正常流中的所有块级后代。 装饰不会传播到浮动或绝对定位的后代，也不会传播到后代内联表或内联块。

Also, text decorations on inline boxes are rendered along the entire box, even if it contains descendant boxes. This, too, may appear similar to inheritance. Any text decoration setting on a descendant box can never “undo” the text decorations of an ancestor box.

同样，即使内联框中包含子孙框，也会在整个框中呈现文本修饰。 这也可能看起来类似于继承。 后代框上的任何文本修饰设置都不能“撤消”祖先框的文本修饰。

例 (Example)

With the following rules applied, unvisited anchor links are bold, but have no underline, visited links have a line through them, and links in the hover or focus state have a line above and below them:

应用以下规则，未访问的锚点链接为粗体，但没有下划线，访问过的链接在它们之间有一条线，而处于悬停或焦点状态的链接在它们之上和之下都有一行：

a:link {
  font-weight: bold;
  text-decoration: none;
}
a:visited {
  font-weight: bold;
  text-decoration: line-through;
}
a:hover, a:focus {
  text-decoration: underline overline;
}

值 (Value)

• line-through – This value draws a horizontal line through the text.
  直通线-此值在文本上绘制一条水平线。
• none – This value produces no text decoration (although it doesn’t undo a decoration that’s set on an ancestor element).
  none –此值不产生文本修饰(尽管它不会撤消设置在祖先元素上的修饰)。
• overline – This value draws a horizontal line above the text.
  上划线-此值在文本上方绘制一条水平线。
• underline – This value draws a horizontal line below the text.
  下划线-此值在文本下方绘制一条水平线。

翻译自: https://www.sitepoint.com/text-decoration-css-property/

css文本属性