Свойства текста в CSS

В этой статье поговорим о том, как манипулировать текстом с помощью свойств CSS. Вы можете установить следующие текстовые свойства элемента -

• Свойство color используется для установки цвета текста.
• Свойство direction используется для задания направления текста.
• Свойство letter-spacing используется для добавления или вычитания пробела между буквами, составляющими слово.
• Свойство word-spacing используется для добавления или вычитания пробела между словами предложения.
• Свойство text-indent используется для отступов текста абзаца.
• Свойство text-align используется для выравнивания текста документа.
• Свойство text-decoration используется для подчеркивания, перечеркивания и зачеркивания текста.
• Свойство text-transform используется для прорисовки текста или преобразования текста в прописные или строчные буквы.
• Свойство white-space используется для управления потоком и форматированием текста.
• Свойство text-shadow используется для установки тени текста вокруг текста.

Установка цвета текста

В следующем примере показано, как установить цвет текста. Возможным значением может быть любое имя цвета в любом допустимом формате.

< p style="color:red;">This text will be written in red.< /p>

Это приведет к следующему результату -

Установка направления текста

В следующем примере показано, как задать направление текста. Возможные значения: ltr или rtl .

< html dir="rtl">
   < head>
   < /head>
   < body>
      < p style="direction:rtl;">
      This text will be renedered from right to left
      < /p>
   < /body>
< /html>

Это приведет к следующему результату -

Задание пробела между символами

В следующем примере показано, как установить пространство между символами. Возможные значения - нормальные или число, определяющее пробел.

< html>
   < head>
   < /head>
   < body>
      < p style="letter-spacing:5px;">
      This text is having space between letters.
      < /p>
   < /body>
< /html>

Это приведет к следующему результату -

Как задать пробелы между словами

В следующем примере показано, как установить пространство между словами. Возможные значения - нормальные или число, определяющее пробел.

< html>
   < head>
   < /head>
   < body>
      < p style="word-spacing:5px;">
      This text is having space between words.
      < /p>
   < /body>
< /html>

Это приведет к следующему результату -

Установка текстового отступа

В следующем примере показано, как сделать отступ первой строки абзаца. Возможные значения: % или число, определяющее пространство с отступом.

< html>
   < head>
   < /head>
   < body>
      < p style="text-indent:1cm;">
      This text will have first line indented by 1cm and this line will remain at
      its actual position this is done by CSS text-indent property.
      < /p>
   < /body>
< /html>

Это приведет к следующему результату -

Установка выравнивание текста

В следующем примере показано, как выровнять текст. Возможные значения: левое, правое, центральное, выравнивание.

< html>
   < head>
   < /head>
   < body>
      < p style="text-align:right;">
      This will be right aligned.
      < /p>
     
      < p style="text-align:center;">
      This will be center aligned.
      < /p>
     
      < p style="text-align:left;">
      This will be left aligned.
      < /p>
     
   < /body>
< /html>

Это приведет к следующему результату -

Украшение текста

В следующем примере показано, как украсить текст. Возможные значения: ни один, подчеркивание, надстрочный, линейный, мигающий.

< html>
  < head>
   < /head>
   < body>
      < p style="text-decoration:underline;">
      This will be underlined
      < /p>
      
      < p style="text-decoration:line-through;">
      This will be striked through.
      < /p>
     
      < p style="text-decoration:overline;">
      This will have a over line.
      < /p>
     
      < p style="text-decoration:blink;">
      This text will have blinking effect
      < /p>
   < /body>
< /html>

Это приведет к следующему результату:

Установка изменения вида текста

В следующем примере показано, как установить изменения вида для текста. Возможные значения: нет, заглавные буквы, прописные, строчные.

< html>
   < head>
   < /head>
   < body>
      < p style="text-transform:capitalize;">
      This will be capitalized
      < /p>
     
      < p style="text-transform:uppercase;">
      This will be in uppercase
      < /p>
     
      < p style="text-transform:lowercase;">
      This will be in lowercase
      < /p>
  < /body>
 < /html>

Это приведет к следующему результату:

Установка чистого пространства между текстом

В следующем примере показано, как выполняется свободное пространство внутри элемента. Возможные значения являются normal, pre, nowrap.

< html>
   < head>
   < /head>
   < body>
      < p style="white-space:pre;">
      This text has a line break and the white-space pre setting tells the browser to honor
      it just like the HTML pre tag.< /p>
   < /body>
< /html>

Это приведет к следующему результату -

Установка текстовой тени

В следующем примере показано, как установить тень вокруг текста. Это может не поддерживаться всеми браузерами.

< html>
   < head>
   < /head>
   < body>
      < p style="text-shadow:4px 4px 8px blue;">
      If your browser supports the CSS text-shadow property, this text will have a blue shadow.
      < /p>
   < /body>
< /html>

Это приведет к следующему результату -

Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!