Руководство CSS text-decoration

View more Tutorials:

Pуководства CSS

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

1- CSS text-decoration

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	none (Default) underline overline line-through
text-decoration-style	solid (Default) double dotted dashed wavy
text-decoration-color	HTML 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>

2- CSS text-decoration-line

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>

3- CSS text-decoration-style

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>

4- CSS text-decoration-color

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>

View more Tutorials:

Pуководства CSS