Настройка параметров цвета и фона элементов страницы

Если цвет текстовых элементов указывается в НТМL достаточно просто, то задать про­стыми средствами цвет, например, границ таблицы уже невозможно – приходится использовать вложенные таблицы. Однако с помощью CSS это можно сделать довольно легко. Также средствами CSS можно более гибко управлять фоновым изображением, в частности используемым правилом его повторения по горизонтали и вертикали. Кроме того, фоновое изображение можно помещать в любую точку экрана, т.е. позиционировать его. Рассмотрим свойства CSS, предназначенные для работы с цветом и фоном.

§ color –с помощью этого свойства задается цвет текста внутри этого элемента. В качестве значения свойства указывается цвет в любом из доступных способов записи:

· по ключевому слову (red, yellow);

· шестнадцатеричным кодом цвета в полной форме (#00FFCC, #EEDDAA) или сокращенно (#0FC, #EDA);

· десятичным кодом цвета в модели RGB (color: rgb (25, 205, 172) ).

Свойство color является наследуемым, т.е. если для какого-то элемента оно не задано, то этот элемент унаследует значение данного свойства от родителей. Если и для родителей оно не задано, будет осуществлен поиск вверх по дереву элемен­тов, пока не отыщется самый старший элемент, для которого это свойство задано. Такой элемент обязательно найдется, например, им может оказаться элемент BODY, для которого даже в отсутствие явно указанного цвета будет применена таб­лица стилей браузера с использованием значений по умолчанию. Скорее всего, цвет элемента в этом случае будет черным, что обычно и соответствует значению по умолчанию. Аналогичный механизм будет работать для всех остальных насле­дуемых свойств. Например: Н1 { color: blue}

<Н1>Синий заголовок</Н1>

§ background-color – свойство позволяет задавать цвет фона для страницы (для заголовка, абзаца, ссылки) или любого другого элемента НТМL. В качестве значе­ния свойства указываются цвет или ключевое слово transparent (прозрачный). Свойство background-color не наследуется, но по умолчанию для него исполь­зуется значение transparent – чтобы сквозь прозрачный фон элемента просве­чивал фон родительского элемента. Например, если для элемента Р не задано свойство background-color, то текст абзаца будет располагаться на фоне ос­новного цвета, установленного для страницы в целом. Позвольте напомнить, что значение по умолчанию, указанное в таблице стилей браузера, – белый цвет. Од­нако свойство background-color можно сделать наследуемым, если в качестве его значения указать inherit:Р { background-color: inherit }

§ background-image –свойство задает фоновое изображение, которое должно храниться в отдельном файле и применимо для любого элемента. Значением свойства может быть адрес URL графического файла, указанный в виде url (picture.gif), или ключевое слово none, означающее отсутствие фонового изображения. Понятно, что нет смысла выбирать значение none, когда изображение отсутствует, тем более что значение none установлено для данного свойства по умолчанию. Например:

BODY { background-image: url (picture.gif)}

При использовании свойства background-image рекомендуется задавать и значение свойства background-color. Оно будет использоваться в том случае, если фоновое изображение по тем или иным причинам окажется недоступным. Фоновый рисунок будет располагаться поверх фонового цвета, а сам фоновый цвет будет просвечивать только через прозрачные участки изображения.

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

· repeat– изображение повторяется и по вертикали, и по горизонтали (как в НТМL);

· repeat-x – изображение повторяется только по горизонтали (по оси х);

· repeat-y – изображение повторяется только по вертикали (по оси у);

· no-repeat – изображение не повторяется, выводится только одна его копия.

Аналога этому свойству в языке НТМL нет.