|
|
|
|
Правила каскадных таблиц стилей, в которых в качестве селектора используются тэги HTML, влияют на отображение всех элементов заданного типа в документе. Следующие правило отображает без подчёркивания все ссылки (тэг <A>) в документе:
А что делать, если необходимо некоторые ссылки отобразить по-другому? Можно задать для них правило форматирования непосредственно в тэге, а можно применить параметр class, добавленный в HTML 4.0 в качестве стандарта для всех тэгов. Значением параметра class является ссылки на класс, задаваемый в таблице стилей.
Класс позволяет задать разные правила форматирования для одного элемента определённого типа или всех элементов документа. Имя класса указывается в селекторе правила после имени тэга и отделяется от него точкой. Можно определить несколько правил форматирования для одного элемента и с помощью параметра class соответствующего тэга применять разные правила форматирования в документе. Например, можно определить два класса отображения заголовка первого уровня:
В тексте документа ссылка на соответствующий класс задаётся в параметре class:
В параметре имя класса может быть заключено в двойные или одинарные кавычки, или задаваться вообще без кавычек. В приведённом примере классы задавались для разного отображения элементов одного типа. Если класс должен применяться ко всем элементам документа, то в селекторе задаётся имя класса с лидирующей точкой без указания конкретного элемента:
Теперь два класса red и blueBgrd можно применить к любым элементам документа:
Параметр id задаёт уникальное имя элемента, которое используется для ссылок на него в сценариях JavaScript и таблицах стилей. Параметр id можно применить к любому элементу документа. Правила таблиц стилей регламинтируют использование уникального идентификационного имени элемента в качестве селектора, предваряя его символом #:
В этом примере абзац идентифицирован именем par24 в параметре id, поэтому к нему применимо правило с селектором #par24. Второе правило в таблице стилей должно применяться к заголовку первого уровня с идентификатором form3. Такого элемента в нашем фрагменте HTML-кода нет, а заголовок form2 отображается с применением правила по умолчанию.
При разработке страниц HTML часто приходиться одни элементы вкладывать в другие, например, выделять слова тэгом <EM> в каком-нибудь абзаце задаваемом тэгом <P>. В этом случае говорят, что элемент <P> порождает элемент <EM> и является его предком, а сам элемент <EM> является потомком элемента <P>. Некоторые свойства предка наследуются потомком, например, цвет шрифта (свойство color). Если необходимо чтобы выделяемые только в абзацах элементы отображались одним образом, а в других частях документа по - другому применяют контекстные селекторы. Например, для отображения в абзацах текста выделеного тэгами <EM> шрифтом жёлтого цвета необходимо задать следующее правило:
Контекстный селектор состоит из нескольких простых, разделённых пробелами. Интерпритатор браузера просматривает в стеке все открытые элементы, находит элементы <EM>, порождённые элементом <P>, и применяет к ним указанное правило форматирования.
Активная ссылка - это ссылка, которая выбрана в данный момент, причём необязательно курсором мыши, а, например, при помощи клавиши Tab. Любую ссылку в документе можно отнести к одному из перечисленных классов. В каскадных таблицах текст, заключённый между символами /* и */, является комментарием. Так называемые псевдоклассы применяются к единственному типу элементов - <A>, поэтому при задании их в селекторе правил этот элемент можно опустить. Следующие два правила равносильны:
|
