CSS-текст

Здесь мы рассмотрим свойства, которые могут помочь в оформлении текста

Цвет текста

Свойство color используется для задания цвета текста. Чтобы указать цвет, можно использовать название цвета (red), HEX-значение (#ff0000) или значение RGB (rgb (255,0,0) ).

Пример свойства color:.

Пример использования свойства CSS color:

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p style="color:#ff0000">This is some paragraph in red.</p>
  </body>
</html>

Try it Yourself »

Результат

Text Color

Выравнивание текста

Свойство выравнивания используется для выравнивания текста внутри элемента по левому краю, правому краю, по центру и т. д.

Выравнивание текста имеет четыре значения:

Left (text-align: left) - выравнивает текст по левому краю
Right (text-align: right) - выравнивает текст по правому краю
Center (text-align: center) - помещает текст в центр страницы
Justify (text-align: justify) - растягивает строку текста так, чтобы выровнять оба края, левый и правый (как в журналах и газетах)

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

Пример свойства text-alignment:

Пример использования свойства CSS text-alignment:

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>This is some paragraph</p>
    <p style="text-align:center">Some paragraph with value center.</p>
    <p style="text-align:right">Some paragraph with value right.</p>
    <p style="text-align:justify">Some paragraph with value justify.</p>
  </body>
</html>

Try it Yourself »

Оформление текста

Оформление текста используется для задания декора текста. В CSS3 это сокращённая запись для свойств CSS text-decoration-line, CSS text-decoration-color и CSS text-decoration-style.

Свойство decoration используется для указания линий оформления, добавляемых к тексту. Для свойства text-decoration допустимы следующие значения.

Overline (text-decoration:overline) - над каждой строкой текста проводится линия
Underline (text-decoration:underline) - каждая строка текста подчёркивается
Line-through (text-decoration:line-through) - через каждую строку текста проходит линия
None (text-decoration:none) - оформление текста не применяется

Пример свойства text-decoration:

Пример использования свойства CSS text-decoration:

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <a style="text-decoration:none">This is link without underline</a>
    <h1 style="text-decoration:overline">Heading with value overline.</h1>
    <p style="text-decoration:line-through">Some paragraph with value line-through.</p>
    <a style="text-decoration:underline">Some hyperlink with value underline.</a>
  </body>
</html>

Try it Yourself »

Результат

Text Decoration

Преобразование текста

Свойство transform используется для управления регистром текста. Это означает, что можно задать текст в верхнем регистре, нижнем регистре или в виде слов с заглавной буквы (title case).

Свойство transform имеет следующие значения:

Uppercase (text-transform: uppercase) - преобразует все символы в верхний регистр
Lowercase (text-transform: lowercase) - преобразует все символы в нижний регистр
Capitalize (text-transform: capitalize) - преобразует первый символ каждого слова в верхний регистр

Пример свойства text-transform:

Пример использования свойства CSS text-transform:

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p style="text-transform:uppercase">Paragraph with uppercase.</p>
    <p style="text-transform:lowercase">Paragraph with lowercase.</p>
    <p style="text-transform:capitalize">Paragraph with capitalize.</p>
  </body>
</html>

Try it Yourself »

Результат

Text Transform

Тень текста

Мы используем свойство text-shadow, когда хотим добавить тень к тексту.

Свойство shadow используется для применения различных эффектов тени к тексту. Оно принимает список значений. Каждый элемент списка может содержать два и более значений, разделённых запятыми.

Синтаксис свойства text shadow может выглядеть так

Пример свойства CSS text-shadow

css

text-shadow: h-shadow v-shadow blur color

Здесь вы можете увидеть примеры тени текста.

Отступ текста

Свойство text indentation используется для указания длины пустого пространства первой строки в текстовом блоке. Для этого свойства допустимы следующие значения:

Length , которое задаёт отступ в px, pt, cm, em и т. д. Значение по умолчанию — 0. Допускаются отрицательные значения.
Percentage - которое задаёт отступ в процентах от ширины содержащего блока.
Each-line, когда отступ влияет на первую строку, а также на каждую строку после принудительного переноса строки, но не влияет на строки после мягкого переноса.
Hanging, которое инвертирует, какие строки имеют отступ. Первая строка не имеет отступа.
Initial, которое заставляет свойство использовать значение по умолчанию.
Inherit, которое наследует свойство от родительского элемента.

Пример свойства text-indent:

Пример свойства text-indent

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        text-indent: 100px;
        line-height: 24px;
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <h2>Text Indentation Example</h2>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>

Try it Yourself »

Межбуквенный интервал

Свойство CSS letter-spacing позволяет задавать расстояние между буквами/символами в тексте. Это свойство поддерживает следующие значения:

Normal, что означает отсутствие дополнительного расстояния между символами. Это значение по умолчанию для этого свойства.
Length, которое задаёт дополнительный интервал между символами. Допускаются отрицательные значения.
Initial, которое заставляет свойство использовать значение по умолчанию.
Inherit, которое наследует свойство от родительского элемента.

Пример свойства letter-spacing:

Пример свойства letter-spacing

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        text-indent: 100px;
        line-height: 24px;
        font-size: 16px;
        letter-spacing: 5px;
      }
      h3 {
        letter-spacing: -1px;
      }
    </style>
  </head>
  <body>
    <h2>Example of letter-spacing property</h2>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
    <h3>
      Here is some text with letter-spacing property.
    </h3>
  </body>
</html>

Try it Yourself »

Межстрочный интервал

Свойство line-height определяет межстрочный интервал. Оно используется для задания интерлиньяжа строк текста. Если значение line-height больше значения font-size элемента, разница и будет интерлиньяжем текста. Вот значения, поддерживаемые этим свойством:

Normal, которое задаёт нормальный межстрочный интервал. Это значение по умолчанию для этого свойства.
Length, которое задаёт фиксированный межстрочный интервал в px, cm и т. д.
Number, которое задаёт число, умножаемое на текущий размер шрифта для установки межстрочного интервала.
%, которое задаёт межстрочный интервал в процентах от текущего размера шрифта.
Initial, которое заставляет свойство использовать значение по умолчанию.
Inherit, которое наследует свойство от родительского элемента.

Пример свойства line-height:

Пример свойства line-height

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        line-height: 30px;
      }
      h3 {
        line-height: 1;
      }
    </style>
  </head>
  <body>
    <h2>Example of line-height property</h2>
    <p> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. </p>
    <h3>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </h3> 
  </body>
</html>

Try it Yourself »

Интервал между словами

С помощью свойства CSS word-spacing мы можем изменить расстояние между словами в фрагменте текста, а не между отдельными символами. Оно поддерживает следующие значения:

Normal, которое задаёт обычный интервал между словами. Это значение по умолчанию для этого свойства.
Length, которое задаёт дополнительный интервал между словами. Может быть задано в px, pt, cm, em и т. д. Допустимы отрицательные значения.
Initial, которое заставляет свойство использовать значение по умолчанию.
Inherit, которое наследует свойство от родительского элемента.

Пример свойства word-spacing:

Пример свойства word-spacing

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        word-spacing: 1em;
      }
      h3 {
        word-spacing: -3px;
      }
      span {
        display: block;
        word-spacing: 3rem;
      }
    </style>
  </head>
  <body>
    <h2>Example of word-spacing property</h2>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
    <h3>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </h3>
    <span>
    Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.
    </span>
  </body>
</html>

Try it Yourself »

Практика

Какие из следующих свойств можно использовать для управления внешним видом текста в CSS?

CSS-текст ​

Цвет текста ​

Пример свойства color:. ​

Результат ​

Выравнивание текста ​

Пример свойства text-alignment: ​

Оформление текста ​

Пример свойства text-decoration: ​

Результат ​

Преобразование текста ​

Пример свойства text-transform: ​

Результат ​

Тень текста ​

Отступ текста ​

Пример свойства text-indent: ​

Межбуквенный интервал ​

Пример свойства letter-spacing: ​

Межстрочный интервал ​

Пример свойства line-height: ​

Интервал между словами ​

Пример свойства word-spacing: ​

Практика ​

CSS-текст

Цвет текста

Пример свойства color:.

Результат

Выравнивание текста

Пример свойства text-alignment:

Оформление текста

Пример свойства text-decoration:

Результат

Преобразование текста

Пример свойства text-transform:

Результат

Тень текста

Отступ текста

Пример свойства text-indent:

Межбуквенный интервал

Пример свойства letter-spacing:

Межстрочный интервал

Пример свойства line-height:

Интервал между словами

Пример свойства word-spacing:

Практика