Руководство CSS text-decoration
View more Tutorials:
CSS text-decoration используется для декорации текстового содержания элемента. Формальный синтаксис (formal syntax) у CSS text-decoration просит вам предоставить 3 значения.
Formal Syntax
/* Formal Syntax: */ text-decoration: <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'> /* Example: */ text-decoration: underline dotted red; text-decoration: underline solid blue; text-decoration: line-through solid green;
Примечание: Порядок у (text-decoration-line, text-decoration-style, text-decoration-color) может меняться произвольно.
Formal Syntax
/* Formal Syntax: */ text-decoration: <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'> text-decoration: <'text-decoration-line'> || <'text-decoration-color'> || <'text-decoration-style'> text-decoration: <'text-decoration-style'> || <'text-decoration-color'> || <'text-decoration-line'> ...
<h2 style="text-decoration: underline dotted red;"> text-decoration: underline dotted red; </h2> <h2 style="text-decoration: underline solid blue;"> text-decoration: underline solid blue; </h2> <h2 style="text-decoration: line-through solid green;"> text-decoration: line-through solid green; </h2>
CSS property | Values |
text-decoration-line |
|
text-decoration-style |
|
text-decoration-color |
|
Вы так же можете предоставить CSS text-decoration 1 или 2 значения:
<!-- text-decoration-line --> <h2 style="text-decoration: overline;"> text-decoration: overline; </h2> <!-- text-decoration-line || text-decoration-color --> <h2 style="text-decoration: underline blue;"> text-decoration: underline blue; </h2> <!-- text-decoration-line || text-decoration-style --> <h2 style="text-decoration: line-through dashed;"> text-decoration: line-through dashed; </h2> <!-- text-decoration-line || text-decoration-style || text-decoration-color --> <h2 style="text-decoration: overline wavy green;"> text-decoration: overline wavy green; </h2>
Вместо использования CSS text-decoration вы можете использовать сочетание 3 следующих свойств (property):
- CSS text-decoration-line
- CSS text-decoration-style
- CSS text-decoration-color
text-decoration-example2.html
<!DOCTYPE html> <html> <head> <title>CSS text-decoration</title> <meta charset="UTF-8"/> <style> div { text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: red; } </style> </head> <body> <p style="font-style:italic;"> {<br/> text-decoration-line: underline; <br/> text-decoration-style: wavy; <br/> text-decoration-color: red; <br/> } </p> <div> Some thing Error! </div> </body> </html>
CSS text-decoration-line используется для настройки положения декоративных лини для текстового содержания элемента. Оно может получить одно из следующих значений:
- none (Default)
- underline
- overline
- line-through
<p style="text-decoration-line: none;"> text-decoration-line: none; </p> <p style="text-decoration-line: line-through"> text-decoration-line: line-through </p> <p style="text-decoration-line: underline"> text-decoration-line: underline </p> <p style="text-decoration-line: overline"> text-decoration-line: overline </p>
CSS text-decoration-line принимает одно или более значений:
<p style="text-decoration-line: line-through underline"> text-decoration-line: line-through underline </p> <p style="text-decoration-line: underline overline"> text-decoration-line: underline overline </p> <p style="text-decoration-line: overline line-through underline"> text-decoration-line: overline line-through underline </p>
CSS text-decoration-style используется для настройки стиля линий, созданные с помощью CSS text-decoration-line.
Возможные значения у CSS text-decoration-style:
- solid
- double
- dotted
- dashed
- wavy
<p style="text-decoration-line:underline; text-decoration-style: solid;"> text-decoration-style: solid; </p> <p style="text-decoration-line:underline; text-decoration-style: double;"> text-decoration-style: double; </p> <p style="text-decoration-line:underline; text-decoration-style: dotted;"> text-decoration-style: dotted; </p> <p style="text-decoration-line:underline; text-decoration-style: dashed;"> text-decoration-style: dashed; </p> <p style="text-decoration-line:underline; text-decoration-style: wavy;"> text-decoration-style: wavy; </p>
Примечание: Несмотря на то, что вы можете прикрепить одно или более значений к CSS text-decoration-line, вы можете прикрепить только одно значение к CSS text-decoration-style. Это значит все линии декорированы для содержания определенного элемента с одинаковым стилем.
text-decoration-style-example2.html
<!DOCTYPE html> <html> <head> <title>CSS text-decoration-style</title> <meta charset="UTF-8"/> <style> p { font-size: 120%; text-decoration-line:underline overline; text-decoration-style: wavy; } </style> </head> <body> <h2>CSS text-decoration-style</h2> <p> text-decoration-line:underline overline; text-decoration-style: wavy; </p> </body> </html>
CSS text-decoration-color используется для настройки цвета для линий созданных с помощью CSS text-decoration-line.
Значение CSS text-decoration-color может быть:
- Название цвета, например: red, blue, yellow, ...
- Значение GRB, например GRB(255,255,0),..
- Значение HEX, например #FF00FF.
- currentColor: Цвет прямой линии будет совпадать с цветом текста (Text color) элемента.
- transparent: Настройка прозрачного цвета (transparent) для линии.
/* <color> values */ text-decoration-color: currentColor; text-decoration-color: red; text-decoration-color: #00ff00; text-decoration-color: rgba(255, 128, 128, 0.5); text-decoration-color: transparent; /* Global values */ text-decoration-color: inherit; text-decoration-color: initial; text-decoration-color: unset;
Например:
<p style="text-decoration-line:underline; text-decoration-color: red;"> text-decoration-color: red; </p> <p style="text-decoration-line:underline; text-decoration-color: blue;"> text-decoration-color: blue; </p> <p style="text-decoration-line:underline; text-decoration-color: currentColor;"> text-decoration-color: currentColor; </p>
Примечание: Несмотря на то, что вы можете прикрепить одно или более значений к CSS text-decoration-line, но вы можете прикрепить только одно значение к CSS text-decoration-color. Это значит все линии декорированы для определенного элемента с одинаковым цветом.
<!DOCTYPE html> <html> <head> <title>CSS text-decoration-color</title> <meta charset="UTF-8"/> <style> p { font-size: 120%; text-decoration-line:underline overline; text-decoration-color: blue; } </style> </head> <body> <h2>CSS text-decoration-color</h2> <p> text-decoration-line:underline overline; text-decoration-color: blue; </p> </body> </html>