CSS: определяем элементы

В прошлой статье про каскадные таблицы стилей мы определились с тем, как их можно подключить к документу. Сегодняшний же рассказ будет о том, как определить те элементы, чей внешний вид мы хотим настроить с помощью 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>

Класс может быть не привязан к типу элементов В таблице стилей можно описать и класс, не привязанный к какому-то элементу:

 .redelement {color: #FF0000; font-size: 12px; } 

Такой класс может быть применен не только к параграфу, но и, например, к ячейке таблицы, тегу FONT или еще чему-то — достаточно в документе указать, например, <FONT>.

Один стиль можно привязать к нескольким элементамОдно и то же описание можно присвоить сразу нескольким элементам — для этого достаточно перечислить их через запятую в таблице стилей. Например, если вы хотите, чтобы заголовки любого уровня были одного размера, то в таблице стилей можно написать:

 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;}

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

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

Ссылки по теме

• Что такое каскадные таблицы стилей (CSS)

Статья получена: hostinfo.ru

загрузка...