Цветовая реальность — FAQ по CSS

0
26
Цветовая реальность — FAQ по CSS
Цветовая реальность — FAQ по CSS

Самое интересное, что можно проделывать с помощью CSS – это определять цвет для фона и элементов веб-страницы. Иногда эта работа настолько захватывает, что позволяет включать мозги и заниматься творческой работой в улучшении дизайна своего сайта.

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

И первое такое свойство – это color, с помощью которого устанавливается цвет текста.

Допустим вам необходимо установить цвет для тега h2 чтобы он был отличен от цвета всех заголовков и текста на всех страницах сайта.

h2{color:#cc0000;}
Следующим свойством мы можем установить цвет для фона вашей странице — background-color. Так же за место цвета фона можно применять какой-либо рисунок с помощью свойства background-image. Применив данные свойство вначале документа в теге body можно задать оформление для вашего сайта.

body {background-color:#ededed;} или
body {background-image:url(bg.gif);}
Многие веб-мастера применяют такую конструкцию, которая позволяет совместить два этих свойства в одном, тем самым выводить фоновый рисунок, когда графика в браузере включена и выводить цветовое решение, когда графика отключена.

body {background:url(bg.gif) #ededed;}
Если вы хотите чтобы управлять фоном изображением, то воспользуйтесь свойством background-repeat, который определяет, как будет повторяться фоновое изображение и по какой оси. Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны.

Параметры свойства background-repeat: repeat, repeat-x, repeat-y, no-repeat – определяет повторяемость рисунка по осям х или у, во все стороны или выключает повторяемость.

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

Для этого существует свойство background-attachment, который может принимать значение scroll и fixed, т.е прокручивать изображение или оставлять его фиксированным.

Все остальные свойства вам просто не понадобиться в работе. Давайте лучше поговорим о том как вы можете задать цвет на веб-странице.

Задать цвет можно тремя способами:

по его назначению;
по шестнадцатеричному значению;
с помощью RGB
Для того чтобы задать цвет по его назначению достаточно прописать название данного цвета. Например:

color:red;
background-color:green;
Второй способ как можно задать цвет – это с помощью шестнадцатеричной системы исчислений.

color:#cc0000;
background-color:#000000;
Для краткости записи в такой системе можно использовать следующее сокращение #a00. Она означает, что каждый символ дублируется, в итоге получим #aa0000.

Так же существует еще одна система, основанная на соотношение красного, синего и зеленого цвета. Записи в такой системе записываются с помощью десятичной системы исчислений. Значение каждого из трех цветов может принимать значения от 0 до 255 или в процентах.

color:RGB(255,255,16);
background-color:RGB(80%,20%,10%);

Комментарии:

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here