Главная css Стилевые параметры текста

Стилевые параметры текста

CSS для текста

Параметр Значение Описание
letter-spacing

(интервал между буквами)

 : normal (по умолчанию),

: число с указанием единиц измерения

 
<style>
  #p1 (letter-spacing:10pt)
  #p2 (letter-spacing:15pt)
</style>

<body>
  <p id=p1>Раз два три<p>
  <p id=p2>Четыре пять<p>
</body>
text-decoration

(Определяет сочетание текста с горизонтальной линией)

 : none (по умолчанию)
нет линии,

: overline
линия над текстом

: underline
подчеркивание

: line-through
зачеркивание

нет линии

линия над текстом

текст подчеркнут

текст зачеркнут


это ссылка

<style>
a {text-decoration: none;}
a:hover {text-decoration: underline;}
</style>
line-height

(высота текущей строки)

 : none (по умолчанию)

: число
с указанием единиц измерения

 Число без единиц измерения - это коэффициент, на который следует умножить размер текущего шрифта.
Если указаны проценты (%), то д.б. более 100%.
Значение по умолчанию зависит от браузера 

<style>
#p1 (line-height: 20pt)
#p2 (line-height: 1.4)
#p3 (line-height: 150%)
</style>
text-align

(Опрелеляет выравнивание текста относительно содержащего контейнера)

 : left - лево

: right - право

: center - центр

: justify - равномерно
text-indent

(отступ первой строки)

 : 0 (по умолчанию)

: число

 Используется в абзацах для красной строки. В качестве значений принимаются любые единицы длины, например,
пиксели (px),
дюймы (in),
пункты (pt) и др.
При задании значения в процентах (%), отступ первой строки вычисляется в зависимости от ширины блока.
text-transform

(преобразует текст)

 : none (по умолчанию)
Снимает все унаследованные установки

: capitalize
Делает прописной (заглавной) первую букву каждого слова в элементе

: uppercase
Делает все буквы в элементе прописными

: lowercase
Делает все буквы в элементе строчными

 
<style>                    
 p.tr1 {text-transform: capitalize;}
 p.tr2 {text-transform: uppercase;}
</style>

<p class=tr1>текст1 текст2</p>
<p class=tr2>текст1 текст2</p>

текст1 текст2

текст1 текст2
vertical-align

(расположение по вертикали)

 : middle (по умолчанию)
Устанавливает вертикальную среднюю линию элемента на уровне базовой линии родительского элемента с добавлением половины ширины строки последнего.

: baseline
Устанавливает выравнивание базовой линии элемента по базовой линии родительского элемента.

: super
Элеменнт отображается в виде верхнего индекса.

: sub
Элеменнт отображается в виде нижнего индекса.

: text-top
Выравнивает элемент по верху текста, набранного шрифтом родительского элемента.

: text-bottom
Выравнивает элемент по низу текста, набранного шрифтом родительского элемента.

: top
Выравнивает верх элемента по верху самого высокого элемента текущей строки.

: bottom
Выравнивает низ элемента по низу самого низкого элемента текущей строки.
white-space

(устанавливает, как отображать пробелы между словами)

 : normal
Текст в окне браузера выводится как обычно, переносы строк устанавливаются автоматически.

: nowrap
Пробелы не учитываются, переносы строк в коде HTML игнорируются, весь текст отображается одной строкой; вместе с тем, добавление тега <br> переносит текст на новую строку.

: pre
Текст показывается с учетом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки.

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

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

: inherit
Наследует значение родителя.
Перенос текста и пробелы при разных значениях
white-space
Значение Перенос текста Пробелы
normal Переносится Не учитываются
nowrap Не переносится Не учитываются
pre Не переносится Учитываются
pre-line Переносится Не учитываются
pre-wrap Переносится Учитываются


<span style="white-space:nowrap">COVID-19</span>

Слово COVID-19 не разорвется.
text-shadow

(добавляет тень к тексту)

 : none
Отменяет добавление тени.

: цвет
Цвет тени.
По умолчанию цвет тени совпадает с цветом текста.
Необязательный параметр.

: сдвиг по x
Смещение тени по горизонтали относительно текста.
Положительное значение этого параметра задает сдвиг тени вправо, отрицательное — влево.
Обязательный параметр.

: сдвиг по y
Смещение тени по вертикали относительно текста.
Допустимо использовать отрицательное значение, которое поднимает тень выше текста.
Обязательный параметр.

: радиус
Задает радиус размытия тени.
Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0.


/* Параметры тени */
<style>
p.tany {text-shadow: 1px 1px 2px black, 0 0 0.8em #808000;
color: #ffffff; font-size: 20pt;}
</style>

<body>
<p class=teny>Текст с тенью<p>
</body>

Текст с тенью