Свойства текста
Следующие свойства влияют на форматирование текста на веб-странице. Поскольку большинство свойств этой категории наследуются, вам не обязательно применять их к тегам, специально предназначенным для текста (таким как тег <p>). Вы можете применить эти свойства к тегу <body> так, чтобы остальные теги унаследовали и использовали те же самые настройки. Задействование этой методики — быстрый способ создать всеохватывающий шрифт, цвет и т. д. для страницы или раздела.
color (наследуется) Устанавливает цвет текста. Поскольку оно наследуется, то, если вы задаете красный цвет для тега <body>, например, у всего текста на странице — и у всех других тегов внутри тега <body> — также будет красный цвет. Значения: любое корректное значение цвета. Пример: color: #FFFF33;.
ПРИМЕЧАНИЕ Заранее установленный цвет ссылок для тега<a> отменяет наследование цвета. В вышеупомянутом примере любые ссылки в теге <body> все еще были бы стандартного синего цвета.
font (наследуется) Используя это свойство, вы можете сокращенно определить следующие текстовые свойства в отдельном объявлении стиля: font-style, font-variant, font-weight, fontsize, line-height и font-family. В этом свойстве между значениями нужно ставить пробелы и включить по крайней мере font-size и font-family, причем они должны быть последними двумя элементами в объявлении. Остальные являются дополнительными. Если вы не установите свойство, браузер будет использовать предустановленное значение, потенциально отменяя унаследованные свойства. Значения: любое значение, корректное для определенного свойства шрифта. Если вы включаете значение line-height, то задавайте высоту линии, слеш (/), а затем размер шрифта, например: 1.25em/150%. Пример: font: italic small-caps bold 1.25em/150% Arial, Helvetica, sansserif;.
font-family (наследуется) Указывает шрифт, который браузер должен использовать при отображении текста. Шрифты обычно определяются как наборы трех-четырех параметров, учитывая тот факт, что конкретный шрифт может быть не установлен на компьютере посетителя. Значения: названия шрифтов, разделенные запятыми. Когда название шрифта состоит из нескольких слов, между которыми стоит пробел, это название нужно указывать в кавычках. Последний перечисленный шрифт — обычно общий тип шрифта, указывающий браузерам выбрать подходящий шрифт, если остальные недоступны: serif, sans-serif, monotype, fantasy или cursive. Пример: font-family: "Lucida Grande", Arial, sans-serif;.
ПРИМЕЧАНИЕ Все браузеры позволяют указывать дополнительные шрифты, которые либо хранятся на вашем веб-сервере, либо загружаются браузерами ваших посетителей со службы веб-шрифтов.
font-size (наследуется) Устанавливает размер текста. Это свойство наследуется, что может привести к некоторому странному поведению при использовании относительных единиц измерения, таких как проценты и em. Значения: любая корректная единица измерения CSS, а также следующие ключевые слова: xx-small, x-small, small, medium, large, x-large, xx-large, larger и smaller; medium представляет обычный, заранее заданный размер шрифта браузера, а остальные размеры — кратные ему. Каждое из них увеличивает или уменьшает текст в определенной степени. Несмотря на то что все изменения цвета, как предполагается, должны быть последовательными увеличениями или уменьшениями от предыдущего значения, на самом деле это не так. По существу, xx-small эквивалентен 9 пикселам (берем в расчет то, что вы не корректировали базовый размер шрифта браузера); x-small — 10 пикселам, small — 13, large — 18, x-large — 24 и xx-large — 32 пикселам. Из-за неуверенности в том, как каждый браузер обрабатывает эти ключевые слова, многие дизайнеры используют вместо них пикселы, em или проценты. Пример: font-size: 1.25em;.
ПРИМЕЧАНИЕ Когда свойство font-size наследуется от другого тега, эти ключевые слова умножают унаследованный размер шрифта на тот же самый коэффициент (1,2 в большинстве браузеров).
font-style (наследуется) Делает текст курсивным. Если свойство применено к курсивному тексту, то возвращает его вновь к обычному. Значения italic и oblique функционально одинаковы. Значения: italic, oblique, normal. Пример: font-style: italic;.
font-variant (наследуется) Делает буквы в тексте прописными, например: SPECIAL PRESENTATION. Значение normal задает шрифт, не содержащий прописных букв. Значения: small-caps, normal. Пример: font-variant: small-caps;.
font-weight Делает текст полужирным или отменяет это начертание для текста, который уже был отформатирован таким образом. Значения: CSS на самом деле предоставляет 14 различных ключевых слов для свойства font-weight, но только два из них фактически работают с сегодняшними браузерами и компьютерными системами: bold и normal. Пример: font-weight: bold;.
letter-spacing (наследуется) Регулирует расстояние между буквами, чтобы растянуть слова (добавляя расстояние между буквами) или сжать их (удаляя расстояние). Значения: любая корректная единица измерения CSS, хотя em и пикселы распространены больше всего. Проценты для этого свойства не работают в большинстве браузеров. Используйте положительное значение, чтобы увеличить расстояние между буквами, и отрицательное значение, чтобы убрать промежутки. Значение normal сбрасывает letter-spacing в стандартное значение в браузере — 0. Примеры: letter-spacing: -1px; letter-spacing: 2em;.
line-height (наследуется) Регулирует расстояние между строками текста в абзаце (в программах для обработки текста часто называется межстрочным интервалом). Нормальная высота линии составляет 120 % от размера текста. Значения: большинство корректных размеров CSS, хотя em, пикселы и проценты наиболее распространены. Пример: line-height: 200%;.
text-align (наследуется) Выравнивает блок текста по левому, правому краю или по центру страницы либо элемента-контейнера. Значения: left, center, right, justify (значение justify часто затрудняет чтение текста на мониторах). Пример: text-align: center;.
text-decoration (наследуется) Добавляет линии над или под текстом, а также посередине. Подчеркивание распространено для ссылок, так что не стоит подчеркивать текст, который не является ссылкой. Цвет линии такой же, как цвет шрифта тега, к которому применен стиль. Свойство также поддерживает значение blink, которое делает текст мерцающим (но большинство браузеров так или иначе игнорируют значение blink). Значения: underline, overline, line-through, blink, none. Значение none отключает все оформление. Используйте его, чтобы скрыть подчеркивание, которое обычно появляется под ссылками. Вы также можете добавить множество способов оформлений, перечисляя значения (кроме none) через пробел. Пример: text-decoration: underline overline line-through;.
text-indent (наследуется) Устанавливает размер отступа для первой строки блока текста. Первая строка может иметь отступ (как во многих печатных книгах) или выступать над левым краем остального текста. Значения: любая корректная единица измерения CSS. Пикселы и em наиболее распространены; проценты ведут себя иначе, чем со свойством font-size. Здесь проценты основываются на ширине области, содержащей текст, которая может быть шириной всего окна браузера. Таким образом, 50 % сделают отступ первой строки на половину окна. Чтобы первая строка выступала за левый край, используйте отрицательное значение. Эта методика хорошо работает в связке с положительным свойством margin-left, которое добавляет отступ с левой стороны других строк текста на установленную величину. Пример: text-indent: 3em;.
text-shadow (наследуется) Позволяет добавлять любому тексту тень. Значения: к тексту применяются два измеряемых значения (в em или пикселах) для горизонтального и вертикального смещения: значение, определяющее степень размытости тени, и значение цвета тени. Отрицательное значение для горизонтального смещения помещает тень слева от текста, а положительное значение — справа. Отрицательное значение для вертикального смещения помещает тень сверху от текста, а положительное значение — снизу. Каждое значение отделяется от предыдущего пробелом. Можно также добавить несколько теней, добавляя значения дополнительной тени через запятую. Примеры: text-shadow: -4px 4px 3px #999999; text-shadow: -4px 4px 3px #999999 2px 3px 10px #000;
text-transform Изменяет регистр букв в тексте так, что все буквы в тексте становятся строчными или только первая буква каждого слова остается прописной. Значения: uppercase, lowercase, capitalize, none. Значение none возвращает текст к какому бы то ни было регистру из фактического кода HTML. Если aBCDefg — буквы, которые в действительности напечатаны в HTML, то none отменит другие унаследованные установки регистра от тега-предка и отобразит на экране aBCDefg. Пример: text-transform: uppercase;.
vertical-align Устанавливает базовую линию внутреннего элемента относительно базовой линии окружающего содержимого. С ним вы можете сделать так, чтобы символ появился немного выше или ниже окружающего текста. Используйте его для создания символов верхнего индекса, таких как TM, ® или ©. При применении к ячейке таблицы значения top, middle, bottom и baseline управляют вертикальным размещением содержимого внутри ячейки. Значения: baseline, sub, super, top, text-top, middle, bottom, text-bottom, процентное или абсолютное значение (например, пикселы или em). Проценты вычисляются на основании значения line-height элемента. Примеры: vertical-align: top; vertical-align: -5px; vertical-align: 75%;.
white-space Управляет тем, как браузер отображает пробелы в коде HTML. Обычно если вы включаете более одного пробела между словами, например "Hello Dave", браузер отображает только один пробел — "Hello Dave". При использовании значения pre вы можете сохранить пробелы точно так же, как в HTML. Это значение делает то же, что и HTML-тег <pre>. Кроме того, браузеры разобьют строку текста на месте пробела, если строка не будет соответствовать ширине окна. Чтобы препятствовать обтеканию текста, примените значение nowrap. Однако это значение вынуждает весь текст абзаца оставаться на одной строке, так что не используйте его с длинными абзацами (если вам, конечно, не хочется заставить посетителей бесконечно прокручивать страницу вправо). Значения: nowrap, pre, normal. Еще два значения — pre-line и pre-wrap — не работают во многих браузерах. Пример: white-space: pre;.
word-spacing (наследуется) Работает, как свойство letter-spacing, но регулирует расстояние между словами, а не между буквами. Значения: любая правильная единица измерения CSS, хотя em и пикселы наиболее распространены; проценты не работают в большинстве браузеров. Используйте положительное значение, чтобы увеличить расстояние между словами, и отрицательное значение, чтобы убрать интервал (сжать слова). Значение normal устанавливает стандартное расстояние между словами (word-spacing), принимаемое за 0. Примеры: word-spacing: -1px; word-spacing: 2em;.