Элемент base

Использование псевдоклассов для гиперссылок

Для задания разных стилей отображения гиперссылки на различных этапах обращения к ней в спецификации CSS2 определены следующие псевдоклассы:

·:link – задает правило стилей для отображения непросмотренных гиперссылок (по умолчанию непросмотренные текстовые гиперссылки выводятся синим цветом с подчеркиванием);

·:visited – задает правило стилей для отображения уже просмотренных гиперссылок (по умолчанию просмотренные текстовые гиперссылки выводятся фиолетовым цветом с подчеркиванием);

·:hover – задает правило стилей для отображения выделенного (с помощью некоторого указывающего устройства, например мыши) элемента;

·:active – задает правило стилей для отображения активного состояния элемента, например, когда для элемента уже нажата, но еще не отпущена кнопка мыши;

·:focus – задает правило стилей для отображения состояние элемента, когда он попадает в фокус, т.е. генерируются события, связанные с клавиатурой или вводом текста.

Псевдоклассы:link и:visited связаны с действиями, выполняемыми элементом a, и поэтому они используются только с этими элементами. Остальные псевдоклассы (:hover,:focus и:active) могут использоваться как с элементом a, так и с другими элементами.

Если для одного и того же элемента определено несколько псевдоклассов, они должны следовать друг за другом в том же порядке, как в приведенном выше списке (чтобы не возникало побочных эффектов, связанных с каскадированием правил стилей).

Пример 4.3.86. Использование псеводоклассов:link,:visited,:hover,:focus и:active:

1. a:link {color:green}

a:visited {color:red; text-decoration:none}

a:hover {font-size:16pt; border:aqua outset thick}

a:active {border:blue solid thick}

a:focus {color:brown; font-weight:bold;

border:green double thick}

…

<a href="page3.html">Раздел 3</a>

Набор правил стилей задает следующие стили для всех гиперссылок на Web-странице, в том числе и гиперссылки на page3.html:

· если гиперссылка еще не вызывалась, она будет иметь зеленый цвет с подчеркиванием (подчеркивание выполняется из-за правила по умолчанию)

· уже вызывавшаяся гиперссылка будет выводиться красным цветом без подчеркивания

· если над гиперссылкой провести мышью, то размер шрифта текста гиперссылки увеличится до 16 пунктов и вокруг гиперссылки появится выпуклая рамка сине-зеленого цвета

· при вызове гиперссылки, пока кнопка мыши не отпущена, вокруг гиперссылки появится толстая синяя сплошная рамка

· если гиперссылка в фокусе (например, по ней щелкнули мышью), то текст гиперссылки выводится коричневым цветом и жирным шрифтом с толстой двойной рамкой зеленого цвета (таким образом можно выделить последнюю посещенную гиперссылку).

Если щелкнуть мышью по другому элементу, состояние фокуса с элемента снимается.

2. p.selected:hover {font-size:20pt; font-weight: bold;

border: blue outset thick}

…

<p class="selected">Выделенный абзац</p> –

Фрагмент Web-страницы для элемента p будет иметь следующий вид:

При проведении мышью над абзацем его текст будет выводиться жирным шрифтом размером в 14 пунктов и вокруг него появиться синяя выпуклая толстая рамка:

Для упрощения ссылок в атрибуте href элементов a и link можно задать в заголовке документа (внутри контейнера head) одиночный элемент base. Единственными допустимыми атрибутами для этого элемента являются атрибуты href и target.

С помощью атрибута href в элементе base указывается основной (базовый) URL для всех ссылок в данном документе HTML. В этом случае во всех ссылках данного документа HTML указывается адрес ссылки относительно базового URL.

Пример 4.3.87. Использование элемента base:

<base href="https://www.mysite.org/manuals/manual_1/index.html"/>

Для ссылки на первый раздел первой главы (файл Part01.html в том же каталоге manual_1) в элементе a в теле документа достаточно указать

<a href="Part01.html#Section01">.

Для ссылки на рисунок nextPage.gif, который находится в подкаталоге images каталога manual_1 надо задать следующий элемент img:

<img src="images/nextPage.gif">

Для ссылки на внешнюю таблицу стилей styles.css, которая находится в подкаталоге styles каталога manuals надо задать следующий элемент link:

<link href="../styles/styles.css"

rel="stylesheet" type="text/css"/>.