Свойства форматирования элементов
В каскадных таблицах стилей все доступные свойства форматирования элементов в документе HTML разбиты на категории. Рассмотрим основные из них.
Таблица 1. Категории свойств элементов
|
Категория |
Устанавливает |
|
Шрифт |
Типографские свойства шрифта |
|
Цвет и фон |
Цвет текста и фона, а также картинки в качестве фона |
|
Текст |
Выравнивание, форматирование и разрядка текста |
|
Блок |
Свойства форматирования блоковых элементов |
|
Визуальное форматирование |
Свойства, связанные с блоками отображения элементов, их позиционированием и отображением списков |
Шрифты
Выбор шрифта для отдельных частей документа – наиболее часто выполняемая операция в ходе работы над HTML-документом. Шрифты различаются по своему внешнему виду, по размеру, по стилю, по жирности.
Таблица 2. Свойства шрифтов
|
Свойство |
Описание |
|
font-family |
Задает приоритетный список семейств шрифтов. BODY {font-family: Times New Roman, Verdana, Arial} |
|
font-style |
Определяет стиль шрифта из выбранного семейства нормальный (normal), курсивный (italic) или наклонный (oblique) H1 {font-style: italic} |
|
font-variant |
Определяет еще одну вариацию шрифта выбранного семейства – капитель. В шрифте этого стиля все строчные буквы выглядят как прописные. Значение normal не изменяет вида шрифта, а small-caps выбирает вариант капитель шрифта. P {font-variant: small-caps} |
|
font-weight |
Определяет жирность шрифта. Регламентируют 9 градаций жирности шрифта, задаваемых числами 100, 200 и так далее до 900. Значение 100 соответствует самому "бледному" шрифту, тогда как 900 – самому "жирному". Для задания нормального шрифта используется значение normal, что соответствует цифровому значению 400. H1 {font-weight: 400} |
|
font-size |
Определяет размер шрифта. Значение этого свойства может быть абсолютным или относительным. Абсолютное значение задается следующими ключевыми словами: xx-small, x-small, small, medium, large, x-large, xx-large. Также значение можно задавать в виде абсолютного значения длины, например, 10pt H1 {font-weight: 20pt} P {font-size: medium} |
|
font |
Основное назначение этого свойства – установить в одном определении значения свойств font-style, font-variant, font-weight, font-size, font-family. Все значения перечисленных свойств задаются через пробелы в том порядке, как они перечислены выше. |
Цвет и фон
Свойства этой категории определяют цвет и фон элемента. Фон можно задавать в виде цвета или изображения. В случае изображения указывается его положение, как оно повторяется и фиксировано ли оно или прокручивается вместе с прокруткой содержимого окна браузера.
Таблица 3. Свойства фона и цвета
|
Свойство |
Описание |
|
color |
Устанавливает цвет текста элемента. Значением этого элемента является цвет, который задается либо ключевым словом, либо шестнадцатеричным значением RGB. P {color: blue} H1 {color: 00FFFF} |
|
background-color |
Определяет цвет фона страницы. Значением этого элемента является цвет, который задается либо ключевым словом, либо шестнадцатеричным значением RGB. |
|
background-image |
Определяет изображение, которое используется в качестве фона. Значением этого свойства является абсолютный или относительный адрес файла изображения, используемого в качестве фона. |
|
background-repeat |
Определяет повторяемость и способы повторяемости изображения используемого в качестве фона. Допустимые значения: repeat – повторяемость и по вертикали, и по горизонтали; repeat-x - повторяемость по горизонтали; repeat-y - повторяемость по вертикали; no-repeat – изображение не повторяется. |
|
background-attachment |
Определяет, будет ли фон, на котором отображается документ, оставаться неподвижным при прокрутке. fixed - оставляет фон неподвижным, scroll - перемещает фон вместе с содержимым документа. |
|
background-position |
Определяет начальное положение изображения, используемого в качестве фона. Значением этого свойства являются координаты привязки определенных точек и блока содержимого. |
|
background |
Позволяет одновременно устанавливать значения всех перечисленных выше свойств. Допустимые значения задаются в виде списка, элементы которого отделяются пробелами. Если значение не задано, то оно устанавливается в начальное значение, определяемое браузером. |