CSS | Цвет и графика

Вологодский Государственный Педагогический Университет

СSS

Каскадные Таблицы Стилей

Цвет и графика

Задание цвета в CSS

Цвет в CSS имеет числовое представление, в котором описаны интенсивности трех составляющих - красного, зеленого и синего. Интенсивность каждой составляющей варьируется от 0 (черный) до 255 (максимально возможная яркость). Зная три составляющие, цвет можно задать следующим образом: rgb(Red, Green, Blue). Здесь Red - это интенсивность красного, Green - интенсивность зеленого, а Blue - синего.

Другим способом задания цвета является шестнадцатиричное представление. Каждая компонента цвета представляется шестнадцатиричным числом от 00 (что соответствует нулю) до FF (255), затем числа записываются друг за другом в следующем порядке: красный, зеленый, синий. Получившемуся числу предшествует знак #. Например, запись rgb(204, 203, 188) преобразуется в #CCCBBC (204=CC, 203=CB, 188=BC). Также возможна запись #ABC, которая преобразуется в #AABBCC.

Цвет текста и фона

Цвет текста в CSS задается свойством color. Значение формируется вышеописанным способом.

Цвет фона - свойством background-color. Значение формируется аналогично. Цветом фона заполняется весь контейнер, к которому применяется свойство.

color: #464640;
background-color: #D9E7D5;

Графика в качестве фона.

Многие при создании дизайна, в котором присутствуют картинки, используют тег <img>. Причем именно для изображений, которые являются частью дизайна (например, изображения в "шапке" и "подвале" сайта), а не содержимого. И это опять же не правильно, потому что в идеале HTML ничего не должен знать о дизайне, это задача CSS и фоновых изображений. Рассмотрим некоторые свойства, позволяющие использовать изображения в качестве фона:

background-image

Собственно свойство, устанавливающее в качестве фона некоторое изображение, которое задается в виде url(путь/к/файлу/изображения). Путь к файлу может быть относительным или абсолютным. Абсолютный путь задачется относительно корневой папки сайта. Относительный путь - относительно положения файла CSS, в котором это свойство прописано.

background-repeat

Свойство определяет, каким образом необходимо "замостить" объект фоновой картинкой. Значения: repeat-x - повторение по горизонтали, repeat-y - повторение по вертикали, no-repeat - без повторения. По-умолчанию, если это свойство не задано явно, картинка повторяется и горизонтально, и вертикально.