- •Каскадные таблицы стилей Общие положения
- •Связывание таблиц стилей с документом
- •Группирование и наследование
- •Селекторы
- •Селектор class
- •Селектор id
- •Контекстные селекторы
- •Применение таблиц стилей
- •Псевдоклассы
- •Псевдоклассы связей
- •Модель форматирования
- •Блоковые элементы
- •Встроенные элементы
- •Свойства форматирования элементов
- •1. Шрифты Свойство font-family
- •Свойство font-style
- •Свойство font-variant
- •Свойство font-weight
- •Свойство font-size
- •Свойство font
- •Свойство @font-face
- •2. Цвет и фон
- •Свойство color
- •Свойство background-color
- •Свойство background-image
- •Свойство background-repeat
- •Свойство background-attachment
- •Свойство background-position
- •Свойство background
- •Свойство line-height
- •4. Блоки
- •Свойства поля
- •Свойства отступа
- •Свойства границы
- •5. Визуальное форматирование Свойство position
- •Абсолютное позиционирование
- •Свойства top и left
- •Свойства width и height
- •Относительное позиционирование
- •Статическое позиционирование
- •Визуальные эффекты
- •Свойство visibility
- •Свойство display
- •Свойство clip
- •Свойство overflow
- •Свойство z-index
- •Отображение списков
- •Свойство list-style-type
- •Свойство list-style-image
- •Свойство list-style-position
- •Свойство list-style
Селекторы
Правила каскадных таблиц стилей, в которых в качестве селектора используются теги HTML, влияют на отображение всех элементов заданного типа в документе. Следующее правило отображает без подчеркивания все элементы-ссылки (тег <A>) в документе:
<STYLE TYPE="text/css">
<!--
A { text-decoration:none; }
-->
</STYLE>
А что делать, если необходимо некоторые ссылки отобразить по-другому? Можно задать для них правило форматирования непосредственно в теге, а можно применить атрибут CLASS, добавленный в HTML 4.0 в качестве стандарта для всех тегов. Значением атрибута CLASS является ссылка на класс, задаваемый в таблице стилей.
Селектор class
Класс позволяет задать разные правила форматирования для одного элемента определенного типа или всех элементов документа.
<STYLE TYPE="text/css">
<!--
H1.red { color: red; }
H1.blueBgrd { color: red; background-color: blue}
-->
</STYLE>
В тексте документа ссылка на соответствующий класс задается в атрибуте CLASS:
<H1 CLASS="red">Красный шрифт</H1>
<H1 CLASS="blueBgrd">Красный шрифт на синем фоне</H1>
Если класс должен применяться ко всем элементам документа, то в селекторе задается просто имя класса с лидирующей точкой без указания конкретного элемента:
<STYLE TYPE="text/css"><!--
.red { color: red; }
.blueBgrd { color: red; background-color: blue}
--></STYLE>
Теперь два класса red и blueBgrd можно применять к любым элементам документа:
<P ClASS=red>Первый параграф</P>
<P ClASS=blueBgrd>Второй параграф</P>
Селектор id
Параметр ID, как и параметр CLASS, не влияет на отображение браузером элемента HTML, но он задает уникальное имя элемента, которое используется для ссылок на него в сценариях и таблицах стилей. Атрибут ID можно применять к любому элементу документа.
Правила таблиц стилей регламентируют использование уникального идентификационного имени элемента в качестве селектора, предваряя его символом '#':
<STYLE TYPE="text/css"><!--
#par24 { letter-spacing: 1em; }
H1#form3 { color: red; background-color: blue}
--></STYLE>
<BODY>
<P ID=par24>Разреженные слова в параграфе</P>
<H1 ID=form2>Черный шрифт</H1>
Контекстные селекторы
При разработке страниц HTML часто приходится одни элементы "вкладывать" в другие, например, выделять слова тегом <EM> в каком-нибудь параграфе, задаваемом тегом <P>. В этом случае говорят, что элемент 'P' порождает элемент 'EM' и является его "предком", а сам элемент 'EM' является "потомком" элемента 'P'. Некоторые свойства предка наследуются потомком, например, цвет шрифта (свойство 'color'). Чтобы вложенные элементы отображались со своими значениями свойств, можно определить для них правила форматирования, как показано ниже:
<P> {color: blue}
<EM> {color: yellow}
Однако это приведет к тому, что все выделяемые в документе элементы будут отображаться шрифтом желтого цвета. А если необходимо, чтобы выделяемые только в параграфе элементы отображались желтым цветом, а в других частях документа каким-то другим цветом? Здесь помогут контекстные селекторы. Поставленную задачу решит следующее правило:
P EM {color: yellow}