Свойство font

Основное назначение свойства font – установить в одном определении значения свойств font-style, font‑variant, font-weight, font-size, line-height и font-family. Все значения перечисленных свойств задаются через пробелы в том порядке, как они перечислены выше. Первые три свойства могут не задаваться, что соответствует установке их значений в normal. Размер шрифта и высота строки (свойство line-height) задаются через косую черту. Элементы списка семейств шрифтов свойства font-family задаются через запятую:

P {font: oblique 12pt/14pt "Times Cyr", serif}

Свойство @font-face

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

@font-face {font-family: CoolFont; src:url(http://myserver.com/CoolFont.eot);}

Примечание

Все свойства шрифтов являются наследуемыми и применяются ко всем элементам документа HTML.

2. Цвет и фон

Свойства этой категории определяют цвет и фон элемента. Фон можно задать в виде цвета или изображения. В случае изображения указывается его положение, как оно повторяется и фиксировано ли оно или прокручивается вместе с прокруткой содержимого окна браузера.

Свойство color

Для установки цвета текста элемента существует единственное свойство color. Его значением является цвет, задаваемый с помощью ключевых слов или rgb-функции:

<P> {color: blue}

<EM> {color: rgb(0,0,255)}

Оба правила в примере устанавливают синий цвет текста соответствующих элементов.

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

Свойство background-color

Цвет фона определяется значением свойства background-color. Начальным значением свойства background-color является transparent, которое определяет фон элемента как прозрачный.

Свойство background-image

Изображение, используемое в качестве фона, задается свойством background-image. Значением свойства background-image является абсолютный или относительный адрес файла изображения, используемого в качестве фона. Если это свойство определено, то рекомендуется задать также и цвет фона, который будет использоваться в случае недоступности файла изображения.

BODY {background-color: lightsteelblue;

background-image: url(/image/image.gif);}

<P> {background-image: none}

Свойство background-repeat

Если фон задан в виде изображения, то свойство background-repeat определяет его повторяемость и способы повторяемости. Допустимыми значениями являются repeat (повторяемость и по вертикали, и по горизонтали), repeat-x и repeat-y (повторяемость соответственно по горизонтали или вертикали) и no‑repeat (изображение не повторяется).

BODY {background-color: lightsteelblue;

background-image: url(/image/image.gif);

background-repeat: repeat-y;}

Свойство background-attachment

Свойство background-attachment определяет, будет ли фон, на котором отображается документ, оставаться неподвижным при прокрутке содержимого окна браузера, или он будет прокручиваться вместе с документом. В первом случае реализуется эффект перемещения содержимого окна над неподвижным рисунком. Значение fixed оставляет фон неподвижным, а значение scroll заставляет его перемещаться вместе с содержимым документа при прокрутке.

BODY {background-color: lightsteelblue;

background-image: url(/image/image.gif);

background-repeat: repeat-y;

background-attachment: fixed;}