Цвет и фон в CSS
В CSS существуют различные свойства для задания цвета и фона элементов. Рассмотрим их в этом разделе.
Color
Свойство color задаёт цвет текста внутри элемента. Свойство является наследуемым. По умолчанию текст внутри элемента body является чёрным, поэтому, если ни одному из элементов цвет не задан, то текст внутри всех элементов будет чёрным. Значение цвета можно задать тремя способами:
- При помощи слов - названий цветов:
p {color:red;}
- Шестнадцатеричным кодом цвета в полной форме:
p {color:#ff0000;}
или сокращённой форме:
p {color:#f00;}
- С помощью десятичного кода:
p {color:rgb(255,0,0);}
Background-color
Свойство background-color задаёт цвет фона веб-страницы или любого другого элемента, не является наследуемым, однако можно его таковым сделать, если в правиле задать значение incherit, пишется следующим образом:
p {
background-color:incherit;
}
Теперь все элементы, находящиеся внутри элемента p унаследуют его фон. Однако, по умолчанию, для любого элемента, свойство background-color задаётся прозрачным (transparent), поэтому все элементы, находящиеся внутри элемента p визуально будут располагаться на том же фоне, что и элемент p. Кстати говоря, так как по умолчанию каждый элемент имеет прозрачный фон, все они оказываются на белом фоне, который является фоном по умолчанию в таблице стилей браузера. Зададим следующему абзацу во внутренней таблице стилей красный цвет и посмотрим на результат.
Фон этого абзаца красный и задан следующим образом:
Также мы видим, что элемент em, имеющий прозрачный фон по умолчанию, оказался видимым на красном фоне.
Background-image
При помощи этого свойства в качестве фона веб-страницы можно установить рисунок (если он конечно есть). Пишется:
body {
background-image:url(picture.gif);
}
Помимо рисунка рекомендуется задавать цвет фона при помощи атрибута background-color. Если изображение по какой-либо причине не загрузится, тогда вместо него появится заданный фон.
Background-repeat
Если фоновое изображение задано в таблице стилей, свойство background-repeat определяет, будет ли оно повторяться по вертикали или горизонтали. Может иметь 4 значения:
- repeat - изображение повторяется по горизонтали и вертикали;
- repeat-x - изображение повторяется по оси X (по горизонтали);
- repeat-y - изображение повторяется по оси Y (по вертикали);
- no-repeat - изображение не повторяется.
Пример использования:
div {
background-image:url(путь к изображению);
background-repeat:no-repeat;
}
Background-attachment
Это свойство используется для указания нужно ли прокручивать фоновое изображение блока (страницы) вместе с текстом этого блока (страницы). У свойства существуют 2 значения:
- scroll - изображение прокручивается вместе с текстом, всегда стоит по умолчанию, поэтому указывать необязательно;
- fixed - изображение фиксируется в окне браузера и во время прокрутки остаётся на месте.
Используется следующим образом:
div {
background-image:url(путь к изображению);
background-repeat:no-repeat;
background-attachment:fixed;
}
Путь к файлу определяется относительно таблицы стилей, а не html-документа, к которому она (таблица) подключена!
Background-position
Свойство background-position используется для задания местоположения фонового рисунка в окне браузера. Задавать местоположение фонового изображения можно в процентах, единицах длины и с помощью различных ключевых слов.
Задание расположения фонового рисунка в процентах
Создаём таблицу стилей следующего содержания:
body{
background-image:url(dog.gif);
background-repeat:no-repeat;
background-position:20% 20%;
}
Здесь первое значение в процентах указывается по оси X, второе - по оси Y. За начало координат берётся левая верхняя точка окна браузера (0% 0%). Соответственно, значение в процентах, как, впрочем, и в единицах длины задаётся относительно левого верхнего угла фонового изображения.
Теперь создадим html-документ, со стихотворением про щенка, подключим к нему эту таблицу стилей и посмотрим результат.
У щенка четыре лапы,
Ушки и забавный хвост.
Он пушистый и лохматый.
И прохожих лижет в нос.
Вот и результат. Откройте его в разных браузерах. После этого вы заметите, что в различных браузерах и результат отображается по-разному. Например в Internet Explorer, с каждым прибавленным процентом по оси Y, изображение смещается вниз, а вот в Mozilla Firefox - вверх. Чтобы избежать подобного рода проблем, необходимо задавать местоположение фонового рисунка в единицах длины. Лучший вариант единицы длины для этого - пиксель.
Задание расположения фонового рисунка в единицах длины
Создаём таблицу стилей, похожую на предыдущую, только теперь значение свойства background-position укажем в пикселях.
body{
background-image:url(dog.gif);
background-repeat:no-repeat;
background-position:100px 40px;
}
Получился следующего вида документ, причём во всех браузерах он выглядит одинаково. Также единицы длины для задания координат фонового изображения могут быть разными. По оси X - пиксели, по оси Y - сантиметры и т.д. Например:
background-position:100px 5cm;
Выравнивание фонового рисунка при помощи ключевых слов
Ключевые слова для выравнивания фонового изображения на экране цифрового устройства используются такие же, как и в html. Для выравнивания по оси X (по горизонтали) используются слова:
- left - выравнивание левого края изображения по левому краю блока или страницы;
- center - выравнивание центра изображения по центру блока или страницы;
- right - выравнивание правого края изображения по правому краю блока или страницы.
Для выравнивания по оси Y (по вертикали) используются следующие ключевые слова:
- top - выравнивание верхней границы изображения по верхней границе блока или страницы;
- center - выравнивание центра изображения по центру блока или страницы;
- bottom - выравнивание нижней границы изображения по нижней границе блока или страницы.
Пример выравнивания фонового изображения:
body{
background-image:url(image.gif);
background-position:right center;
}
Ключевые слова также могут использоваться вместе с единицами длины и процентами. В указании координат изображения первой всегда указывается координата по оси X, второй - по оси Y. Если в качестве значения указывается только одна координата, то по умолчанию, изображение сдвигается по этой координате по оси X, а по оси Y - значение либо center, либо другое - в зависимости от браузера.
Сокращённая запись свойства background
Свойство background для фона страницы или блока можно задавать в упрощённой форме. Например правило вида:
body{
background-image:url(dog.gif);
background-repeat:no-repeat;
background-position:20% 20%;
}
Можно записать и так:
body{
background:url(dog.gif) no-repeat 20% 20%;
}
2012 год.