www.ПЕРВЫЕ ШАГИ.ru :: Шаг 23 - CSS: Цвета элементов

Для начала расскажу о том, как задаются цвета в каскадных таблицах стилей. Если Вы помните, а Вы помните :-), цвет элементов в html задается часто с формате #RRGGBB или названием цвета. В таблицах стилей способов задания цвета намного больше.

Естественно первым из них является всем известный формат #RRGGBB. Но кроме такого задания цветов в hex формате существует еще и укороченный формат, в котором цвета задаются также, но только маска короче - #RGB. С помощью него Вы можете задать намного меньше цветов, но если у Вас цвет относится к "основным", то этот способ позволит сохранить несколько байт :-)

Вторым способом задания является задание в численной или процентной форме. Для использования этого метода значения цветов указываются через запятую внутри скобок rgb(R,G,B). Если значения составляющих цвета указываются в численном формате, то они могут иметь значения 0-255. Если значение составляющей цвета превышает 255, то браузер его округляет до 255 :-) Пример:

	красный цвет = rgb(255,0,0)

Если Вы не знаете точное значение компонент цвета, то можете использовать процентную форму:

	красный цвет = rgb(100%,0%,0%)

При этом значения процентов могут указываться с точностью до десятых долей, т.е. 0.1%, ...,99.9%,100%. Этого кажется довольно много :-) Будьте уверены, что браузер будет "обрубать" значения таких цветов. И еще значения компонент цвета превыщающие 100% округляются.

Цвет отображения

Параметр color задает цвет отображения элемента. Цвет задается рассмотренными выше способами :-) Вот вам несколько примеров задания зеленого цвета:

	b {color: green}
	b {color: #00FF00}
	b {color: rgb(0,255,0)}

Цвета фона и изображения для фонов

Для задания цвета фона используется параметр background-color. Он может принимать два значения: цвет фона или значение transparent. Цвет фона задается теми же способами, что и у параметра color. Если цвет фона задан как transparent, то фон является "прозрачным", т.е. никак не выделяется. По умолчанию цвета фона для большинства элеметов устанавливаются прозрачными, или же в соответствии с пользовательскими настройками.

	b {color: green; background-color: red}

Так вы зададите раздражающе-успокаивающий цвет для тега жирности <b> :-))

Если Вы помните, то раньше мы могли задавать в виде фона картинку. Этот параметр был не у всех элементов, но теперь мы сможем использовать фоновые изображения у всех элементов. Задается изображение фона параметром background-image. Он может принимать значения none или URL изображения. С URL не все просто :-) Его надо указывать внутри url(...). Смотрим пример:

	b {background-image: none}
	body {background-image: url(back.gif)}
	p {background-image: url(http://www.your.ru/b1.gif)}

Если размер покрываемого объекта больше размера изображения, то браузер начинает его размножать. Этим размножением можно управлять. Для этого служит параметр background-repeat. Он может принимать четыре значения:

repeat - размножает изображение по всей плоскости.
repeat-x - размножает изображение по горизонтали.
repeat-y - по вертикали.
no-repeat - не размножает.

Вы наверно встречали странички, у которых фоновое изображение неподвижно или двигается вместе с текстом. У IE для этого существует определенный параметр тега <body>, но он не входит в спецификию языка. Теперь с помощью CSS мы можем управлять и этим свойством странички. Как раз для этих целей существует параметр background-attachment, длинновато как-то, но авось привыкнем :-) У него, как уже можно догадываться, существует два значения: scroll - для плавающего фона и fixed - для фиксированного. Сами понимаете, что никогда у параграфа не появится прокрутка :-), поэтому на что-либо влиять будет этот параметр только у тега html или body.

Все эти возможности конечно же не все, еще есть возможность выравнивать края фонового изображения. Для этого предназначен параметр background-position, который задает расположение краев изображения относительно краев элемента. Значения этого параметра могут задаваться несколькими способами. Первый способ это задание положения верхнего левого угла изображения относительно этого же угла элемента в сантиметрах. Для этого используется пара значений, одно по горизонтали, а другое по вертикали и приписывается к числам слово cm(пример: 1cm 3cm - 1 см. по гориз. 3 по вертикали).

Второй способ задает положение изображения в процентах. Для этого берется указанная в процентах точка на изображении и на элементе, а потом эти точки совмещаются. Поэтому если Вы запишите 15% 20%, то точка с координатами (15%,20%) на изображении совместится с точкой (15%,20%) на фоновой плоскости элемента. Для значений 0%, 50% и 100% существуют стандартные названия. По горизонтали это left, center, rigth, а по вертикали top, center, bottom. Поэтому запись "bottom left" или "left bottom" равносильны "0% 100%". Заметьте, что эти названия можно переставлять местами, потому что их просто различить. Последнее, что можно отметить по поводу выравнивая это то, что процентые и сантиметровые соотношения можно смешивать, т.е. можно писать "2cm 10%" или "bottom 5cm".

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

	BODY { background: black }
	P { background: blue url(newimage.jpg) 50% 2cm scroll no-repeat}

Сколько всего много !!! Просто ужас, кое как укладывается... А никто и не говорил, что делать грамотные и продвинутые странички так просто !!! Хехе :-)