32. Оформление списков и ссылок
В данной лекции рассматриваются основные приемы оформления списков и ссылок. Показываются основные типы списков: упорядоченные и неупорядоченные, вертикальные и горизонтальные, а также вложенные списки. Рассматриваются состояния ссылок, ожидания пользователей относительно ссылок, оформление ссылок с помощью CSS
Введение
Многие элементы на Web-странице являются в некоторой степени "великодушными" с точки зрения дизайна - если они не "вполне правильные", то это не имеет большого значения. В случае списков и ссылок совершенно другая история - если записать их неправильно, то это может создавать серьезные проблемы для людей, пытающихся использовать Web-сайт.
Ссылки, в частности, имеют некоторые ключевые требования оформления и ожидания пользователей. Плохо оформленные ссылки могут испортить взаимодействие пользователей с Web-сайтом, так как им придется останавливаться и думать о том, где совершить щелчок. В худшем случае пользователь не сможет даже сказать, какие объекты на странице являются в действительности ссылками.
В этой статье мы рассмотрим базовые навыки, которые нужны для создания надежного оформления списков и ссылок. Мы обсудим также некоторые способы уклонения от основных ловушек этих элементов и создания результата, который будет работать в различных браузерах, и будет доступен пользователям с функциональными недостатками.
В этой статье используется несколько примеров, которые будут рассмотрены в ходе изложения.
Статья имеет следующее содержание:
Оформление списков
Базовые маркеры и числа
Специальные маркеры, использующие изображения
Поля и заполнение списков
Неупорядоченные списки
Упорядоченные списки
Итак, что делать?
Использование list-style-position
Что насчет списков определений?
Вложенные списки
Горизонтальные списки
Ложные столбцы
Унаследованные браузеры
Заключение по спискам
Оформление ссылок
Рассмотрение состояния ссылок
Как эволюция браузеров задает ожидания
Ожидания пользователей
Используйте цвет с осторожностью
Приступим к делу: CSS
Оформление состояния ссылок в правильном порядке
Управление поведением по умолчанию
Подчеркивание
Создание рамки
Пример: восстановление значений по умолчанию браузера Netscape
Ложные подчеркивания с помощью border-bottom
Оформление, которое не полагается на цвет
Иконки на ссылках
Объединяем все вместе - простое навигационное меню
Заключение
Контрольные вопросы
Дополнительное чтение
Оформление списков
Рассмотрим, прежде всего, основы оформления списков с помощью CSS, прежде чем переходить к рассмотрению более сложных методов.
Базовые маркеры и числа
Фундаментальным вопросом рассмотрения при создании оформления списка является форма маркера или способ нумерации, который желательно использовать. Можно также вообще не использовать маркеры и числа. Как было показано в статье 16 о списках HTML, существует множество различных возможностей, задаваемых с помощью свойства list-style-type.
Например, чтобы задать для всех неупорядоченных списков на сайте квадратные маркеры, используйте следующий код CSS:
ul li {
list-style-type: square;
}
который создает что-то подобное изображенному на рис. 32.1:
Рис. 32.1. Неупорядоченный список с квадратными маркерами
Несколько распространенных типов списков показаны на рис. 32.2:
Рис. 32.2. Распространенные стили списков
Существуют также и другие менее распространенные возможности.
Отметим, что маркеры и цифры будут изображаться цветом, который задается или наследуется элементом li. Если требуется, чтобы маркер имел цвет отличный от текста, нужно использовать изображение, или решить проблему с помощью других элементов в пунктах списка (это можно легко сделать, например, когда все пункты являются ссылками).