FAQ по CSS - Цветовая реальность | Блог Алексея Фомичева

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

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

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

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

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

1
h2{color:#cc0000;}

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

1
2
body {background-color:#ededed;} или
body {background-image:url(bg.gif);}

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

1
body {background:url(bg.gif) #ededed;}

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

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

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

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

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

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

  • по его назначению;
  • по шестнадцатеричному значению;
  • с помощью RGB

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

1
2
color:red;
background-color:green;

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

1
2
color:#cc0000;
background-color:#000000;

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

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

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

В следующей записи вы узнаете, как управлять видом ссылок.

С уважением, Алексей Фомичёв

Про Чапаева и Петьку:
Василий Иванович с Петькой сдают экзамен по математике, получили билеты и вдруг выскочили на улицу. Удивленный профессор выходит за ними. Смотрит — Петька землю лопатой роет.
— Ты что, Петька?
— Корень квадратный ищу.
— А Василий Иванович где?
— А ему задали одночлен на многочлен разложить, так он плачет и шашку точит...



Поделись с друзьями в социальных сетях!




14.12.2013 / Создание блога / Теги: ,
Похожие записи

Оставить комментарий