Работа со специальными элементами

Работа со специальными элементами определяется с помощью псевдоклассов.

Псевдокласс – специальный селектор, определяющий, как выглядит HTML-элемент в определенный момент.

Например, CSS определяет псевдокласс, который устанавливает, как выглядят гиперссылки в определенные моменты времени:

a:link {color:”#ffffff”; text-decoration:”none”} – не посещенные ссылки;

a:visited {color:”red”; text-decoration:”none”} – посещенные ссылки;

a:active {color:”black”; text-decoration:”none”} – активные ссылки;

a:hover {text-decoration:”underline”} – ссылка при наведении на нее фокуса.

Можно определить псевдокласс для первого символа элемента. Например, для абзаца:

p:first-letter {font-size:”24pt”}. Это удобно для задания спецэффектов выделения заглавных букв.

Задание 7

1. Для верхнего меню страниц проектов включите в файл внешнюю стилевую спецификацию, определяющую вид гиперссылки в определенные моменты. Для этого самостоятельно определите параметры стиля согласно рис. 4.

2. Проверьте работоспособность стиля.

а – не посещенные ссылки

б – ссылка при наведении на нее курсора

Рис. 4. Вид гиперссылки в определенный момент времени

Задание 8

1. Для пункта «Проекты таунхаусов и блокированных домов» включите в файл внешнюю стилевую спецификацию, определяющую вид гиперссылки в определенные моменты. Для этого самостоятельно определите параметры стиля согласно рис. 5.

2. Проверьте работоспособность стиля. Обратите внимание на то, чтобы не изменился цвет фона и параметры других элементов меню. Измениться должен только вид гиперссылки. Что для этого нужно сделать?

а – не посещенные ссылки

б – ссылка при наведении на нее курсора

Рис. 5. Вид гиперссылки «Проекты таунхаусов и блокированных домов»

3. Для пунктов с названиями проектов на странице proekt_townhouse.html включите в файл внешнюю стилевую спецификацию, определяющую вид гиперссылки в определенные моменты. Для этого самостоятельно определите параметры стиля согласно рис. 6.

4. Проверьте работоспособность стиля. Обратите внимание на то, чтобы не изменились параметры ссылок на страницах proekt_D-152-1D.html, proekt_H-173-1P.html, proekt_R-189-1P.html.Что для этого нужно сделать?

а – не посещенная ссылка

б – ссылка при наведении на нее курсора

Рис. 6. Вид гиперссылки для названия проектов