Лекция 3. Создание статического содержания. CSS
Краткая аннотация: Данная лекция освещает основы применения каскадных таблицы стилей CSS (CSS-классы, наследование стилей, каскадные стили и т.д.). В заключение лекции дополнительно освещаются вопросы регистрация доменов и хостинга сайтов.
Список ключевых терминов: Каскадные таблицы стилей CSS, Таблицы связанных стилей, Таблицы глобальных стилей, Внутренний стиль, Селектор, Класс, Идентификатор, Контекстный селектор, Соседние селекторы, Дочерний селектор, Селекторы атрибутов, Универсальный селектор, Группировка, Наследование, Псевдоклассы, Псевдоэлементы, Домен, Доменное имя, Доменная зона, DNS, DNS-сервер, ICANN, Международные домены, Интернационализованные домены, Национальные домены, Зарезервированные доменные имена, Регистрация доменного имени, Ресурсные записи DNS, Хостинг, Бесплатный хостинг, Виртуальный сервер, Виртуальный выделенный сервер, Выделенный сервер, Колокация.
Цель лекции: Описать основы применения каскаждых таблиц стилей для статических HTML-страниц. Дополнительной целью лекции является введение в вопросы регистрации доменов и хостинга сайтов
Оглавление
3.1. Таблицы стилей CSS.. 3
3.1.1. Общее описание. 3
3.1.2. Добавление CSS.. 4
3.1.2.1. Таблица связанных стилей.. 5
3.1.2.2. Таблица глобальных стилей.. 6
3.1.2.3. Внутренние стили.. 6
3.1.3. Базовый синтаксис.. 6
3.1.4. Селекторы тегов.. 7
3.1.4.1. Классы.. 7
3.1.4.2. Идентификаторы.. 8
3.1.4.3. Контекстные селекторы.. 9
3.1.4.4. Соседние селекторы.. 10
3.1.4.5. Дочерние селекторы.. 10
3.1.4.6. Селекторы атрибутов. 11
3.1.4.7. Универсальный селектор.. 11
3.1.4.8. Группирование. 11
3.1.5. Наследование. 11
3.1.6. Псевдоклассы... 12
3.1.6.1. Псевдоклассы, определяющие состояние элементов. 13
3.1.6.2. Псевдоклассы, имеющие отношение к дереву документа.. 13
3.1.7. Псевдоэлементы... 13
3.1.8. Элементы CSS.. 14
3.1.8.1. Текст... 14
3.1.8.2. Цвет... 15
3.1.8.3. Ссылки.. 16
3.1.8.4. Списки.. 16
3.1.8.5. Единицы измерения. 17
3.1.9. Пример использования CSS.. 17
3.1.10. Ключевые термины... 22
3.2. Дополнительная тема: регистрация доменов.. 23
3.2.1. Общие сведения.. 23
3.2.2. Регистрация домена.. 25
3.2.3. Управление доменной зоной.. 25
3.2.4. Ключевые термины... 26
3.3. Дополнительная тема: хостинг сайтов.. 27
3.3.1. Общие сведения.. 27
3.3.2. Ключевые термины... 28
3.4. Краткие итоги... 29
3.5. Набор для практики... 31
3.6. Литература... 34
Таблицы стилей CSS
Общее описание
CSS (Cascading Style Sheets, каскадные таблицы стилей) – технология описания внешнего вида документа, написанного языком разметки [1]. Преимущественно используется как средство оформления веб-страниц в формате HTML и XHTML, но может применяться с любыми видами документов в формате XML, включая SVG и XUL.
CSS – одна из широкого спектра технологий, одобренных консорциумом W3C и получивших общее название «стандарты Web». В 1990-х годах стала ясна необходимость стандартизировать Web, создать какие-то единые правила, по которым программисты и веб-дизайнеры проектировали бы сайты. Так появились языки HTML 4.01, XHTML и стандарт CSS.
CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения и других аспектов представления документа [2]. До появления CSS оформление веб-страниц осуществлялось непосредственно внутри содержимого документа. Однако с появлением CSS стало возможным принципиальное разделение содержания (написанного на HTML или другом языке разметки) и представления (написанного на CSS) документа. Это разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом. Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печать, чтение голосом (специальным голосовым браузером или программой чтения с экрана) и др.
Наиболее полно поддерживающими стандарт CSS являются браузеры, работающие на Gecko (Mozilla Firefox и др.) и WebKit (Arora, Google Chrome, Safari), а также браузер Opera [3]. Что касается Internet Explorer, то только 8-ая его версия полностью поддерживает CSS 2.1 и частично – CSS 3 [4].
Основными преимуществами использования CSS являются:
· несколько дизайнов страницы для разных устройств просмотра;
· уменьшение времени загрузки страниц сайта за счет переноса правил представления данных в отдельный CSS-файл;
· простота последующего изменения дизайна;
· дополнительные возможности оформления (например, можно сделать так, чтобы меню было всегда видно при прокрутке страницы).
Недостатками использования CSS являются:
· различное отображение верстки в различных браузерах (особенно устаревших), которые по-разному интерпретируют одни и те же данные CSS;
· часто встречающаяся необходимость на практике исправлять не только один CSS-файл, но и теги HTML и серверный код, которые сложным и ненаглядным способом связаны с селекторами CSS, что значительно увеличивает время редактирования и тестирования.
Термин «Каскадные таблицы стилей » был предложен Хокон Виум Ли в 1994 году. Совместно с Бертом Босом он стал развивать CSS.
В отличие от многих существовавших на тот момент языков стиля, CSS использует наследование от родителя к потомку, поэтому разработчик может определить разные стили, основываясь на уже определенных ранее стилях.
В середине 1990-х Консорциум Всемирной паутины (W3C) стал проявлять интерес к CSS, и в декабре 1996 года была издана рекомендация CSS1.
Рекомендация W3C по CSS1, принята 17 декабря 1996 года, откорректирована 11 января 1999 года. Среди возможностей, предоставляемых этой рекомендацией, можно отметить:
· Параметры шрифтов. Возможности по заданию гарнитуры и размера шрифта, а также его стиля – обычного, курсивного или полужирного.
· Цвета. Спецификация позволяет определять цвета текста, фона, рамок и других элементов страницы.
· Атрибуты текста. Возможность задавать межсимвольный интервал, расстояние между словами и высоту строки (то есть межстрочные отступы)
· Выравнивание для текста, изображений, таблиц и других элементов.
· Свойства блоков, такие как высота, ширина, внутренние (padding) и внешние (margin) отступы и рамки.
Рекомендация W3C по CSS2, принята 12 мая 1998 года. Она построена на CSS1 с сохранением обратной совместимости. В данной CSS2 добавлены следующие возможности:
· Блочная верстка. Появились относительное, абсолютное и фиксированное позиционирование. Позволяет управлять размещением элементов по странице без табличной верстки.
· Типы носителей. Позволяет устанавливать разные стили для разных носителей (например, монитор, принтер, КПК).
· Звуковые таблицы стилей. Определяет голос, громкость и т. д. для звуковых носителей (например, для слепых посетителей сайта).
· Страничные носители. Позволяет, например, установить разные стили для элементов на четных и нечетных страницах при печати.
· Расширенный механизм селекторов.
· Указатели.
· Генерируемое содержание. Позволяет установить текст или картинку, который будет отображаться до или после нужного элемента.
Рабочая версия CSS2.1 W3C от 8 сентября 2009 года. Она построена на CSS2 и содержит исправления ошибок.
Рабочая версия CSS3 cильно расширена по сравнению с предыдущими версиями. Нововведения, начиная с малых, вроде закругленных углов блоков, заканчивая трансформацией (анимацией) и введением переменных.
CSS при отображении страницы может быть взята из различных источников:
· Авторские стили в виде:
o внешних таблиц стилей, то есть отдельного файла.css, на который делается ссылка в документе;
o встроенных стилей – блоков CSS внутри самого HTML-документа;
o inline-стилей, когда в HTML-документе информация стиля для одного элемента указывается в его атрибуте style;
· Пользовательские стили:
o локальный CSS-файл, указанный пользователем в настройках браузера, переопределяющий авторские стили и применяемый ко всем документам;
· Стиль браузера:
o стандартный стиль, используемый браузером по умолчанию для представления элементов.
Пример таблицы стилей:
h2 {
font-size: 1.75em;
color: #469;
}
#container {
padding: 0;
}
#column_r_content, #column_l_content {
margin: 10px;
}
p#paragraph1 {
margin: 0;
}
#masthead img {
float: left;
margin: 0;
padding: 0;
}
#navigation a:hover {
color: #000;
text-decoration: none;
border: 1px solid #ed9;
background-color: #ed9;
}
.style_italic {
font-style: italic;
}
Здесь приведено семь правил с селекторами h2, #container, #column_r_content, #column_l_content, p#paragraph1, #masthead img, #navigation a:hover,.style_italic.
В первом правиле HTML-элементу h2 (заголовку второго уровня) назначаются стиль, согласно которому, заголовок второго уровня будет отображаться темно-синим цветом увеличенным кеглем.
Второе правило будет применяться к элементам, идентификатор которых равен container. Аналогично ему, третье правило будет применяться к элементам, идентификатор которых равен либо column_r_content, либо column_l_content. Эти элементы будут иметь внешний отступ, равный 10 пикселям.
Четвертое правило будет применяться только к элементам p, атрибут id которых равен paragraph1. Такие элементы не будут иметь внешних отступов (margin).
Пятое правило будет применяться только к элементам img, которые находятся внутри элемента, атрибут id которых равен masthead. Такие элементы не будут иметь внешних и внутренних отступов и будут прижиматься к левой границе экрана (но внутри своего контейнера).
Шестое правило определяет стиль hover для элементов a, находящихся в элементе с атрибутом id равным navigation. Это правило, в частности, изменить цвет и задний фон ссылки, когда указатель мыши находится над этими элементами.
Седьмое правило будет применено к элементам, атрибут class которых содержит слово ' style_italic '. Например:
<p class="style_italic">Этот абзац будет выведен курсивом.</p>
Добавление CSS
Для добавления стилей на веб-страницу существует несколько способов, которые различаются своими возможностями и назначением. Далее рассмотрены способы подключения CSS [2, 5].
Таблица связанных стилей
При использовании таблицы связанных стилей описание селекторов и их свойств располагается в отдельном файле, как правило, с расширением css, а для связывания документа с этим файлом применяется тег <LINK> [5]. Данный тег помещается в контейнер <HEAD>.
Пример подключения таблицы связанных стилей:
…
<head>
…
<link rel="stylesheet" type="text/css" href="mysite.css">
<link rel="stylesheet" type="text/css" href="https://www.htmlbook.ru/main.css">
…
</head>
…
Значения параметров тега <LINK> – rel и type остаются неизменными, как приведено в данном примере. Параметр href задает путь к CSS-файлу, он может быть задан как относительно, так и абсолютно. Заметьте, что таким образом можно подключать таблицу стилей, которая находится на другом сайте.
Таблица глобальных стилей
При использовании таблицы глобальных стилей свойства CSS описываются в самом документе и обычно располагаются в заголовке веб-страницы [5]. По своей гибкости и возможностям этот способ добавления стиля уступает предыдущему, но также позволяет размещать все стили в одном месте. В данном случае, прямо в теле документа, с помощью контейнера <STYLE>.
Пример использования таблицы глобальных стилей:
…
<head>
…
<style type="text/css">
p {
font-size: 110%;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
</style>
</head>
…Замечание. Таблица глобальных стилей может размещаться не только внутри контейнера <HEAD>, но также в любом месте кода HTML-документа.
Внутренние стили
Внутренний стиль является по существу расширением для одиночного тега используемого на веб-странице [5]. Для определения стиля используется параметр тега style, а его атрибуты указываются с помощью языка таблицы стилей.
Пример использования внутренних стилей:
…
<body>
<p style="font-size: 110%; font-family: Verdana, Arial, Helvetica, sans-serif;">Текст</h1>
</body>
…
Замечание. Внутренние стили рекомендуется применять на сайте ограниченно или вообще отказаться от их использования. Дело в том, что добавление таких стилей увеличивает общий объем файлов, что ведет к повышению времени их загрузки в браузере, и усложняет редактирование документов для разработчиков.
Все описанные методы использования CSS могут применяться как самостоятельно, так и в сочетании друг с другом. В этом случае необходимо помнить об их иерархии. Первым всегда применяется внутренний стиль, затем таблица глобальных стилей и в последнюю очередь таблица связанных стилей.
Базовый синтаксис
Способ записи CSS отличается от формы использования тегов HTML и в общем виде имеет следующий синтаксис [2, 5]:
Селектор { свойство1: значение; свойство2: значение;... }
Селектором называется имя стиля, в котором указаны параметры форматирования. Селекторы делятся на несколько типов: селекторы тегов, идентификаторы, классы и др. После указания селектора идут фигурные скобки, в которых записывается необходимое стилевое свойство, а его значение указывается после двоеточия. Параметры разделяются между собой точкой с запятой, в конце этот символ можно опустить.
CSS не чувствителен к регистру, переносу строк, пробелам и символам табуляции, поэтому форма записи зависит от желания разработчика.
Замечание. Имена селекторов обязательно должны начинаться с латинского символа (a-z, A-Z) и могут содержать в себе цифры.
Селекторы тегов
В качестве селектора может выступать любой тег HTML, для которого определяются правила форматирования, такие как: цвет, фон, размер и т.д. Правила задаются в следующем виде [2, 5]:
Тег { свойство1: значение; свойство2: значение;... }
Пример изменения стиля тега параграфа:
…
<head>
…
<style type="text/css">
p {
font-size: 110%;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
</style>
</head>
…В данном примере изменяется размер шрифта и семейство шрифта параграфа. Стиль будет применяться только к тексту, который располагается внутри контейнера <P>.
Классы
Классы применяют, когда необходимо определить стиль для индивидуального элемента веб-страницы или задать разные стили для одного тега. При использовании совместно с тегами синтаксис для классов будет следующий [2, 5]:
Тег.Имя класса { свойство1: значение; свойство2: значение;... }
Внутри стилевой таблицы вначале пишется желаемый тег, а затем, через точку пользовательское имя класса. Чтобы указать в коде HTML, что тег используется с определенным стилем, к тегу добавляется параметр class="Имя класса".
Пример использования классов c тегами:
…
<head>
…
<style type="text/css">
p {
font-size: 110%;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
p.Color {
color: navy;
}
</style>
</head>
<body><p>Пример использования селектора тегов.</p>
<p class="Color">Пример использования класса.</p>
</body>…Результат данного примера показан на Рис. 3.1.
Рис. 3.1. Результат использования классов c тегами
Можно, также, использовать классы и без указания тега. Синтаксис в этом случае будет следующий:
.Имя класса { свойство1: значение; свойство2: значение;... }
При такой записи, класс можно применять к любому тегу.
Классы удобно использовать, когда нужно применить стиль к разным тегам веб-страницы: ячейкам таблицы, ссылкам, параграфам и др. Для изменения отдельных слов или даже букв, а также блоков, содержащих в себе разные элементы, употребляются теги <SPAN> и <DIV>.
Идентификаторы
Идентификатор (называемый также «ID селектор») определяет уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты, что позволяет управлять стилем элемента динамически.
Синтаксис использования идентификатора следующий [2, 5]:
#Имя идентификатора { свойство1: значение; свойство2: значение;... }
В отличие от классов идентификаторы должны быть уникальны, иными словами, встречаться в коде документа только один раз.
Обращение к идентификатору происходит аналогично классам, но в качестве ключевого слова у тега используется параметр id, значением которого выступает имя идентификатора (пример). Символ решетки при этом уже не указывается.
Пример использования идентификатора:
…
<head>
…
<style type="text/css">
#help {
position: absolute;
left: 160px;
top: 50px;
width: 225px;
height: 180px;
background: #f0f0f0;
}
</style>
</head>
<body> <div id="help">Пример использования Идентификаторов</div></body>…В данном примере определяется стиль тега <DIV>, для которого указан селектор help через параметр id.
Результат данного примера показан на Рис. 3.2.
Рис. 3.2. Результат использования идентификатора
Как и при использовании классов, идентификаторы можно применять к конкретному тегу. Синтаксис при этом будет следующий:
Тег#Имя идентификатора { свойство1: значение; свойство2: значение;... }
Вначале указывается имя тега, затем без пробелов символ решетки и название идентификатора.
Контекстные селекторы
При создании веб-страницы часто приходится вкладывать одни теги внутрь других. Чтобы стили для этих тегов использовались корректно, помогут селекторы, которые работают только в определенном контексте.
Контекстный селектор состоит из простых селекторов разделенных пробелом. Так, для селектора тега синтаксис будет следующий [2, 5]:
Тег1 Тег2 {... }
В этом случае стиль будет применяться к Тегу2, когда он размещается внутри Тега1, как показано ниже.
Пример использования контекстных селекторов:
…
<head>
…
<style type="text/css">
P B {
font-weight: bold;
color: navy;
}
</style>
</head>
<body><div><b>Жирное начертание текста</b></div>
<p><b>Одновременно жирное начертание текста и выделенное цветом</b></p>
</body>…В данном примере показано обычное применение тега <B> и этого же тега, когда он вложен внутрь параграфа <P>. При этом меняется цвет текста, как показано на Рис. 3.3.
Рис. 3.3. Результат использования контекстных селекторов
Замечание. Не обязательно контекстные селекторы содержат только один вложенный тег. В зависимости от ситуации допустимо применять два и более последовательно вложенных друг в друга тегов.
Более широкие возможности контекстные селекторы дают при использовании идентификаторов и классов. Это позволяет устанавливать стиль только для того элемента, который располагается внутри определенного класса.
Соседние селекторы
Соседними называются элементы веб-страницы, когда они следуют непосредственно друг за другом в коде документа [5]. Рассмотрим пример отношения элементов:
<p>Это <b>пример</b> <var>соседних</var> селекторов.</p>
Теги <VAR> и <B> представляют собой соседние элементы.
Для управления стилем соседних элементов используется символ плюса (+), который устанавливается между двумя селекторами. Общий синтаксис следующий:
Селектор 1 + Селектор 2 { Описание правил стиля }
Пробелы вокруг плюса не обязательны, стиль при такой записи применяется к Селектору 2, но только в том случае, если он является соседним для Селектора 1 и следует сразу после него.
Соседние селекторы удобно использовать для тех тегов, к которым автоматически добавляются отступы, чтобы самостоятельно регулировать величину отбивки. Например, если подряд идут теги <H1> и <H2>, то расстояние между ними легко регулировать как раз с помощью соседних селекторов.
Поскольку при использовании соседних селекторов стиль применяется только ко второму элементу, то размер отступов уменьшается за счет включения отрицательного значения параметра margin-top. При этом текст поднимается вверх, ближе к предыдущему элементу.
Дочерние селекторы
Дочерним селектором считается такой, который в дереве элементов находится прямо внутри родительского элемента. Синтаксис применения таких селекторов следующий [2, 5]:
Селектор 1 > Селектор 2 { Описание правил стиля }
Стиль применяется к Селектору 2, но только в том случае, если он является дочерним для Селектора 1.
По своей логике дочерние селекторы похожи на селекторы контекстные. Разница между ними следующая. Стиль к дочернему селектору применяется только в том случае, когда он является прямым потомком, иными словами, непосредственно располагается внутри родительского элемента. Для контекстного селектора допустим любой уровень вложенности.
Заметим, что в большинстве случаев от добавления дочерних селекторов можно отказаться, заменив их контекстными селекторами. Однако использование дочерних селекторов расширяет возможности по управлению стилями элементов, что в итоге позволяет получить нужный результат, а также простой и наглядный код.
Удобнее всего применять указанные селекторы для элементов, которые обладают иерархической структурой – сюда относятся, например, таблицы и разные списки.
Селекторы атрибутов
Для изменения стиля элементов содержащих различные параметры, в CSS введены селекторы атрибутов [5]. Они позволяют установить стиль тега по присутствию определенного параметра или его значения.
Замечание. Селекторы атрибутов поддерживаются браузером Internet Explorer начиная с версии 7.0, причем для корректной работы примеров необходимо добавить правильный <!DOCTYPE>.
Рассмотрим один вариант применения таких селекторов – Селектор атрибута со значением.
Данный селектор устанавливает стиль для элемента в том случае, если задано определенное значение специфичного параметра. Синтаксис применения следующий.
[атрибут="значение"] { Описание правил стиля } Селектор[атрибут="значение"] { Описание правил стиля }
В первом случае стиль применяется ко всем элементам, которые содержат указанное значение атрибута. А во втором – только к определенным селекторам.
Универсальный селектор
Иногда требуется установить одновременно один стиль для всех элементов веб-страницы, например, задать шрифт или начертание текста. В этом случае поможет универсальный селектор, который соответствует любому элементу веб-страницы [5].
Для обозначения универсального селектора применяется символ звездочки (*) и в общем случае синтаксис будет следующий:
* { Описание правил стиля }
В некоторых случаях указывать универсальный селектор не обязательно. Так, например, записи *.class и.class являются идентичными по своему результату.
Вообще, этот тип селекторов применяется в основном в структурных языках вроде XML, для обозначения имен элементов, которые в стилях не известны.
Группирование
При создании стиля для сайта, когда одновременно используется множество селекторов, возможно появление повторяющихся параметров. Чтобы не повторять дважды одни и те же элементы, их можно сгруппировать для удобства представления и сокращения кода [2, 5].
Селекторы группируются в виде списка тегов, разделенных между собой запятыми. В группу могут входить не только селекторы тегов, но также идентификаторы и классы. Общий синтаксис следующий:
Селектор 1, Селектор 2,... Селектор N { Описание правил стиля }
При такой записи правила стиля применяются ко всем селекторам, перечисленным в одной группе.
Наследование
Наследованием называется перенос правил форматирования для элементов, находящихся внутри других [2, 5]. Такие элементы являются дочерними, и они наследуют некоторые стилевые свойства своих родителей, внутри которых располагаются.
Разберем наследование на примере таблицы. Особенностью таблиц можно считать строгую иерархическую структуру тегов. Вначале следует контейнер <TABLE>, внутри которого добавляются теги <TR>, а затем идет тег <TD>. Если в стилях для селектора TABLE задать цвет текста, то он автоматически устанавливается для содержимого ячеек, как показано в примере.
Пример наследования параметров цвета:
…
<head>
…
<style type="text/css">
TABLE {
color: red;
background: #333;
}
</style>
</head>
<body><table>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
<tr>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
</table>
</body>…В данном примере для всей таблицы установлен красный цвет текста, поэтому в ячейках он также применяется, поскольку тег <TD> наследует свойства тега <TABLE>. При этом следует понимать, что не все стилевые атрибуты наследуются. Так, параметр border задает рамку вокруг таблицы в целом, но никак не вокруг ячеек. Аналогично не наследуется значение параметра background. При этом цвет фона у ячеек в данном примере черный, хотя он не наследуется, так как у атрибута background в качестве значения по умолчанию выступает transparent, т.е. прозрачность. Таким образом, если аргумент явно не задан, то цвет фона родительского элемента «проглядывает» сквозь дочерний элемент.
Наследование позволяет задавать значения некоторых параметров единожды, определяя их для родителей верхнего уровня.
Псевдоклассы
Псевдоклассы определяют динамическое состояние элементов, которое изменяется со временем или с помощью действий пользователя, а также положение в дереве документа [5]. Примером такого состояния служит текстовая ссылка, которая меняет свой цвет при наведении на нее курсора мыши. При использовании псевдоклассов браузер не перегружает текущий документ, поэтому с их помощью можно получить разные динамические эффекты на странице.
Синтаксис применения псевдоклассов следующий:
Элемент:Псевдокласс { Описание правил стиля }
Вначале следует элемент, к которому добавляется псевдокласс, затем указывается двоеточие, после которого идет имя псевдокласса. Допускается применять псевдоклассы к именам идентификаторов или классов (A.menu:hover {color: green}) и контекстным селекторам (.menu A:hover {background: #fc0}).
Условно все псевдоклассы делятся на группы, которые перечислены далее [2, 5].
Псевдоклассы, определяющие состояние элементов
К этой группе относятся псевдоклассы, которые определяют текущее состояние элемента и применяют стиль к нему только в этом случае [2, 5].
· Active – происходит при активации пользователем элемента (например, при наведении курсора на ссылку и нажатии левой кнопки мыши).
· Link – применяется к непосещенным ссылкам, т.е. ссылкам, на которые пользователь еще не нажимал.
Замечание. Запись A {...} и A:link {...} по своему результату равноценна, поскольку в браузере дает один и тот же эффект, поэтому псевдокласс link можно не указывать.
· Focus – применяется к элементу при получении им фокуса.
Замечание. Результат будет виден только для тех элементов, которые могут получить фокус. В частности, это теги <A>, <INPUT>, <SELECT> и <TEXTAREA>.
· Hover – псевдокласс hover активизируется, когда курсор мыши находится в пределах элемента, но щелчка по нему не происходит.
· Visited – данный псевдокласс применяется к посещенным ссылкам. Обычно такая ссылка меняет свой цвет по умолчанию на фиолетовый, но с помощью стилей цвет и другие параметры можно задать самостоятельно
Псевдоклассы link и visited могут применяться только к ссылкам, а псевдоклассы active и hover также и к другим элементам документа. Это расширяет набор приемов и позволяет создавать эффект перекатывания, когда стиль элемента меняется при наведении на него курсора мыши.
Замечание. Браузер Internet Explorer 6 и младше позволяет использовать псевдоклассы active и hover только для ссылок. Начиная с версии 7.0 псевдоклассы в этом браузере можно добавлять и к другим элементам.