Описание
Описание - Селекторы, классы, идентификаторы
| CSS - Справочник |
| Индекс материала |
|---|
| Описание |
| Группирование, наследование |
| Селекторы, классы, идентификаторы |
| Простейший пример |
| Все страницы |
Селекторы
Правила каскадных таблиц стилей, в которых в качестве селектора используются теги HTML, влияют на отображение всех элементов заданного типа в документе. Следующее правило отображает без подчёркивания все ссылки в документе.
<STYLE TYPE="text/css">
<!--
A {text-decoration:none;}
-->
</--STYLE>
Классы
А что делать, если нужно некоторые ссылки отобразить по-другому? CSS реализует возможность присваивать стили не всем одинаковым элементам страницы, а избирательно – для этого используется параметр CLASS = "имя класса" или идентификатор ID=«имя элемента», присваивающиеся любому элементу страницы. Рассмотрим эти возможности подробнее.
Класс позволяет задать разные правила форматирования для одного элемента определённого типа или всех элементов документа. Имя класса указывается в селекторе правила после имени тега и отделяется от него точкой. Можно определить несколько правил форматирования для одного элемента и с помощью параметра CLASS соответствующего тега применять разные правила форматирования. Например, можно определить два класса для отображения заголовка первого уровня:
<STYLE TYPE="text/css">
<!--
H1.red {color: red;}
H1.blue (color:red; background-color: blue}
-->
</STYLE>
В тексте документа ссылка на соответствующий класс задаётся в параметре CLASS:
<H1>Красный шрифт</H1>
<H1 CLASS="blue">Красный шрифт на синем фоне</H1>
В приведённом примере классы задавались для разного отображения элементов одного типа. Если класс должен применяться ко всем элементам документа, то в селекторе задаётся имя класса с лидирующей точкой без указания конкретного элемента:
<STYLE TYPE="text/css">
<!--
.red {color: red; }
.blue (color:red; background-color: blue}
-->
</STYLE>
Теперь два класса red и blue можно применять к любым элементам документа:
<P>Красный шрифт</P>
<P>Красный шрифт на синем фоне</P>
Первый абзац отразится красным шрифтом, а второй - красным шрифтом на синем фоне.
Идентификаторы
Присвоение стилей с помощью идентификаторов применяется в случае, если данному идентификатору соответствует только один элемент на странице. Если элементов, которым необходимо присвоить такой стиль, несколько – это уже класс.
Параметр ID, как и параметр CLASS, не влияет на отображение браузером элемента HTML, но задаёт уникальное имя элемента, которое используется для ссылок на него в сценариях и таблицах стилей. Параметр ID можно применять к любому элементу документа.
Правила таблиц стилей регламентируют использование уникального идентификационного имени элемента в качестве селектора, предваряя его символом #: <STYLE TYPE="text/css">
<!--
#myID {letter-spacing: 1em;}
H1#form3 (color:red; background-color: blue}
-->
</STYLE>
<BODY>
<P ID=myID>Разреженные слова в абзаце</P>
<H1 ID=form2>Чёрный заголовок</P>
В этом примере абзац идентифицирован именем myID в параметре ID, поэтому к нему применимо правило с селектором #myID. Второе правило в таблице стилей должно применяться к заголовку первого уровня с идентификатором form3. Такого элемента в нашем фрагменте нет, и поэтому заголовок form2 отображается с применением правила по умолчанию.