Определяем элементы
В прошлой статье про каскадные таблицы стилей мы определились с тем, как их можно подключить к документу. Сегодняшний же рассказ будет о том, как определить те элементы, чей внешний вид мы хотим настроить с помощью CSS. Если вы пожали плечами и проговорили про себя, мол, неужто они думают, что я про классы никогда не слышал?, то попробуйте ответить на вопрос: почему CSS называют не какими-то, а именно каскадными таблицами стилей?...Для того, чтобы ответить на заданный выше вопрос о каскадировании, сначала надо определиться с тем, как те или иные стили настраиваются для применения к тем или иным элементам.
Стили описываются следующим образом:
элемент {параметр: значение;}
Пар параметр-значение может быть несколько, тогда все они будут относиться к соответствующему элементу. Каждая пара заканчивается точкой с запятой, последнюю точку с запятой можно не ставить. Обратите внимание, что в описании используется двоеточие, а не знак равенства, как в HTML - это очень типичная ошибка! Вообще, таблицы стилей надо тщательно проверять на ошибки - если вы опечатаетесь в имени параметра, то вам не будет выдано никаких предупреждений, просто данный параметр будет отброшен.
Самый простой способ настроить внешний вид документа - это задать стиль отображения для требуемых тегов HTML. Например, если мы хотим каждый параграф вывести зеленым цветом и размером в 12 пикселей, то в описании стилей можно написать:
P {
color: #00FF00;
font-size: 12px;
}
Способ работает хорошо, но часто возникает необходимость отдельные абзацы как-то выделить. Для этого можно использовать классы и/или идентификаторы. По большому счету разница между ними только в том, что идентификатор относится к какому-то одному элементу (и, кстати, по стандарту все идентификаторы в документе должны быть уникальными, но на это часто не обращают внимания - все браузеры успешно работают с неуникальными идентификаторами), а класс может применяться к группе элементов (в том числе и разнородных).
Например, если в документе требуется абзац выделить красным, то можно в таблице стилей написать:
P#redelement {
color: #FF0000;
font-size: 12px;
}
а в документе указать: <p ID="redelement">
Если же предполагается, что красных абзацев будет несколько, то правильнее будет использовать класс (обратите внимание, что идентификатор отделяется "диезом", а класс - точкой):
P.redelement {color: #FF0000; font-size: 12px; }
а в документе: <p class="redelement">
В таблице стилей можно описать и класс, не привязанный к какому-то элементу:
.redelement {color: #FF0000; font-size: 12px; }
Такой класс может быть применен не только к параграфу, но и, например, к ячейке таблицы, тегу FONT или еще чему-то - достаточно в документе указать, например, <FONT CLASS="redelement">.
Одно и то же описание можно присвоить сразу нескольким элементам - для этого достаточно перечислить их через запятую в таблице стилей. Например, если вы хотите, чтобы заголовки любого уровня были одного размера, то в таблице стилей можно написать:
H1, H2, H3, H4, H5, H6 {font-size: 20px;}
Однако значительно более полезным бывает описание стиля вложенных элементов. Например, вам может захотеться, чтобы все теги SMALL, которые находятся внутри абзаца выделялись красным цветом, а те, которые не в абзаце (а, например, в ячейке таблицы) сохраняли свою естественную окраску. Для этого достаточно указать требуемые элементы через пробел:
P SMALL {color: #FF0000;}
Такое объявление будет относиться только к элементам SMALL, расположенным внутри P. Уровень вложенности может быть любой, но больше трех уровней применяется редко - слишком запутанной получается картина. Разумеется, такого же эффекта можно добиться просто создав отдельный класс и описав все вложенные SMALL с этим классом, но если подобная конструкция повторяется часто, то использование вложенности более удобно и позволяет сократить размер документа. Кстати, "вкладывать" можно не только теги HTML, но и классы.
Для удобства пользователей в CSS есть еще несколько встроенных псевдоэлементов и псевдоклассов. Например, можно указать стиль для псевдоэлемента first-letter, который изменит вид первой буквы каждого абзаца. А псевдоклассы очень часто используются для работы со ссылками. Например, описание:
A:link {text-decoration: none;}
A:visited {text-decoration: none;}
A:active {text-decoration: none;}
A:hover {text-decoration: underline; color: #FF0000; }
уберет подчеркивание со ссылок, но когда пользователь подведет мышку к ссылке, она подчеркнется и покраснеет.
Теперь вернемся к вопросу о каскадировании стилей, заданному в начале статьи. Предположим, что мы описали стиль параграфа, в котором указали, что цвет текста должен быть зеленым. Также мы задали стиль тега SMALL, чтобы цвет был синим. А для тега SMALL "вложенного" в параграф, указали цвет - красный. Теперь, если мы в документе внутри параграфа часть текста выделим тегом SMALL, то к этому тексту подойдут два противоречащих друг другу определения: с одной стороны, маленький текст должен быть синим, но "вложенный" маленький текст должен быть красным...
Вот тут-то и вступает в игру каскадирование. Сначала браузер собирает все описания стилей встреченного элемента. Если описания стиля нет, то стиль наследуется от "родительского" элемента (того, в который вложен данный), если же и там стиль не определен, то используется значение по умолчанию. В простых случаях на этом этапе все и заканчивается, но часто бывает так, что конфликт описаний сохраняется. Самым простым примером конфликта может служить повторное описание того же самого элемента, но с другим стилем. Что же делать несчастному браузеру?
Обнаружив конфликт описаний браузер отсортирует описания по важности (важность того или иного стиля можно указать с помощью метки !important после описания, например:
SMALL {color: #00FF00 !important;}
После этого описания отсортируются по специфичности - чем более конкретно указано к какому элементу надо применять стиль, тем выше специфичность. Самая высокая специфичность у идентификатора, ниже - у класса, еще ниже - у элемента. Именно правило с наивысшей специфичностью и будет применяться. Если же специфичность одинакова, то будет использоваться последнее из описаний.
Именно таким образом каскадные таблицы стилей, во-первых, "каскадно" наследуют стили от родителей к потомкам, а во-вторых, разрешают конфликты, определяя важность противоречащих друг другу описаний...
Источник: www.rupixel.com
© 2010