Группировка селекторов

Передоложим, необходимо чтобы текст элементов H2 и абзацев был серого цвета. Для этого в левой части правила, располагаются селекторы (H2 и P), которые разделены запятой, а в правой части определяется объявление, согласно которому определяется соответствующий стиль:

H2, P {color:gray;}

При этом нет никаких ограничений на количество объединяемых в группу селекторов:

BODY, TABLE, TH, TD, H1, H2, H3, H4, P{color:gray;}

Группировка объявлений

Селекторы возможно группировать в одно правило, а следовательно, также можно группировать и объявления. Предположим, необходимо, чтобы текст всех элементов H1 был представлен шрифтом Helvetica фиолетового цвета высотой в 18 пикселов на фоне цвета морской волны. Данные стили возможно написать следующим образом:

H1 {font: 18px Helvetica;}

H1 {color: purple;}

H1 {background: aqua;}

Представленный выше способ не совсем эффективен, если подобный список создается для элемента, у которого будет 10 или 15 стилей. В таком случае объявления можно сгруппировать следующим образом:

H1 {

font: 18px Helvetica;

color: purple;

background: aqua;

}

Селекторы классов

Самый распространенный способ применения стилей без учета элементов состоит в том, чтобы обратиться к селекторам классов (class selectors), позволяющих назначать стили независимо от элементов документа. Однако сначала придется изменить разметку документа так, чтобы обеспечить возможность работы селекторов класса. Для этого необходимо ввести атрибут Class. Чтобы связать стили селектора класса с элементом, необходимо присвоить соответствующее значение атрибуту Classданного элемента. В представленном ниже примере, значение warning было присвоено двум элементам: первому абзацу и элементу spanво втором абзаце.

<P Class="warning"> CSS (Cascading Style Sheets)</P>

Пример.

<P>Технология описания внешнего вида документа, написанного языком разметки. Преимущественно используется как средство оформления веб-страниц в форматах: <SPAN Class="warning">HTML, XHTML, XML. </SPAN> CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения и других аспектов представления документа… </P>

Допустим необходимо выделить полужирным шрифтом текст только в том случае, если предупреждением является весь абзац:

p.warning {font-weight: bold;}

Теперь селектор выбирает только элементы р, у которых значение атрибута class равно warning, и игнорирует все другие элементы независимо от их класса.