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

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.

    Пример:
    body{ background-color:#243CED; color:yellow; }
    Сейчас наша страница в браузере выглядит так:

    фон в css


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

    Пример:
    body{ background-image:url(picture.gif); background-color:#243CED; color:yellow; }
    Сейчас наша страница в браузере выглядит так:

    фон (background) в css

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

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


  • background-repeat - задает возможность повторения фонового изображения. В качестве фонового изображения может выступать как цельное изображение (например, шапка сайта), так и маленькое изображение, которое должно замостить собой все пространство элемента. Данное свойство как раз и указывает, повторять ли изображение и, если да, то как именно повторять. Возможны 4 варианта:
    По умолчанию используется значение repeat, как мы и убедились в предыдущем примере. Давайте посмотрим как ведут себя остальные значения:
    body{ background-image:url(picture.gif); background-repeat:no-repeat; background-color:#243CED; color:yellow; }
    В браузере выглядит так:

    фон в css в виде картинки

    body{ background-image:url(picture.gif); background-repeat:repeat-x; background-color:#243CED; color:yellow; }
    В браузере выглядит так:

    фон-картинка в css

    body{ background-image:url(picture.gif); background-repeat:repeat-y; background-color:#243CED; color:yellow; }
    В браузере выглядит так:

    фоновое изображение в css


  • background-attachment - указывает, должно ли фоновое изображение прокручиваться вместе с текстом элемента или оно должно оставаться неподвижным. Может принимать два значения: Пример:
    body{ background-image:url(picture.gif); background-repeat:no-repeat; background-attachment:fixed; background-color:#243CED; color:yellow; }
    Результат действия значения fixed непривычно для пользователя, поэтому применяйте его только когда это действительно обоснованно.


  • background-position - задает расположение элемента относительно окна браузера. Значения можно задавать в процентах, в единицах длины и при помощи ключевых слов. Рассмотрим на примерах:
    body{ background-image:url(picture.gif); background-repeat:no-repeat; background-color:#243CED; background-position:10% 30%; color:yellow; }
    Левый верхний угол изображения будет смещен на 10% от ширины окна по горизонтали и на 30% от выстоты окна по вертикали. Следует заметить, что это свойство по-разному воспринимается разными браузерами. Например, в IE7 наш пример будет выглядеть так:



    А в Opera так:



    Этой проблемы можно избежать, задавая размер в пикселах:
    body{ background-image:url(picture.gif); background-repeat:no-repeat; background-color:#243CED; background-position:50px 50px; color:yellow; }
    Левый верхний угол изображения будет смещен на 50 пикселов по горизонтали и на 50 пикселов по вертикали:



    body{ background-image:url(picture.gif); background-repeat:no-repeat; background-color:#243CED; background-position:center top; color:yellow; }
    Изображение будет выровнено по горизонтали - по центру, а по вертикали - по верхнему краю страницы:



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


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

В CSS для многих свойств существует сокращенная запись. В этом случае значения всех свойств перечисляются через пробел в произвольном порядке. Например, для последнего примера сокращенная запись будет выглядеть так:
body{ background:url(picture.gif) no-repeat #33CCFF center top; color:yellow; }
Вот мы и рассмотрели свойства цвета и фона. Помните, что их можно применять ко всем элементам. Для тренировки задайте фон для заголовка или ссылки. А наш урок подошел к концу. В следующий раз будем изучать возможности управления шрифтами в CSS.



Предыдущий урок Вернуться в раздел Следующий урок 
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.