Visited

Link

Hover

Active

Псевдоклассы

Селекторы параметров.

Классы, определяемые пользователем

Универсальный селектор

Типы селекторов.

В качестве селекторов (имен стилей) могут использоваться:

· универсальный селектор

· (X)HTML-теги;

· классы определяемые пользователем;

· идентификаторы, определяемые пользователем;

Универсальный селектор позволяет установить общие параметры форматирования для всех документа.

* {

font-size: 12pt;

font-family: Arial;

}

7.2. Селекторы тегов.

Любой (X)HTML-теги могут быть использованы в качестве селектора. Таким образом возможно указывать параметры форматирования конкретного тега. Но при этом следует учитывать специфику тега. Например, тег <br /> не содержит текст, следовательно, к нему невозможно применить правила для установки шрифта или цвета.

Синтаксис:

тег { свойство1: значение1;

свойство2: значение2;

…

свойствоN: значениеN; }

Пример:

Классы применяются, когда необходимо определить стиль для индивидуального элемента веб-страницы или задать разные стили для одного тега.

Синтаксис:

Тег.Имя класса { свойство1: значение; свойство2: значение; ... }

.Имя класса { свойство1: значение; свойство2: значение; ... }

Имя класса выбирается произвольно.

Для того, чтобы применить описанный класс к тегу, следует добавить к соответствующему тегу параметр class=”Имя класса”.

Синтаксис:

<тег class=”Имя класса”>…</тег>

Пример.

CSS позволяет определять классы, которые можно применять к любому тегу (X)HTML. Синтаксис описания такого класса:

.Имя класса { свойство1: значение; свойство2: значение; ... }

Пример.

7.4. Селекоторы идентификаторов

Идентификатор определяет уникальное имя элемента, которое используется для установки оформления этого элемента, обращения к нему из скриптов. При помо

Каждый идентификатор может встречаться на странице только один раз.

Синтаксис:

#идентификатор { свойство1: значение1; свойство2: значение2; … }

7.5. Контекстные селекторы

Контекстный селектор состоит из простых селекторов разделенных пробелом. Так, для селектора тега синтаксис будет следующий.

Тег1 Тег2 { ... }

В этом случае стиль будет применяться к Тегу2 когда он размещается внутри Тега1, как показано ниже.

<Тег1>

<Тег2> ... </Тег2>

</Тег1>

<Тег1>

<Тег2> ... </Тег2>

</Тег1>
Селектор[атрибут] { Описание правил стиля }
Псевдокласс active определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее.
Определяет стиль элемента при наведении на него курсора мыши.
Псевдокласс link применяется к ссылкам, которые еще не посещались пользователем, и задает для них стилевое оформление.
Псевдокласс visited применяется к ссылкам, уже посещенные пользователем, и задает для них стилевое оформление.