
- •32. Оформление списков и ссылок
- •Введение
- •Оформление списков
- •Базовые маркеры и числа
- •Специальные маркеры, использующие изображения
- •Поля и заполнение списков
- •Неупорядоченные списки
- •Упорядоченные списки
- •Итак, что делать?
- •Использование list-style-position
- •Что насчет списков определений?
- •Вложенные списки
- •Горизонтальные списки
- •Ложные столбцы
- •Унаследованные браузеры
- •Заключение по спискам
- •Оформление ссылок
- •Понимание состояния ссылок
- •Как эволюция браузеров задает ожидания
- •Ожидания пользователей
- •Используйте цвет с осторожностью
- •Приступим к делу: css
- •Оформления состояния ссылок в правильном порядке
- •Управление поведением по умолчанию
- •Подчеркивание
- •Создание рамки
- •Пример: восстановление значений по умолчанию браузера Netscape
- •Ложное подчеркивание с помощью border-bottom
- •Оформление, которое не полагается на цвет
- •Иконки на ссылках
- •Объединяем все вместе - простое навигационное меню
- •Заключение
- •Контрольные вопросы
- •Дополнительное чтение
Унаследованные браузеры
Если требуется создать такой дизайн для более старых браузеров, которые не поддерживают строковый блок (inline-block), то нужно будет сместить пункты списка влево во всех браузерах и использовать исправление очисткой, как описано в статье "Очистка плавающего контейнера без разметки исходного кода" (http://www.positioniseverything.net/easyclearing.html). Благодаря последнему раунду выпусков браузеры сделали inline-block ценным свойством вывода, поэтому если у вас нет большой доли более старых браузеров, таких как Firefox 2, вы сможете использовать метод inline-block.
Заключение по спискам
Мы рассмотрели сейчас базовое множество вариантов оформления и методов для списков. Вы можете реализовать эти примеры и объединять их для создания большого числа решений. Так как списки очень часто объединяют со ссылками, давайте перейдем к ссылкам.
Оформление ссылок
Оформление ссылок может быть в некоторой степени формой искусства. Существует множество различных требований и может быть трудно все их согласовать, создавая при этом эстетически интересный результат.
Тем не менее, это вполне возможно, пока вы помните о нескольких простых правилах:
понимать различные состояния ссылок
не отклоняться слишком далеко от ожиданий пользователя
использовать цвета с осторожностью
Если следовать этим правилам, вы будете создавать ссылки, которые понятны и легко используемы.
Понимание состояния ссылок
Прежде чем можно будет оформлять ссылки, необходимо понять различные состояния ссылок. Всего существует пять состояний: непосещенная/по умолчанию, посещенная, фокус, под указателем, и активная.
Непосещенная (unvisited) - состояние ссылки по умолчанию, когда она не была ранее активирована или посещена.
Посещенная (visited) - cостояние ссылки, которую пользователь уже посетил.
Фокус (focus) - применяется, когда ссылка имеет фокус - например, курсор клавиатуры пользователя находится на ссылке. Примечание: Браузер IE не поддерживает в настоящее время состояние фокуса, и использует просто состояние active вместо focus.
Под указателем (hover) -применяется, когда пользователь "удерживает" над ссылкой указатель, такой как указатель мыши, но еще не щелкнул на ссылке.
Активная (active) - применяется, когда пользователь активирует ссылку - буквально в то время, когда делает на ней щелчок. В некоторых браузерах этот стиль применяется также, когда ссылка открыта в другом окне или вкладке.
Нужно всегда определять код CSS для каждого из этих состояний. Каждое из них передает пользователю информацию о том, как он взаимодействует со ссылкой. Если имеются какие-то сомнения относительно focus, hover и active, можно просто оформить focus и hover одинаковым образом, так как их функции достаточно похожи, так что одинаковый стиль ссылки не должен вызывать путаницы. Затем можно будет добавить какую-нибудь простую вариацию для active, например, изменяя текст на курсив. В крайнем случае, можно оформить все три одинаково.
Обратите
внимание, что эти состояния не являются
взаимно исключающими (хотя в действительности
ссылка не может одновременно быть
посещенной и непосещенной) - однако
вполне возможно для ссылки быть
одновременно hover,
active
и visited.