TML, CSS, СКРИПТЫ: практика создании сайтов

Применение веб-технологий стороны клиента для создания сайтов

На внутренних страницах содержимое заглавия должно отражать положение

того или иного подраздела в иерархической структуре сайта. Для

приведенного несколькими абзацами выше URL содержимое элемента …

может выглядеть примерно так:

Абсолютное позиционирование — Схемы позиционирования элементов — Блочная

модель — CSS2 — Библиотека веб-разработчика

Следует обратить внимание на то, что в заглавии внутренней страницы сайта

непременно должны присутствовать как название самой страницы, так и

название сайта в целом. Причем название страницы лучше всего размещать на

первом месте, поскольку, скажем, в Панели задач Windows отображается

кнопка, содержащая лишь первые несколько символов заголовка окна, и, если

в разных окнах открыто несколько страниц одного и того же сайта,

идентифицировать то или иное окно по кнопке в Панели задач будет значительно

легче.

Интерактивное меню навигации

средствами CSS

Обсудив возможности HTML по организации гипертекстовых ссылок в

главе 2, мы до сих пор ничего не говорили о том, каким образом можно

переопределить их внешний вид.

Разумеется, к гиперссылкам, равно как и к другим элементам, применимы

многие рассмотренные нами CSS-свойства, например, color, background, font,

text-decoration, border И Т. Д.

Мы, однако, замолвили, что гипертекстовые ссылки должны четко

подразделяться на просмотренные и непросмотренные. Как это реализовать?

В CSS предусмотрены псевдоклассы link и visited, позволяющие строить

селекторы, соотносящиеся соответственно с непосещенными и посещенными

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

двоеточия:

a {text-decoration: none} /* Правило относится ко всем гиперссылкам */

a:link {color: #036} /* Правило определяет цвет непросмотренных ссылок */

a:visited {color: #999} /* Правило задает цвет просмотренных ссылок */

Псевдоклассы link и visited являются взаимоисключающими — ссылка не

может быть непросмотренной и просмотренной одновременно. Браузеры,

однако, могут возвращать просмотренные ссылки в исходное, непросмотренное

состояние, если соответствующий ресурс давно не посещался.

Помимо двух перечисленных выше, CSS предусматривает три динамических

псевдокласса, позволяющих изменять визуальное представление различных

Глава 4. Использование блочной модели СБ82для верстки сложных веб-страниц 235

элементов (не обязательно гиперссылок) под влиянием тех или иных

событий. Так, псевдокласс hover относится к элементам, на которые наведен

курсор мыши или иного указательного устройства; псевдокласс active

сопоставляется с активизированными (к примеру, путем нажатия на кнопку мыши)

пользователем элементами; а псевдокласс focus определяет элементы,

сфокусированные (выделенные) посредством клавиатуры или иных способов

текстового ввода.

Динамические псевдоклассы применительно к гиперссылкам можно

использовать в сочетании с псевдоклассами link и visited, к примеру, так:

a:link:hover {text-decoration: underline; color: #369}

a:visited:hover {text-decoration: underline; color: #666}

Кроме того, динамические псевдоклассы могут комбинироваться друг с

другом:

а:focus:hover {background: #fffOcc}

Таким образом, зайти можно очень далеко — число возможных

представлений одной и той же гиперссылки весьма велико.

Определять индивидуальные правила для всех состояний вряд ли

целесообразно. Тем более, что некоторые браузеры могут всего этого великолепия не

оценить. В частности, наш «любимый» Internet Explorer приведет два правила

a:link:hover {color: #369}

a-.visited-.hover {color: #666}

к одному:

a:hover {color: #666}

А это, мягко говоря, не совсем то, что мы хотели бы получить.

Еще более печальным, однако, является тот факт, что Internet Explorer не

позволяет применять динамические псевдоклассы к элементам, отличным от

гипертекстовых ссылок…

Представляется разумным определять различные правила представления для

Элементов, заданных селекторами a: link, a: visited, a:hover И a: active В

ОСНОВНОМ тексте страниц.