 |
Главная Случайная страница Контакты | Мы поможем в написании вашей работы! | |
Классы и идентификаторы стилей
|
|
CSS реализует возможность присваивать стили не всем одинаковым элементам страницы, а избирательно – для этого используется параметр CLASS = “имя класса” или идентификатор ID = «имя элемента», присваивающиеся любому элементу страницы. Рассмотрим эти возможности подробнее.
Класс позволяет задать разные правила форматирования для одного элемента определённого типа или всех элементов документа. Имя класса указывается в селекторе правила после имени тега и отделяется от него точкой. Можно определить несколько правил форматирования для одного элемента и с помощью параметра CLASS соответствующего тега применять разные правила форматирования. Например, можно определить два класса для отображения заголовка первого уровня:
<STYLE TYPE="text/css">
<!—-
H1.red {color: red}
H1.blue {color: red; background-color: blue}
-->
</STYLE>
В тексте документа ссылка на соответствующий класс задаётся в параметре CLASS:
<H1 CLASS="red">Красный шрифт</H1>
<H1 CLASS="blue">Красный шрифт на синем фоне</H1>
В приведённом примере классы задавались для разного отображения элементов одного типа. Если класс должен применяться ко всем элементам документа, то в селекторе задаётся имя класса с лидирующей точкой без указания конкретного элемента:
<STYLE TYPE="text/css">
<!—-
.red {color: red; }
.blue (color:red; background-color: blue;}
-->
</STYLE>
Теперь два класса red и blue можно применять к любым элементам документа:
<P CLASS="red">Красный шрифт</P>
<P CLASS="blue">Красный шрифт на синем фоне</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></BODY>
В этом примере абзац идентифицирован именем myID в параметре ID, поэтому к нему применимо правило с селектором #myID. Второе правило в таблице стилей должно применяться к заголовку первого уровня с идентификатором form3. Такого элемента в нашем фрагменте нет, и поэтому заголовок form2 отображается с применением правила по умолчанию.
Дата публикования: 2015-10-09; Прочитано: 255 | Нарушение авторского права страницы | Мы поможем в написании вашей работы!
