Цвета и фон в css

 

mini_css



Цвет

Для указания цвета переднего плана в CSS используется свойство color:

body {color: white}

С самим свойством все просто, гораздо интереснее обстоят дела с его значениями. Дело в том, что в CSS предусмотрено целых 5(!) вариантов для определения значения цвета: один при помощи ключевого слова, два в шестнадцатеричной нотации, и еще два – при помощи функции rgb. Что касается первых способов, они задаются в шестнадцатеричном определении (RGB или RRGGBB).

Для простых цветов можно использовать назначение (red, green, gray и т.д.), однако вряд ли вы будете на практике использовать такие обозначения, как mediumspringgreen или lightgoldenrodyellow.  Использование числовых значений позволяет добиться большей гибкости при подборе цвета. В XHTML применяются шестнадцатеричные значения, они же поддерживаются и в CSS:

color: #f00; color: #ff0000;

В обоих случаях это будет полностью насыщенный красный цвет (FF – максимальная интенсивность красного канала, соответствующая 8 битам). Если вы – программист, то такое представление будет для вас привычным и достаточно удобным. Однако для других категорий разработчиков web-страниц шестнадцатеричная система счисления вовсе не является привычной, поэтому в CSS и появилась функция rgb, позволяющая указывать интенсивность составляющих цвета в десятичной нотации (от 0 до 255) и в процентах:

color: rgb(255, 0, 0); color: rgb(100%, 0%, 0%);

Здесь мы вновь определили красный цвет: в функции rgb первое значение определяет интенсивность красного цвета, второе – зеленого, а третье – синего. Таким образом, для составного цвета следует использовать два или все три значения:

em {color: rgb(20%, 40%, 60%);}

Подобные значения цвета используются не только для указания цвета переднего плана, но и во всех других случаях, где требуется определение цвета.

Свойства color

Значение по умолчанию: зависит от браузера (как правило, черный).
Наследуемые значения: да.
Применяется: ко всем элементам.
Совместимость: все.

Фон

В качестве фона элемента (поверхности, на которой он отображается) можно указывать цвет или изображение. Всего для определения фона в CSS предусмотрено 5 уникальных свойств: background-color, background-image, background-repeat, background-attachment и background-position, а так же 1 сокращенное – background.

В свете уже рассмотренного свойства color, свойство background-color является самым простым – его использование аналогично, с той лишь разницей, что вместо цвета переднего плана (скажем, текста) изменится цвет фона:

p {background-color: silver;}

Здесь мы определили серебристый (светло-серый) цвет для абзацев. Собственно, мы уже не раз применяли назначение цвета фона, правда, при этом использовалось сокращенное свойство background:

p {background: silver;}

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

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

Теперь обратимся к рисункам. За назначение рисунка фоновым изображением отвечает свойство background-image, в качестве значения которого может быть либо none (нет рисунка), либо адрес (URI) файла с изображением:

body {background-image: url("tile.png");}

В качестве фонового рисунка может использоваться графический файл любого формата из поддерживаемых браузером, в частности JPEG, GIF или PNG.

Следует сразу отметить, что использование рисунка в качестве фона отнюдь не исключает назначения цвета заднего плана: во-первых, сам рисунок может быть частично прозрачным, а во-вторых, он может занимать не всю область элемента (скажем, если используются свойство background-repeat). Более того, если рисунок по каким-либо причинам не прогрузится, то может быть нарушено восприятие страницы. Например, если рисунок темный, а текст – белый, то в случае отсутствия рисунка пользователь увидит просто белую страницу. Так что дополним пример с определением фонового рисунка еще и указанием цвета:

body {background-image: url("tile.png"); background-color: #ffeacf; }

Три оставшихся свойства для определения фона, имеющиеся в CSS, призваны управлять размещением фонового рисунка и способом его вывода. Так, при помощи свойства background-repeat определяют, должно ли изображение дублироваться, и если да – то каким образом это будет осуществляться. Всего для данного свойства определено 4 возможных значения:

repeat. Изображение дублируется по вертикали по горизонтали, заполняя все отведенное пространство в виде мозаики (принято по умолчанию);

repeat-x. Изображение дублируется только по горизонтали;

repeat-y. Изображение дублируется только по вертикали.

no-repeat. Изображение не дублируется – отображается только одна его копия.

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

body { background-image: url("tile.png"); background-repeat: repeat-x; background-color: #ffeacf; }

Другое свойство фона, используемое совместно с background-image – это background-attachment. Оно может принимать всего 2 значения – принятое по умолчанию scroll, при котором изображение прокручивается вместе с содержимым, и fixed, при котором фоновый рисунок становится привязанным к окну просмотра. Таким образом, если мы не хотим, чтобы фоновый рисунок прокручивался вместе с содержимым страницы, а оставался на одном и том же месте относительно окна браузера, то дополним пример таким образом:

body { background-image: url("tile.png"); background-repeat: repeat-x; background-attachment: fixed; background-color: #ffeacf; }

В результате мы получили фон, состоящий из повторяющегося по горизонтали картинки, постоянно находящийся на одном и том же месте вверху страницы.
 Отметим, что если бы был указан повтор по вертикали (repeat-y), то рисунок расположился бы по левой границе окна. Таким образом, можно сделать вывод, что отправной точкой вывода изображения является верхний левый угол. Если же требуется изменить начальную позицию вывода изображения (или собственно расположение фоновой картинки, если она не должна повторяться), то следует прибегнуть к такому свойству, как background-position. Оно может принимать либо абсолютные значения или значения в процентах, при этом за точку отсчета принимается верхний левый угол блока, либо значения, задаваемые ключевыми словами left, right, top, bottom и center:

div {background-image: url("tile.png"); background-position: top right;}

Здесь мы задали вертикальное выравнивание фонового рисунка по верху и горизонтальное выравнивание правому краю. Если указать только одно значение (например, right, или 25%), то оно будет определять выравнивание по горизонтали, а вертикальное выравнивание примет значение 50% (center). Исключение составляют только значения top и bottom: если указать только одно из этих значений, то в center будет установлено выравнивание по вертикали.

ПРИМЕЧАНИЕ
Если фоновое изображение фиксировано в окне просмотра (т.е. если свойство background-attachment установлено в значение fixed), то смещения определяются относительно окна просмотра, а не относительно области элемента.

Свойства color

Значение по умолчанию: background-color – transparent; background-image – none; background-repeat – repeat; background-attachment – scroll; background-position – 0% 0% (top left). Наследуемые значения: нет. Применяется: ко всем элементам. Совместимость: все.

Основные стили для тэгов body, table, div и т. д.
- стиль для body {}
background-color   цвет
background- image  изображение
 background-repeat  повторение
background- attachment  изображение фиксированное или совместно прокручиваемое с документом  
 background-position   относительное расположение изображения на странице