CSS Цвет в CSS. Классы. Идентификаторы

В CSS (каскадных таблицах стилей) цвета можно задавать несколькими способами: указав его название; задав цвет посредством процентного соотношения красной, зеленой и синей составляющих; с использованием шестнадцетиричного кода.

Наиболее простой способ описать цвет в CSS – просто использовать его название. Но существует только 17 цветов, которые могут задаваться таким способом. white, silver, gray, black, maroon, red, orange, yellow, olive, lime, green, aqua, blue, navy, teal, fuchsia, purple

Можно определить цвет, указав сочетания красного, зеленого и синего в определенной пропорции. Например, указав rgb (80%, 40%, 0%) мы указываем на оранжевый цвет. Можно задавать значение красного, зеленого и синего числами от 0 до 255. Например, вместо 80% красного, 40% зеленого и 0% синего можно записать 204 красного, 102 зеленого и 0 синего (т.е. 80% от 255 – это 204, 40% от 255 – это 102, и 0% от 255 – это 0): rgb (204, 102, 0).

Чаще всего задается цвет с помощью шестнадцетиричного кода. Каждому цвету и оттенку в палитре цветов соответствует шестнадцетиричный код (например, #cc6600, #a7cece). Каждый набор двух цифр такого кода представляет красную, зеленую и синюю составляющие цвета. Так, первые две цифры представляют красный цвет, следующие две – зеленый и последние две – синий. Если же задавать цвета по их кодовому обозначению, то можно работать с палитрой, состоящей из 16 миллионов цветов.

Как читать шестнадцетиричные кода? Каждый набор двух цифр представляет номер от 0 до 255. Они основываются не на десяти (от 0 до 9), а на шестнадцати цифрах (от 0 до F). a b c d e f 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Если вы, к примеру, видите шестнадцетиричное число b, знайте, что имеется в виду 11.

Так можно задавать цвета: background-color: orange; color: rgb (80%, 40%, 0%); background-color: rgb (204, 102, 0);

Классы Используя XHTML и CSS вместе, можно задать классы элементов, а затем применить стиль к каждому элементу, принадлежащему этому классу. Например, можно в файле elixir.html задать текст абзацев разным цветом так, чтобы он сочетался по цвету с напитком. Чтобы добавить элемент в класс, просто используйте в нем атрибут class со значением, соответствующим названию класса, например, greentea.

Теперь, когда абзац с описанием охлажденного зеленого чая принадлежит классу greentea, остается подготовить несколько правил для оформления этого класса элементов. p.greentea { color: green; }

Сначала нужно определить селектор р. Затем использовать символ «.», чтобы указать, что речь идет о классе. И наконец, указать само название класса greentea. Затем само правило, которое делает зеленым весь текст в абзацах, принадлежащих классу greentea.

Если вы захотите оформить точно так же все элементы blockquote, то нужно: в CSS-коде написать так: blockquote.greentea, p.greentea { color: green; } в XHTML-коде написать следующее:

Это будет означать, что к элементам класса greentea будет применен одинаковый стиль.

Что же делать, если нужно добавить элементы

,

,

,

и

в класс greentea? Неужели нужно писать один большой сектор? Если вы хотите, чтобы правило стиля применилось ко всем элементам класса greentea, можно написать его таким образом: .greentea { color: green; } Если вы опустите название всех элементов, добавите точку (.) и сразу за ней – название класса, то правило будет применено ко всем членам класса.

Идентификатор ID ID – это уникальный идентификатор, предназначенный для одного элемента на странице. Он используется подобно тому, как используется и атрибут class, однако, зачисляя элемент в класс, можно зачислить в этот же класс и другой элемент. Идентификатор всегда используется только для одного элемента на странице и для того, чтобы задать этому элементу уникальный стиль, который будет только для этого элемента. На странице может быть только один элемент с данным идентификационным именем.

Покажем, как использовать идентификатор. Сначала добавляем к элементу атрибут id и указываем уникальное имя идентификатора.

Абзац с гарантией

Затем в каскадной таблице нужно задать правила для элементов с идентификатором guarantee: #guarantee { color: purple; font-style: italic; border: 1px dashed white; }

Стилизация ссылок Ссылки бывают трех типов: непосещенные (по умолчанию имеют синий цвет) a:link { color: green; }

посещенные (по умолчанию в большинстве браузеров задан фиолетовый цвет) a:visited { color: red; }

ненажатая (при наведении указателя на ссылку она обычно меняет свой цвет) a:hover { color: yellow; } Записи a:link, a:visited и a:hover называется псевдоклассами. Они работают как классы, но запись отличается.

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