HTML & CSS для начинающих (Часть 31): Цвета и фоны

Свойство color описывает цвет переднего плана (цвет текста) элементов. Указать цвета можно различными способами. Классически используются шестнадцатеричные значения. Эти значения всегда начинаются с решетки. За ними обычно следуют три пары цифр и/или букв. Они представляют красный, зеленый и синий. Таким образом, цвета всегда указываются по следующей схеме:

RRGGBB

Значение #ffffff обозначает белый цвет. Если же использовать #000000, то будет показан черный цвет. В "разумных" HTML-редакторах есть соответствующие палитры цветов.

Вы можете вычислить шестнадцатеричные коды. Кроме того, на множестве веб-сайтов (например, http://www.farbtabelle.net/) есть соответствующие таблицы цветов

В CSS есть возможность сократить запись шестнадцатеричных цветов. Однако этот принцип применим не ко всем цветам. Это действительно работает только тогда, когда значение состоит из трех равных пар. Типичными примерами являются определения цветов для черного и белого. Обычно они записываются так:

.schwarz {
   color: #000000;
}
.weiss {
   color: #ffffff;
}

Этот синтаксис также можно сократить.

.schwarz {
   color: #000;
}
.weiss {
   color: #fff;
}

В CSS также допускаются RGB-значения. Здесь указываются десятичные значения от 0 до 255, разделенные запятыми. Порядок указания цветов соответствует порядку шестнадцатеричных цветов.

a { 
color: rgb(100%, 100%, 100%); 
background: rgb(0, 0, 0); 
}

Как показано в примере, также возможны процентные значения, хотя на практике они встречаются редко.

Другим вариантом для определения цветов являются ключевые слова для цветов. Вот несколько примеров:

• black

• red

• blue

• yellow

• white

• green

Соответствующее определение может выглядеть так:

p { 
 color: white; 
 background: black; 
}

Обратите внимание, что с появлением CSS3 палитра доступных ключевых слов для цветов значительно расширилась. CSS3 добавил цвета из спецификации SVG. Обзор доступных названий цветов можно найти на http://www.w3.org/TR/SVG/types.html#ColorKeywords.

Определение фона

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

• background-attachment

• background-color

• background-image

• background-position

• background-repeat

Эти данные разделены пробелами. Порядок их следования не имеет значения. Не обязательно указывать все значения.

Пример:

p { 
    background: transparent
    url(logo.jpg)
    scroll repeat 0% 0%; 
 }

Цвета фона

Чтобы назначить элементу цвет фона, используется свойство background-color.

div { 
   background-color: #009999;
}

В качестве значения укажите нужный цвет.

Графические фоны

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

• none – без фоновой графики

• URI – путь к изображению

Приведем краткий пример.

<div style="background-image:url(hinten.jpg); margin:20px; padding:20px">
    Добро пожаловать на PSD-Tutorials.de!
</div>

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





Конечно, есть сайты, где важен только внешний вид. Здесь, безусловно, можно работать с более яркими фонами.

Прокручиваемые фоны

При длинных элементах фоновое изображение будет двигаться вместе со скроллом страницы. С помощью background-attachment это можно предотвратить.

• fixed – движется вместе

• scroll – фоновое изображение остается на месте и выравнивается по окну браузера (Viewport).

Свойство background-attachment обычно используется в сочетании с background-image.

Пример:

div.fest {
	background-image: url(background.gif);
	background-repeat: no-repeat;
}

Положение фона

Свойство background-repeat задает позицию, с которой начнется фон. Отсчет происходит от элемента, для которого была определена графика.

• Процентированный – одно или два значения, определяющие расстояние графики от верхнего левого угла элемента. В случае двух значений первое обозначает горизонтальное, а второе вертикальное расстояние. Точкой отсчета не является верхний левый угол графики, а точка внутри графики, которая также указывается x/y-значениями.

• Линейный – определяет расстояние графики от ее левого верхнего угла до левого верхнего угла элемента. Разрешены одно или два значения. Если указаны два значения, первое определяет горизонтальное расстояние, второе вертикальное.

Дополнительно возможны следующие ключевые слова:

• left – по горизонтали слева

• center – по центру

• right – по горизонтали справа

• top – по вертикали сверху

• bottom – по вертикали снизу

Вот пример, как это может выглядеть:

p {
	background-position: 8ем сверху;
}

Повторяющиеся фоновые изображения

Как и сколько раз будет повторяться фоновая графики, если она меньше отображаемой области, можно определить с помощью background-repeat.

• повторение – изображение фона будет повторяться вертикально и горизонтально, заполняя весь элемент.

• повторить-x – графика будет повторяться только горизонтально.

• повторить-у – графика будет повторяться только вертикально.

• no-repeat – графика не будет повторяться.

Вот пример:

body {
	background-repeat: повторить-y;
}

В этом случае графика будет повторяться только вертикально.

Если указать повторить-y, то повторение будет осуществляться исключительно горизонтально.





Этот учебник показал, насколько мощен CSS также в области цветов и изображений.