Принцип оформления веб-страниц с помощью CSS сводится к двму простым операциям — выбор необходимых элеметов и задание правил их оформления. Не буду сейчас подробно останавливаться на том, что есть элемент и какие правила оформления можно для них задавать. Все это будет рассмотрено в более поздних статьях. А сейчас я хочу рассмотреть инструмент который предлагает CSS для выбора элементов.
Речь пойдет о CSS селекторах. По сути, это набор шаблонов которые описывают некоторый, достаточно простой регулярный язык. Или другими словами это набор правил, по которым браузер находит интиресующие нас элементы. Я понимаю, что данное описание звучит сложно, поэтому приведу простой пример. Допустим, у нас есть веб-страница следующего содержания:
<HTML>
<HEAD>
Веб-страница
</HEAD>
<BODY>
<H1>Заголовок страницы</H1>
<P>Текст на странице</P>
<P>Текст на странице</P>
</BODY>
Что здесь является элементами, а что нет? Несколько упрощая можно сказать, что элементами являются все слова заключенные в треугольные скобки — HTML, HEAD, BODY, H1, P. Поэтому чтобы выбрать все элементы P (в данном пример их два) потребуется следующий селектор — «P». Но правило CSS, как я сказал раньше, состоит из двух частей, поэтому после селектора необходимо задать описание оформления выбранных элементов, например так:
P{border: 1px solid black}
Обратите внимание, что правила оформления задаются в фигурных скобках.
Теперь, когда небольшое представление о том, что такое селектор уже есть, давайт рассмотрим все возможные селекторы, которые предлагает нам спецификация CSS2.1.
ШаблонОписание
*Выбор всех элементов на странице
EВыбор элемента типа E (в примере выше, это был элемент P)
E FВыбор элемента типа F, который идет сразу после элемента типа E. Например, чтобы выбрать абзацы идущие сразу после заголовка нужно указать такой селектор «H1 P».
E > FВыбирает все элементы типа F, которые являются потомками элемента E. Этот селектор используется когда есть вложенность элементов, для примера выше это может быть такой селектор «BODY > P».
E:first-childВыбирает все элементы которые являются первыми потомками элемента E
E:link E:visitedВыбирает элементы которые являются ссылками по признакам: visited — посещенная, link — не посещенная
E:active E:hover E:focusВыбирает элементы в зависимости от действий пользователя
E + FВыбирает все элементы F которые являются смежными с элементами E
E[foo]Выбирает все элементы E у которых задан параметр foo
E[foo=«warning»]Выбирает все элементы E у которых параметр foo имеет значение warning
E[foo~=«warning»]выбирает все элементы E у которых параметр Foo задан набор значений разделенных пробелом один из которых Warning
DIV.warningВыбирает все элекменты DIV у которых параметр class имеет значение Warning
E#myidВыбирает все элементы E у которых параметр ID равен myid
Казалось бы, такое небольше количество селекторов сильно ограничивает возможности по оформлению веб-страницы. На самом деле это, конечно, не так. Например, только два селектора выбирающих элементы по параметрам Class и Id уже позволяют решить почти любую задачу оформления. Конечно в некоторых случаях, это приводит к очень большой избыточности. Поэтому правильное использование и понимаени селекторов CSS позволит Вам гораздо оптимальнее решать задачи по созданию и сопровождению веб-страниц.