CSS - Урок 5. Свойства - color (цвет) и background (фон)

Цвет - color

В течение предыдущих уроков мы все время использовали свойство цвета - color. Это свойство задает цвет текста внутри элемента.

Свойство color является наследуемым. Рассмотрим на примере, что это значит. Пусть у нас имеется html-страница со следующим кодом:

<html> <head> <title>css color (цвет)</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Заголовок</h1> <p>Здесь текст параграфа.</p> Здесь просто текст. </body> </html>

Зададим стиль для элемента body:

body{ color:green; }

Теперь весь текст на странице зеленого цвета. Если мы захотим изменить цвет какого-либо элемента, то ему нужно будет задать свой стиль. Например, сделаем цвет заголовка красным:

body{ color:green; } h1{ color:red; }

Теперь цвет заголовка красный, т.к. мы задали ему свойство color, а до этого он, как и все остальные элементы, был зеленым, потому что унаследовал свойство color от своего "предка" - элемента body.

Таким образом, если у элемента не задано свойство color, то оно наследуется от элемента "предка". Если оно не задано и для предка, то будет осуществлен поиск вверх по дереву элементов, пока не будет найден элемент, для которого это свойство задано.

Дерево элементов - структура всех элементов html-страницы, отражающая их вложенность друг в друга. Схематично дерево элементов для нашего примера выглядит так:

В нашем примере для элементов h1 и p предком является элемент body, для которого предком является элемент html. Это и есть принцип наследования.

Значениями свойства color могут быть именные цвета (red, blue...), шестнадцатеричные коды цветов (#FF0000) и десятичные коды цвета в модели RGB (rgb(255, 0, 0)). Подробнее о цвете читайте на странице цвета для web.

Итак, задать цвет текста для элемента можно тремя способами:

body{ color:green; } h1{ color:#FF0000; } h2{ color:rgb(255,0,0); }

Фон - background

На самом деле это группа свойств, так или иначе связанная с фоном. При помощи CSS фон можно задать не только странице, но и заголовку, и абзацу, и любому другому элементу. Пусть у нас есть html-страница с таким кодом:

<html> <head> <title>css background (фон)</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> Здесь содержимое документа </body> </html>

Рассмотрим группу свойств background:

background-color - задает цвет фона. По умолчанию не наследуется, но его можно сделать наследуемым, если в качестве значения указать значение inherit.

Пример:

Сейчас наша страница в браузере выглядит так:

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

Пример:

Сейчас наша страница в браузере выглядит так:

В нашем примере страница стилей style.css лежит в той же папке, что и изображение picture.gif (об относительной адресации читайте на странице абсолютная и относительная адресация).

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

background-repeat - задает возможность повторения фонового изображения. В качестве фонового изображения может выступать как цельное изображение (например, шапка сайта), так и маленькое изображение, которое должно замостить собой все пространство элемента. Данное свойство как раз и указывает, повторять ли изображение и, если да, то как именно повторять. Возможны 4 варианта:
- repeat - повторять изображение по горизонтали и вертикали.
- repeat-x - повторять изображение только по горизонтали.
- repeat-y - повторять изображение только по вертикали.
- no-repeat - не повторять изображение.
По умолчанию используется значение repeat, как мы и убедились в предыдущем примере. Давайте посмотрим как ведут себя остальные значения:

В браузере выглядит так:

В браузере выглядит так:

В браузере выглядит так:

background-attachment - указывает, должно ли фоновое изображение прокручиваться вместе с текстом элемента или оно должно оставаться неподвижным. Может принимать два значения:
- scroll - фон прокручивается вместе с текстом. Это значение используется по умолчанию.
- fixed - фоновое изображение фиксируется относительно окна браузера, и во время прокрутки текста оно остается неподвижным.
Пример:

Результат действия значения fixed непривычно для пользователя, поэтому применяйте его только когда это действительно обоснованно.

background-position - задает расположение элемента относительно окна браузера. Значения можно задавать в процентах, в единицах длины и при помощи ключевых слов. Рассмотрим на примерах:

Левый верхний угол изображения будет смещен на 10% от ширины окна по горизонтали и на 30% от выстоты окна по вертикали. Следует заметить, что это свойство по-разному воспринимается разными браузерами. Например, в IE7 наш пример будет выглядеть так:

А в Opera так:

Этой проблемы можно избежать, задавая размер в пикселах:

Левый верхний угол изображения будет смещен на 50 пикселов по горизонтали и на 50 пикселов по вертикали:

Изображение будет выровнено по горизонтали - по центру, а по вертикали - по верхнему краю страницы:

Вообще, для выравнивания по горизонтали (первый параметр) можно использовать следующие ключевые слова: left (по левому краю), center (по центру) и right (по правому краю). Для выравнивания по вертикали (второй параметр): top (по верхнему краю), center (по центру) и bottom (по нижнему краю).

Сокращенная запись свойства background

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

body{ background:url(picture.gif) no-repeat #33CCFF center top; color:yellow; }

Вот мы и рассмотрели свойства цвета и фона. Помните, что их можно применять ко всем элементам. Для тренировки задайте фон для заголовка или ссылки. А наш урок подошел к концу. В следующий раз будем изучать возможности управления шрифтами в CSS.

Предыдущий урок Вернуться в раздел Следующий урок

Если этот сайт оказался вам полезен, пожалуйста, посмотрите другие наши статьи и разделы.

Код кнопки:

Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.