Главная или честный способ заработка в сети Зачем мне это? Всё начинается с идеи

Свойства CSS. Цвет и фон. Часть 1

В CSS существуют различные свойства для задания цвета и фона элементов. Рассмотрим их в этом разделе.


Color

Свойство color задаёт цвет текста внутри элемента. Свойство является наследуемым. По умолчанию цвет текста внутри элемента body является чёрным, поэтому если ни одному из элементов цвет не задан, то цвет текста внутри всех элементов будет чёрным. Значение цвета можно задать тремя способами:

  1. При помощи слов - названий цветов:

    p {color:red;}

  2. Шестнадцатеричным кодом цвета в полной форме:

    p {color:#ff0000;}

    или сокращённой форме:

    p {color:#f00;}

  3. С помощью десятичного кода:

    p {color:rgb(255,0,0);}


Background-color

Свойство background-color задаёт цвет фона веб-страницы или любого другого элемента. Да, да, вы не ослышались, в отличие от html в css цвет фона можно задать любому элементу, например заголовку или абзацу. Свойство background-color не является наследуемым, однако его можно таковым сделать, если в правиле задать значение incherit, пишется следующим образом:

p {
background-color:incherit;
}

Теперь все элементы, находящиеся внутри элемента p унаследуют его фон. Однако, по умолчанию, для любого элемента, свойство background-color задаётся прозрачным (transparent), поэтому все элементы, находящиеся внутри элемента p визуально будут располагаться на том же фоне, что и элемент p. Кстати говоря, так как по умолчанию каждый элемент имеет прозрачный фон, то все они оказываются на белом фоне, так как этот фон по умолчанию задан в таблице стилей браузера. Зададим следующему абзацу во внутренней таблице стилей красный цвет и посмотрим на результат.

Фон этого абзаца красный и задан следующим образом:
<p style="background-color:red;">
Также мы видим, что элемент em, имеющий прозрачный фон по умолчанию, оказался видимым на красном фоне.


Background-image

При помощи этого свойства в качестве фона веб-страницы можно установить рисунок (если он конечно есть). Пишется:

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

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


Background-repeat

Если фоновое изображение задано в таблице стилей, свойство background-repeat определяет, будет ли оно повторяться по вертикали или горизонтали. Может иметь 4 значения:

  1. repeat - изображение повторяется по горизонтали и вертикали;
  2. repeat-x - изображение повторяется по оси X (по горизонтали);
  3. repeat-y - изображение повторяется по оси Y (по вертикали);
  4. no-repeat - изображение не повторяется.

Пример использования:

div {
background-image:url(путь к изображению);
background-repeat:no-repeat;
}


Background-attachment

Это свойство используется для указания нужно ли прокручивать фоновое изображение блока (страницы) вместе с текстом этого блока (страницы). У свойства существуют 2 значения:

  1. scroll - изображение прокручивается вместе с текстом, всегда стоит по умолчанию, поэтому указывать необязательно;
  2. fixed - изображение фиксируется в окне браузера и во время прокрутки остаётся на месте.

Используется следующим образом:

div {
background-image:ur (путь к изображению);
background-repeat:no-repeat;
background-attachment:fixed;
}


<<Предыдущая | В раздел | Следующая>>