Очень важным моментом в CSS является цвет и фон.
Цвет в CSS указывается так же, как и в html, с помощью значения (например #f9f9f5) или названия цвета (yellow, grey, green).
Как использовать цвета в CSS
Содержание
Основными свойствами CSS, определяющими цвет текста, цвет фона и расположение фоновых рисунков, являются:
- color
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
- background
Теперь о каждом из них подробней:
color
Обозначает основной цвет определенного элемента:
h1
{color: yellow; }
h2
{color: grey; }
p
{color: blue; }
В итоге на сайте заголовки <h1> будут желтого цвета, заголовки <h2> серого, а текст <p> будет синим.
background-color
Обозначает цвет фона определённых элементов (заголовки, параграфы, ссылки, ячейка таблиц и т.д.)
К примеру, если надо изменить цвет фона всего документа, следует задать данное свойство элементу BODY.
body
{background-color: white; }
h1
{color: red; background-color: yellow; }
Цвет фона страницы будет белым а цвет текста в заголовке <h1> будет синим на желтом фоне.
backgroud-image
Необходим для заливки фона с помощью изображения. Для этого используется путь (URL) к изображению.
body
{background-color: F7F7F7;
bаckgroud-imagе: url(‘/kartinka.jpg’); }
h2
{color: FFFFFF; background-color: black; }
В данном случае изображением для фона является файл kartinka.jpg. Важное, что следует запомнить: значение url(‘kartinka.jpg’) всегда пишут без пробела! Если на сайте файл изображения расположен в папке images – значение будет таким url(‘images/kartinka.jpg’)
background-repeat
С помощью свойства background-repeat можно добавить небольшой фрагмент изображения который заполнить весь фон. Это происходит за счет повторения фрагмента изображения начиная с верхнего левого угла по вертикали и горизонтали. В итоге получается полноценный фон.
Существует всего четыре значения:
background-repeat: repeat ; повторение по горизонтали и вертикали
background-repeat: repeat-x ; повторение по горизонтали
background-repeat: repeat-y ; повторение по вертикали
background-repeat: no-repeat ; не повторять
Например:
body
{background-image: url(‘kartinka.jpg’) ;
background-repeat: repeat-y; }
Изображение будет повторятся по горизонтали во всю высоту окна.
background-attachment
При наличии фонового изображения определяет, будет ли оно прокручиваться вместе с содержимым страницы. Бывают два значения:
scroll – фон прокручивается вместе с содержимым страницы;
fixed – фон неподвижен, прокручивается содержимое страницы.
Пример неподвижного фона:
body
{background-image : url(‘kartinka.jpg’) ;
background-repeat: no-repeat;
background-attachment: fixed ; }
Достаточно поменять значение fixed на scroll, и фон станет подвижным. Вообще, если совсем не указывать это значение, то фон будет прокручиваться вместе с содержимым в соответствии с scroll.
background-position
Необходим для определения позиций фонового изображения. Значения могут быть в процентах, пикселях или с помощью ключевых слов. Отсчет начинается с левого верхнего угла страницы, где изображение расположено по умолчанию. Сначала задаётся координата по оси Х, потом по оси Y. На рисунке приведены примеры позиционирования (точка вместо изображения, а под ней – примерные координаты):
Также положение можно задать такими словами:
left – лево, right – право, center – центр, top – верх, bottom – низ
Пример позиций с помощью слов:
body
{background-image : url(‘images/kartinka.jpg’) ;
background-repeat: no-repeat;
background-position: center left ; }
Пример в пикселях:
body
{background-image : url(‘images/kartinka.jpg’) ;
background-repeat: no-repeat;
background-position: 240px 30px; }
Пример в процентах:
body {background-image : url(‘images/kartinka.jpg’) ;
background-repeat: no-repeat;
background-position: 40% 20%; }
background
Можно использовать для сокращения записей значений всех ранее перечисленных выше свойств.
Важно соблюдать такую последовательность:
1 – background-color
2 – background-image
3 – background-repeat
4 – background-attachment
5 – background-position
Например, все это:
body
{background-color: F4F4F4 ;
background-image : url(‘kartinka.jpg’) ;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top left;
}
Можно сократить таким образом:
body
{background: #F4F4F4 url(‘kartinka.jpg’) no-repeat scroll top left ; }
Значения свойств записываются через пробел. Если какое то из значений пропустить, оно будет считаться по умолчанию.
Следующая – Шрифты в CSS
Предыдущая –Как работает CSS. Создание и подключение таблиц
