Стилевые свойства текста

Свойства CSS, используемые для стилизации текста, принято подразделять на две категории:

Font styles — свойства, устанавливающие характеристики шрифта: размер, начертание, насыщенность и т.п.
Text layout styles — свойства, определяющие особенности компоновки текста: выравнивание в блоке, размеры межстрочных и межсимвольных интервалов и т.п.

Рассмотрим эти категории свойств подробнее.

Свойства для установки характеристик шрифта

Установка семейства шрифта

Установить семейство шрифта, которое будет использовано для оформления текста содержимого элемента, позволяет свойство font-family. Свойство применяется ко всем элементам (а также к псевдоэлементам ::first-letter и ::first-line) и наследуется потомками (см. спецификацию).

В качестве значения данного свойства указывается список шрифтов (иногда его ещё называют стеком шрифтов), который может включать одно или несколько названий, разделённых запятой. Если в названии шрифта содержатся цифры, небуквенные символы («#», «$», «%» и др.) или символы пунктуации, оно должно заключаться в одинарные или двойные кавычки.

Названия шрифтов в списке должны размещаться в порядке убывания приоритета — первым указывается тот, который наиболее желателен для использования, последним — тот, что наименее желателен. Учитывая приоритет, браузер выберет из этого списка тот шрифт, который имеется на компьютере или может быть загружен с помощью директивы @font-face (если таковая используется в таблице стилей).

Заканчивается список рекомендуемых шрифтов, как правило, одним или несколькими стандартными ключевыми словами, определяющими общие семейства шрифтов:

serif — шрифты с засечками (антиквенные). Типичными представителями являются: Times New Roman, Times, Garamond, Georgia;
sans-serif — рубленные шрифты (шрифты без засечек или гротески). Типичными представителями являются: Helvetica, Geneva, Arial, Verdana, Trebuchet, Univers;
cursive — курсивные (рукописные) шрифты. Типичными представителями являются: Comic Sans, Gabriola, Monotype Corsiva, Author, Zapf Chancery;
fantasy — декоративные (аллегорические) шрифты. Типичными представителями являются: Western, Woodblock, Klingon;
monospace — моноширинные шрифты. Ширина каждого символа в таком семействе одинакова. Сюда относятся шрифты: Courier, Courier New, Andele Mono и т.п.;
system-ui — глифы из шрифта пользовательского интерфейса, используемого по умолчанию на данной платформе.

Наличие такого ключевого слова в конце списка позволяет браузеру подобрать подходящий «запасной» шрифт из имеющихся на компьютере, если ни один из указанных веб-разработчиком шрифтов на компьютере не установлен.

Пример указания семейства шрифтов для абзацев:

p {
  font-family: Arial, Helvetica, Verdana, sans-serif;
}

Если разработчику не важно, какой конкретно шрифт будет использован в абзацах, он может указать только имя семейства шрифта:

p {
  font-family: sans-serif;
}

Надо заметить, что только использование таких имён как serif, sans-serif и monospace даёт вполне предсказуемый результат и обеспечивает что-то разумное. Результат же использования имён cursive и fantasy является менее предсказуемым, а потому следует применять их с осторожностью, проверяя по ходу дела.

В технической литературе часто встречается такой термин как «веб-безопасные шрифты». Под этим термином понимаются шрифты, которые могут быть использованы без особого беспокойства в силу их доступности и распространённости во всех (или почти во всех) операционных системах. На сегодняшний день к таким шрифтам можно отнести шрифты Arial, Courier New, Georgia, Times New Roman, Trebuchet MS и Verdana. Актуальный список веб-безопасных шрифтов, доступных в операционных системах Windows и macOS, и подробную информацию об этих шрифтах можно найти на сайте www.cssfontstack.com.

Установка размера шрифта

Установить размер шрифта, который будет использован для оформления текста содержимого элемента, позволяет свойство font-size. Оно может применяться ко всем элементам (а также к псевдоэлементам ::first-letter и ::first-line) и наследуется потомками (см. спецификацию).

Указать размер шрифта можно несколькими способами. В качестве значений свойства font-size разрешается использовать любые положительные (целые и дробные) числовые значения с любыми допустимыми в CSS единицами измерения (pt, px и др.). Для дочерних элементов можно также использовать процентные значения (за 100% берётся размер шрифта родительского элемента), либо относительные размеры в таких единицах как em и ex.

Пример использования числового значения для указания размера шрифта:

body {
  font-size: 14px;
}

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

xx-small — сверхмелкий размер шрифта;
x-small — очень маленький размер шрифта;
small — маленький размер шрифта;
medium — средний размер шрифта (значение по умолчанию);
large — большой размер шрифта;
x-large — очень большой размер шрифта;
xx-large — огромный размер шрифта;
smaller — меньший размер шрифта в сравнении с родительским элементом;
larger — больший размер шрифта в сравнении с родительским элементом;
inherit — наследовать значение от родительского элемента.

Первые семь ключевых слов из вышеприведённого списка задают абсолютный размер шрифта, по отношению к пользовательскому размеру по умолчанию (им считается medium). Два предпоследних ключевых слова устанавливает относительные размеры шрифта.

Пример использования ключевого слова для указания размера шрифта:

p.note {
  font-size: small;
}

Примечание: Согласно спецификации CSS2, коэффициент масштабирования между двумя соседними абсолютными размерами, заданными с помощью ключевых слов, должен составлять примерно 1,2 при переходе от меньшего к большему и 0,66 при переходе от большего к меньшему. Таким образом, если размер medium соответствует, например, 10px, то large должен соответствовать примерно 12px (точное значение зависит от браузера, так как конкретные значения коэффициента масштабирования устанавливаются производителями браузеров).

Установка начертания шрифта

Установить нормальное, курсивное или наклонное начертание шрифта, которое будет использовано для оформления текста содержимого элемента, позволяет свойство font-style. Свойство может применяться ко всем элементам (а также к псевдоэлементам ::first-letter и ::first-line) и наследуется потомками (см. спецификацию).

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

normal — обычное начертание текста (значение по умолчанию);
italic — курсивное начертание текста;
oblique — наклонное начертание текста;
inherit — наследовать значение от родительского элемента.

Пример установки начертания шрифта:

.special {
  font-style: italic;
}

Примечание: Когда для текста в стилях установлено курсивное или наклонное начертание, браузер обращается к системе для поиска подходящей версии шрифта. Если заданная версия шрифта не найдена, браузер использует специальный алгоритм для имитации нужного вида текста. Например, если не доступна курсивная версия шрифта, предпринимается попытка использовать классификацию oblique. Если не доступна наклонная версия шрифта, предпринимается попытка использовать классификацию italic. Если не одна версия не доступна, то браузер пытается симулировать стиль искусственно.

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

Установить степень насыщенности (жирности) шрифта, которая будет использована для оформления текста содержимого элемента, позволяет свойство font-weight. Оно может применяться ко всем элементам (а также к псевдоэлементам ::first-letter и ::first-line) и наследуется потомками (см. спецификацию).

Для свойства допускаются значения от 100 до 900 с шагом 100. Сверхсветлое (то есть сверхтонкое) начертание, которое может отобразить браузер, имеет значение 100, а сверхжирное — 900.

Допускается также в качестве значений использовать ключевые слова:

lighter — более светлое (тонкое) начертание текста (начертание изменяется относительно насыщенности шрифта родительского элемента);
normal — нормальное начертание текста (значение по умолчанию; соответствует числовому значению 400);
bold — полужирное начертание текста (соответствует числовому значению 700);
bolder — более жирное начертание текста (начертание изменяется относительно насыщенности шрифта родительского элемента);
inherit — наследовать значение от родительского элемента.

Пример установки насыщенности шрифта:

.daring {
  font-weight: bold;
}

При использовании ключевых слов lighter и bolder для вычисления абсолютного значения насыщенности используется следующая таблица:

Насыщенность шрифта родительского элемента	Значение, соответствующее `bolder`	Значение, соответствующее `lighter`
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700

Если же в качестве значения свойства используется цифровое значение и данное значение насыщенности для шрифта недоступно (не у всех шрифтов есть весь набор градаций жирного!), задание толщины отображаемого шрифта осуществляется по следующему алгоритму:

Если задано значение выше 500, будет использовано первое доступное более жирное начертание (если такого не окажется, то первое доступное более светлое).
Если задано значение менее 400, будет использовано первое доступное более светлое начертание (если такого не окажется, то первое доступное более жирное).
Если задано значение 400, будет применено 500. Если 500 недоступно, то будет использован алгоритм для подбора значений менее 400.
Если задано значение 500, будет применено 400. Если 400 недоступно, то будет использован алгоритм для подбора значений менее 400.

Это означает, что для шрифтов, которые имеют только начертания normal и bold, значениям от 100 до 500 будет соответствовать normal, а значениям от 600 до 900 будет соответствовать bold.

Установка варианта шрифта

Установить, как браузер должен представлять строчные буквы – оставить их без модификаций или конвертировать в прописные уменьшенного размера – позволяет свойство font-variant. Свойство может применяться ко всем элементам (а также к псевдоэлементам ::first-letter и ::first-line) и наследуется потомками (см. спецификацию).

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

normal — не модифицировать (значение по умолчанию);
small-caps — конвертировать строчные буквы в прописные уменьшенного размера;
inherit — наследовать значение от родительского элемента.

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

Пример установки варианта шрифта:

.firm {
  font-variant: small-caps;
}

Универсальное свойство font

Для указания сразу всех параметров шрифта, о которых говорилось выше, ещё в первой версии стандарта CSS было введено универсальное свойство font. Оно может применяться ко всем элементам (а также к псевдоэлементам ::first-letter и ::first-line) и наследуется потомками (см. спецификацию).

Синтаксис свойства:

font: [<font-style>||<font-variant>||<font-weight>] <font-size>[/<line-height>] <font-family>

где

<font-style> — значение, определяющее начертание (стиль) шрифта;
<font-variant> — значение, определяющее вариант шрифта (стандартный или капитель);
<font-weight> — значение, определяющее насыщенность (жирность) шрифта;
<font-size> — значение, определяющее размер шрифта;
<line-height> — значение, определяющее высоту строки текста;
<font-family> — значение, определяющее семейство шрифта.

Надо заметить, что группировка значений и порядок их следования в записи свойства определены стандартом. Первыми нужно указывать значения стиля, жирности и варианта шрифта (в любом порядке), за которыми должны следовать размер шрифта и высота строки, разделённые слэшем («/»), и последним задаётся семейство шрифта. Из всех значений обязательными являются размер и семейство шрифта; прочие могут быть опущены. Более подробно о каждом из этих значений (кроме <line-height>) я уже рассказывал выше при рассмотрении соответствующих свойств шрифта. О значении <line-height> речь пойдёт чуть далее.

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

em {
  font: italic 14pt Times;
}

h1 {
  font: 24pt/48pt sans-serif
}

code {
  font: 12pt Courier, monospace
}

.note {
  font: 80% sans-serif
}

Если требуется создать веб-страницу, гармонирующую с операционной системой пользователя, очень кстати оказываются так называемые значения системных шрифтов свойства font. Они применяются, чтобы взять размер, семейство, насыщенность, стиль и вариант шрифта элементов операционной системы и применить их к элементу.

Вот несколько значений системных шрифтов:

caption — применяется для элементов управления, имеющих надпись, таких как кнопка;
icon — применяется для подписи значков;
menu — используется в выпадающих меню и списках меню;
message-box — используется в диалоговых окнах;
small-caption — используется для небольших элементов управления;
status-bar – применяется в строках состояния окон.

Например, если требуется сделать шрифт кнопки на сайте таким же, как и у кнопок операционной системы, необходимо написать следующее правило:

button {
  font: caption;
}

Обратите внимание, что системные шрифты можно задавать только как единое целое, то есть семейство шрифта, размер, насыщенность, стиль и т.д. – всё это задаётся одним ключевым словом. Поэтому текст кнопки из вышеприведённого примера будет выглядеть совершенно так же, как и текст кнопки операционной системы, независимо от того, соответствует ли этот размер содержимому, располагающемуся вокруг кнопки, или нет. Тем не менее, даже задав системный шрифт, отдельные значения можно менять. Например, применение следующего правила сделает размер шрифта кнопки таким же, как у родительского элемента:

button {
  font: caption;
  font-size: 1em;
}

Примечание: Если задан определённый системный шрифт, а на машине пользователя такого шрифта нет, браузер может попытаться выполнить некоторое приближение, например, уменьшить размер шрифта caption, чтобы получить шрифт small-caption. Если такая аппроксимация невозможна, браузер должен взять собственный, применяемый по умолчанию шрифт.

Свойства для установки характеристик текста

Установка межстрочного интервала

Свойство line-height появилось ещё в первой версии стандарта CSS. Оно может применяться ко всем элементам (а также к псевдоэлементам ::first-letter и ::first-line) и наследуется потомками (см. спецификацию).

Данное свойство устанавливает высоту так называемых блоков строк (см. рис. ниже) в блочном элементе, тем самым определяя минимальную высоту этого блочного элемента.

Если размер line-height устанавливается для строчного элемента (например, для элемента <span>) и этот размер больше размера line-height, установленного в родительском блочном элементе (например, в абзаце), то высота той строки, в которой находится строчный элемент, будет определяться размером line-height строчного элемента (см. рис. ниже).

Но основным предназначением свойства line-height является не установка вертикальных размеров элементов, а регулировка размера межстрочного интервала — расстояния между текстовым содержимым двух соседних строк (см. рис. ниже).

Текст, имеющий слишком маленькие или слишком большие межстрочные интервалы, читается с большим трудом. Свойство line-height позволяет подобрать оптимальную величину интервала и сделать текст более лёгким для восприятия.

В качестве значений свойства line-height принимаются любые единицы длины, принятые в CSS — пикселы (px), пункты (pt) и др. Разрешается использовать процентную запись (в этом случае за 100% берётся высота шрифта). Любое положительное число, отличное от нуля, без единицы измерения воспринимается как коэффициент масштабирования от размера шрифта текущего текста.

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

code, kbd, pre, samp, tt {
  font-family: Consolas, Monaco, Lucida Console, monospace;
  font-size: 14px;
  line-height: 1;
  vertical-align: baseline;
}

Предпочтительным способом указания значения line-height в большинстве случаев является использование коэффициента масштабирования, так как данный способ позволяет избежать непредвиденных результатов при наследовании.

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

normal — вернуться к использованию значения по умолчанию. Значением по умолчанию в большинстве браузеров является коэффициент масштабирования примерно равный 1.2 (точное значение зависит от семейства шрифта);
inherit — наследовать значение от родительского элемента.

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

Изменить интервал между символами (межбуквенный интервал) позволяет свойство letter-spacing. Свойство может применяться ко всем элементам (а также к псевдоэлементам ::first-letter и ::first-line) и наследуется потомками (см. спецификацию).

В качестве значений свойства принимаются любые единицы длины, принятые в CSS — пикселы (px), пункты (pt) и др. Однако наилучший результат даёт использование относительных единиц основанных на размере шрифта (em и ex). Причём допускается использовать отрицательные значения, но в этом случае необходимо убедиться, что сохраняется читабельность текста.

Примечание: Значение, указанное в свойстве letter-spacing, определяет дополнительное (!!!) расстояние, добавляющееся к стандартному расстоянию между символами.

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

normal — вернуться к использованию стандартного значения межсимвольного интервала;
inherit — наследовать значение от родительского элемента.

Обычно свойство letter-spacing используется для увеличения межбуквенного интервала в заголовках, набранных прописными буквами, потому что, когда заглавные буквы расположены рядом, расстояние между ними оказывается слишком тесным. Кроме того, увеличивать интервал обычно приходится в светлых текстах, набранных на тёмном фоне.

Пример записи свойства:

h1 {
  letter-spacing: 0.4em;
}

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

Изменить интервал (длину пробела) между словами позволяет свойство word-spacing. Оно может применяться ко всем элементам (а также к псевдоэлементам ::first-letter и ::first-line) и наследуется потомками (см. спецификацию).

В качестве значений свойства принимаются любые единицы длины, принятые в CSS — пикселы (px), пункты (pt) и др. Допускается использовать отрицательные значения, но в этом случае необходимо убедиться, что сохраняется читабельность текста.

Примечание: Значение, указанное в свойстве word-spacing, определяет дополнительное (!!!) расстояние, добавляющееся к внутреннему интервалу между словами, определяемому шрифтом и/или браузером.

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

normal — вернуться к использованию внутреннего интервала между словами, определяемого шрифтом и/или браузером;
inherit — наследовать значение от родительского элемента.

Пример записи свойства:

h1 {
  word-spacing: 1em;
}

Установка размера отступа первой строки текста

Создать «красную строку» в начале текстового блока позволяет свойство text-indent. Оно управляет отступом первой строки блока. Значением по умолчанию является 0. Свойство может применяться ко всем блочным элементам и наследуется потомками (см. спецификацию).

В качестве значений свойства могут использоваться любые единицы длины, принятые в CSS — пикселы (px), дюймы (in), пункты (pt) и др. При задании значения в процентах, отступ первой строки вычисляется в зависимости от ширины блока. Ключевое слово inherit в качестве значения указывает, что величина отступа наследуется от родителя.

Для свойства допустимо использование отрицательных значений, но при этом в разных браузерах возможно появление ошибок (следует проверять, чтобы текст не выходил за пределы окна браузера). Во избежание неприятностей при создании отрицательных абзацных отступов рекомендуется применять поля:

p {
  text-indent: -4em;
  padding-left: 4em;
}

Надо заметить, на практике свойство text-indent используется крайне редко, так как «красная строка» в абзацах гармонично смотрится только при условии выравнивания текста по обоим краям блока, а данный способ выравнивания на сайтах практически не применяется.

Установка способа выравнивания текста по горизонтали

Способ горизонтального выравнивания текста и другого линейного содержимого в пределах блочного элемента определяется свойством text-align. Свойство может применяться ко всем блочным элементам и наследуется потомками (см. спецификацию).

В качестве значения свойства используются следующие ключевые слова:

left — выравнивать содержимое по левому краю (значение по умолчанию);
center — выравнивать содержимое по центру;
right — выравнивать содержимое по правому краю;
justify — выравнивать содержимое по ширине (одновременное выравнивание по левому и правому краю);
inherit — наследовать значение от родительского элемента.

Чаще всего тексты на веб-страницах выравнивают по одному краю. Тексты на европейских языках, чтение которых осуществляется слева на право, выравниваются по левой стороне блока. Гармонично с таким текстом смотрится и «прижатый» к тому же краю заголовок.

Выравнивание по центру обычно используется для заголовков к текстам, выровненным по обоим краям сразу. Однако такое выравнивание текста на сайтах встречается очень редко.

Установка способа выравнивания содержимого по вертикали

Способ вертикального выравнивания содержимого в пределах элемента определяется свойством vertical-align. Свойство не является наследуемым. Оно может применяться к строчным и замещаемым элементам (изображениям и полям ввода формы), а также для выравнивания содержимого ячеек таблицы (см. спецификацию).

При использовании свойства vertical-align для вертикального позиционирования области строчного элемента внутри области содержащей его строки значениями свойства могут быть следующие ключевые слова:

baseline — выравнивать базовую линию текущего элемента по базовой линии родителя (значение по умолчанию). Если родительский элемент не имеет базовой линии, то за неё принимается нижняя граница элемента;
bottom — выравнивать нижний край элемента и его потомков с нижним краем всей строки;
middle — выравнивать середину элемента с базовой линией родителя плюс половина высоты родительского элемента (0,5ex или примерно 0,4em);
sub — выравнивать базовую линию элемента с базовой линией подстрочного индекса родителя. Элемент будет отображаться в виде нижнего индекса. Размер шрифта при этом не меняется;
super — выравнивать базовую линию элемента с базовой линией надстрочного индекса родителя. Элемент будет отображаться в виде верхнего индекса. Размер шрифта остается прежним;
text-bottom — выравнивать нижнюю границу элемента по самому нижнему выступающему элементу текстовой строки;
text-top — выравнивать верхнюю границу элемента по самому высокому текстовому элементу текущей строки;
top — выравнивать верхний край элемента и его потомков с верхним краем всей строки;
inherit — наследовать значение родителя.

В качестве значения свойства также можно использовать пиксели, проценты или другие доступные CSS-единицы. Положительное число смещает элемент вверх относительно базовой линии, в то время как отрицательное число опускает его вниз. Значение в процентах вычисляется относительно значения свойства line-height, при этом 0% аналогично значению baseline.

Примечание: Для выравниваемых элементов, у которых нет базовой линии (например, для элементов <img>), вместо базовой линии используется нижняя граница внешнего отступа (margin-bottom).

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Example</title>
  </head>
  <body>
    <p>П<span style="vertical-align: super">Р</span>И<span
       style="vertical-align: sub">В</span>Е<span
       style="vertical-align: super">Т</span>!</p>
  </body>
</html>

Результат в браузере:

При использовании свойства vertical-align для вертикального позиционирования содержимого ячейки таблицы значениями свойства могут быть следующие ключевые слова:

baseline — выравнивать базовую линию ячейки с базовой линией первой текстовой строки или другого вложенного элемента (значение по умолчанию);
bottom — выравнивать нижнюю границу внутреннего отступа (padding-bottom) ячейки с нижним краем строки таблицы (выравнивание по нижнему краю ячейки);
middle — выравнивать внутреннее поле ячейки по центру относительно строки таблицы (выравнивание по середине ячейки);
top — выравнивать верхнюю границу внутреннего отступа (padding-top) ячейки с верхним краем строки таблицы (выравнивание по верхнему краю ячейки).

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

Сделать текст подчёркнутым, перечёркнутым или добавить линию над текстом позволяет свойство text-decoration, появившееся ещё в CSS1. Свойство может применяться к любым элементам (а также к псевдоэлементам ::first-letter и ::first-line), но не наследуется потомками (см. спецификацию).

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

line-through — отображать текст перечёркнутым (пример);
overline — отображать линию над текстом (пример);
underline — отображать текст подчёркнутым (пример);
none — отменить ранее установленные эффекты;
inherit — наследовать значение от родительского элемента.

Значения line-through, overline и underline могут использоваться в свойстве одновременно для создания сразу трёх эффектов (пример). В этом случае они записываются через пробел в любом порядке.

Значение none может служить не только для отмены всех ранее установленных эффектов, но и для удаления подчёркивания у ссылок, которое устанавливается браузером по умолчанию.

Пример записи свойства:

.underlined-text {
  text-decoration: underline;
}

Примечание: Особенность реализации оформления с помощью свойства text-decoration заключается в том, что при установке подчёркивания, зачёркивания или надчёркивания для элемента-контейнера данное оформление будет распространяться на всё текстовое содержимое этого элемента, в том числе и на то, которое находится в дочерних элементах. То есть, если мы установим подчёркивание, например, для абзаца, то будет подчёркнут весь текст, в том числе находящийся в строчных элементах <span>, <code> и других, присутствующих в данном абзаце. И даже если для этих конкретно дочерних элементов мы установим правило text-decoration: none, это ничего не изменит.

В черновике спецификации «CSS Text Decoration Module Level 3» для свойства text-decoration рекомендованы к использованию ещё несколько дополнительных значений, позволяющих изменять стиль, цвет и толщину линий. Я не стал в рамках данной статьи рассматривать эти значения, так как технологии их использования окончательно ещё не стабилизировались и не всеми браузерами они поддерживаются.

Ещё одним свойством, отвечающим за оформление, является свойство text-shadow, которое служит для добавления к тексту тени и установки её параметров. Оно может применяться ко всем элементам (а также к псевдоэлементам ::first-letter и ::first-line) и наследуется потомками (см. спецификацию).

Синтаксис свойства:

text-shadow: <цвет> <сдвиг_по_X> <сдвиг_по_Y> <радиус_размытия>

где

<цвет> — цвет тени в любом доступном для CSS формате. По умолчанию цвет тени совпадает с цветом текста. Параметр является необязательным. Он может быть определён как до, так и после значений смещений;
<сдвиг_по_X> — смещение тени по горизонтали относительно текста в единицах длины, принятых в CSS. Положительное значение этого параметра задает сдвиг тени вправо, отрицательное — влево. Параметр является обязательным. Если смещать тень не предполагается, следует записать 0;
<сдвиг_по_Y> — смещение тени по вертикали относительно текста в единицах длины, принятых в CSS. Положительное значение этого параметра задает сдвиг тени вниз, отрицательное — вверх. Параметр является обязательным. Если смещать тень не предполагается, следует записать 0;
<радиус_размытия> — задаёт радиус размытия тени в единицах длины, принятых в CSS. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Параметр является необязательным, значение по умолчанию равно нулю.

Допускается создание для текста сразу нескольких теней, параметры которых при этом перечисляются через запятую (см. пример ниже). Если определены больше чем одна тень, тени накладываются друг на друга в порядке обратном порядку их определения, что значит, первая тень окажется поверх последующих.

Пример создания теней:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Example</title>
    <style>
      .shadowtext {
        text-shadow: black 1px 1px 2px, red 0 0 1em;  /* Параметры теней */
        color: white;                                 /* Белый цвет текста */
        font-size: 2em;                               /* Размер надписи */
      }
    </style>
  </head>
  <body>
    <p class="shadowtext">Метут снега, метут по всей России.</p>
  </body>
</html>

Результат в браузере будет следующим:

Для отключения эффекта тени в качестве значения свойства text-shadow используется ключевое слово none, являющееся значением по умолчанию.

Трансформация текста

Свойство text-transform появилось ещё в стандарте CSS1. Свойство управляет преобразованием символов текста в заглавные или прописные. Оно применяется ко всем элементам (а также к псевдоэлементам ::first-letter и ::first-line) и наследуется потомками (см. спецификацию).

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

capitalize — первый символ каждого слова в предложении сделать заглавным. Остальные символы свой вид не меняют;
lowercase — все символы текста преобразовать в строчные (нижний регистр);
uppercase — все символы текста преобразовать в прописные (верхний регистр);
none – не менять регистр символов (значение по умолчанию);
inherit — наследовать значение от родительского элемента.

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Example</title>
    <style>
      span {
        text-transform: uppercase;
      }
    </style>
  </head>
  <body>
    <p>Lorem ipsum dolor sit amet, <span>consectetuer adipiscing elit,
       sed diem</span> nonummy nibh euismod.</p>
  </body>
</html>

Результат в браузере:

Параметры отображения текста в блоке

Определить параметры отображения текста в блоке, если текст целиком не помещается в заданную область, позволяет свойство text-overflow. Свойство не является наследуемым. Оно может применяться к блочным и встроенным элементам, а также к ячейкам таблицы (см. спецификацию).

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

clip — текст обрезается по размеру области (значение по умолчанию);
ellipsis — текст обрезается и к концу строки добавляется многоточие.

Примечание: Свойство text-overflow работает только в том случае, если для блока значение свойства overflow установлено как auto, scroll или hidden, а перенос строк запрещён.

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Example</title>
    <style>
      .clip {
        overflow: hidden;        /* Обрезаем, что не помещается в область */
        white-space: nowrap;     /* Запрещаем перенос строк */
        text-overflow: ellipsis; /* Добавляем многоточие */
        padding: 5px;            /* Отступы в блоке */
        background: #fc0;        /* Цвет фона */
      }
    </style>
  </head>
  <body>
    <p class="clip">Lorem ipsum dolor sit amet, consectetuer
       adipiscing elit, sed diem nonummy nibh euismod.</p>
  </body>
</html>

Результат в браузере:

Другие статьи по схожей тематике