В этой статье поговорим о том, как манипулировать текстом с помощью свойств 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>

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



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



We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok