Оформление списков и ссылок

Поля и заполнение списков

Разумное использование полей и заполнения может придать виду списка более профессиональный и безупречный вид, но вы должны знать, что делаете, и помнить также, что ситуация может отличаться для различных типов списков. В этом разделе мы рассмотрим применение разумных полей и заполнения для двух наиболее распространенных типов списков.

Неупорядоченные списки

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

Если требуется, чтобы пункты неупорядоченного списка находились в той же точке выравнивания слева, что и остальной контент, понадобится задать несколько стилей для управления отступом в соответствии с требованиями. Различные браузеры требуют различных настроек - некоторым требуется удаление полей, для других нужно удалить заполнение. Поэтому, чтобы удовлетворить все браузеры, обнуляем оба значения:

ul {
  margin: 0;
  padding: 0;
}

Это может создавать не тот результат, который ожидается, так как текст будет прижат влево, а маркеры будут располагаться за пределами текста, как показано нарис 32.7:(рис 32.7) Маркеры располагаются слева от текста.

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

ul {
  margin-left: 0;
  padding-left: 0;
}

ul li {
  margin-left: 1em;
}

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

Упорядоченные списки

Теперь необходимо рассмотреть такую же проблему в применении к упорядоченным спискам. Они немного сложнее, так как числовые маркеры выравниваются согласно пункту списка с самым большим числовым значением. Например, если имеется десять пунктов списка, десятичные значения будут размещены так, чтобы можно было вывести пункт "10", как показано на рис 32.9:(рис 32.9) Числовые маркеры пунктов 1-9 имеют дополнительное заполнение, чтобы они выравнивались справа с пунктом 10

Поэтому, в действительности не существует способа сделать согласованное выравнивание слева с той же позиций, что и окружающий текст, если только не задать для списка :(рис 32.10) Ведущие нули заполняют пространство для пунктов 1-9

Обычно принято просто оставлять различное расстояние. Однако это означает, что маркеры упорядоченных и неупорядоченных списков нельзя без проблем согласованно выровнять слева. Можно только выровнять текст списков:

ul, ol {
  margin-left: 0;
  padding-left: 0;
}

li {
  margin-left: 2em;
}

Требуется как минимум 2em левого поля, чтобы разместить как упорядоченные, так и неупорядоченные списки. На рис 32.11 обратите внимание на то, как текст пунктов выравнивается в обоих списках:(рис 32.11) Текст выравнивается в упорядоченном и неупорядоченном списках

Итак, что делать?

По сути, имеется три возможности:

Не существует "правильного" или "неправильного" подхода, и вполне допустимо оставить просто в обычном контенте настройки для списков по умолчанию.

Использование list-style-position

Если требуется, чтобы текст многострочных пунктов списка заворачивался под маркер списка, необходимо задать свойство :(рис 32.12) Положение списка " inside" заставляет текст заворачиваться под маркер вместо выравнивания с текстом отступа

Внутреннее размещение маркеров не особенно популярный стиль оформления. По умолчанию list-style-position задается как outside, что создает результаты, которые рассматриваются в других местах этой статьи.

Что насчет списков определений?

Обычно списки определений не требуют большого внимания, за исключением задания стиля dt (обычно жирный текст) и управления отступом определений:

dt {
  font-weight: bold;
}

dd {
  margin-left: 2em;
}

Это задает четкое и простое оформление списков определений, как на рис 32.13:(рис 32.13) Оформленный список определений

Хотя списки определений можно реорганизовать с помощью плавающих элементов и позиционирования, они будут слишком странными, и обычно лучше сохранять все простым. Они достаточно полезны как они есть, просто с небольшим изменением, чтобы сильнее выделить термины определений, и сделать для определений хорошие отступы.

Вложенные списки

В статье 16 о списках HTML были рассмотрены вложенные списки. При создании кода CSS необходимо быть внимательным при поддержании четкой ключевой информации, чтобы показать отношение между вложенным списком и содержащим его списком. Несомненно, наиболее распространенным способом для этого является использование отступов для пунктов вложенного списка - это, фактически, настройка по умолчанию в различных браузерах.

Если вы задаете свой собственный отступ списка, базовая настройка будет просто умножаться. Например, рассмотрим следующий код CSS:

ul, ol {
  margin-left: 0;
  padding-left: 0;
}

li {
  margin-left: 2em;
}

Каждый пункт последующего списка потомка в цепочке наследует значение полей своего пункта списка предка, в дополнение к имеющимся своим собственным 2em. Поэтому пункт списка верхнего уровня (который не имеет пункта списка в качестве элемента предка) будет иметь левое поле 2 em, а пункт списка потомка первого пункта списка будет наследовать 2em от своего предка, и затем добавляет 2em, получая всего 4em ... и т.д.

Горизонтальные списки

Одним из наиболее распространенных изменений, требуемых при работе со списком, является создание горизонтального списка - то есть, вывод пунктов списка рядом друг с другом, а не один под другим. Это обычный прием при создании навигации сайта. Давайте воспользуемся примером из статьи о навигационных меню (см. рис 32.14):(рис 32.14) Простой список

Давайте преобразуем его в горизонтальный список, как показано на рис 32.15:(рис 32.15) Простой горизонтальный список

Чтобы добиться этого, необходимо сделать со списком три вещи:

В этом примере список имеет ID "mainmenu", поэтому будем использовать его в качестве контекстного селектора, чтобы гарантировать, что изменяется только тот список, который должен быть изменен. Код CSS имеет вид:

#mainmenu {
  margin: 0;
  padding: 0;
}

#mainmenu li {
  display: inline;
  padding: 0 1em 0 0;
}

В этом простом примере задание для пунктов меню display: inline; будет достаточно; знайте также, что использование float: left; создает аналогичный вид. Мы познакомимся больше с плавающими элементами позже в курсе.

Ложные столбцы

Ранее мы создали список лент RSS. Теперь давайте представим, что список был помещен в боковую панель сайта. Дизайнер хочет, чтобы список выводился двумя столбцами и с границей вокруг всей группы, как показано на рис 32.16.(рис 32.16) Список лент в двух столбцах с иконкой RSS в качестве маркера

Давайте предположим, что список находится в элементе <div>, который задает ширину и границу. Базовый список будет выглядеть примерно как на рис 32.17:(рис 32.17) Неоформленный список внутри границы

Добавим сначала иконку RSS, как было показано ранее; затем добавим поле 5px сверху, справа и слева:

.rss {
  margin: 5px 5px 0 5px;
  padding: 0;
}

.rss li {
  list-style-type: none;
  background: #fff url("icon-rssfeed.gif") 0 3px no-repeat;
  padding: 0 0 5px 15px;
}

Нам не нужно добавлять нижнее поле, так как последний пункт списка будет добавлять правильный интервал своим заполнением, как видно на рис 32.18:(рис 32.18) Полпути пройдено - мы имеем теперь правильный интервал и иконки маркеров

Теперь зададим для пунктов списка display: inline-block;, и зададим их ширину как 40%, а правое поле как 2% (можно использовать также ширину в пикселях). Необходимо также явно задать для <ul> ширину 100%, чтобы гарантировать, что список правильно заворачивается и измеряется:

.rss {
  margin: 5px 5px 0 5px;
  padding: 0;
  width: 100%;
}

.rss li {
  display: inline-block;
  width: 40%;
  margin: 0 2% 0 0;
  list-style-type: none;
  background: #fff url("icon-rssfeed.gif") 0 3px no-repeat;
  padding: 0 0 5px 15px;
}

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

<!--[if lte IE 7]>
  <style type="text/css">
    .rss li {
      float: left;
    }
  </style>
<![endif]-->

Мы имеем теперь требуемый двухстолбцовый результат, как видно на рис 32.19:(рис 32.19) Готовый список

Унаследованные браузеры

Если требуется создать такой дизайн для более старых браузеров, которые не поддерживают строковый блок ( ). Благодаря последнему раунду выпусков браузеры сделали inline-block ценным свойством вывода, поэтому если у вас нет большой доли более старых браузеров, таких как Firefox 2, вы сможете использовать метод inline-block.

Заключение по спискам

Мы рассмотрели сейчас базовое множество вариантов оформления и методов для списков. Вы можете реализовать эти примеры и объединять их для создания большого числа решений. Так как списки очень часто объединяют со ссылками, давайте перейдем к ссылкам.

Оформление ссылок

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

Тем не менее, это вполне возможно, пока вы помните о нескольких простых правилах:

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

Понимание состояния ссылок

Прежде чем можно будет оформлять ссылки, необходимо понять различные состояния ссылок. Всего существует пять состояний: непосещенная/по умолчанию, посещенная, фокус, под указателем, и активная.

Нужно всегда определять код CSS для каждого из этих состояний. Каждое из них передает пользователю информацию о том, как он взаимодействует со ссылкой. Если имеются какие-то сомнения относительно focus, hover и active, можно просто оформить focus и hover одинаковым образом, так как их функции достаточно похожи, так что одинаковый стиль ссылки не должен вызывать путаницы. Затем можно будет добавить какую-нибудь простую вариацию для active, например, изменяя текст на курсив. В крайнем случае, можно оформить все три одинаково.

Обратите внимание, что эти состояния не являются взаимно исключающими (хотя в действительности ссылка не может одновременно быть посещенной и непосещенной) - однако вполне возможно для ссылки быть одновременно hover, active и visited.

Как эволюция браузеров задает ожидания

Чтобы лучше понять некоторые распространенные ожидания пользователей относительно ссылок, будет полезно немного познакомиться с историей Web.

Вы могли слышать, как люди ссылаются в отношении ссылок на "поведение по умолчанию в стиле Netscape"; или что ссылки всегда должны быть синими или пурпурными. Это имеет отношение к самым ранним дням Web, когда браузеры задавали цвета для контента и авторы обладали не слишком большими возможностями по управлению представлением своих страниц.

Текст был черный, фон - серый, а все ссылки были подчеркнуты. Непосещенные ссылки были синими, посещенные ссылки были пурпурными, а активные ссылки были красными … и это, собственно, и было все. См. рис 32.20 в качестве иллюстрации.(рис 32.20) Снимок с экрана браузера Mosaic

Хотя это было немного однообразно, зато было согласованно - и это определило базовую линию ожиданий пользователей. В частности до сегодняшнего дня пользователи ожидают, что подчеркнутый текст является ссылкой. Они могут не ожидать, что все ссылки будут подчеркнуты, но они определенно ожидают, что подчеркнутый текст будет ссылкой. Лучше всего не вступать в противоречия с этим ожиданием.

Некоторые сайты все еще используют синие и пурпурные ссылки; и цвета этих ссылок по прежнему используются по умолчанию для нестилизованного контента в большинстве браузеров. Хотя можно всегда вернуться в прошлое и придерживаться этого множества цветов, пользователи обычно ощущают себя вполне комфортно с другими вариантами -- в определенных границах.

Ожидания пользователей

Существует несколько общих правил для ожиданий пользователей в отношении ссылок:

Вы должны всегда придерживаться этих базовых правил, так как они помогут вашим пользователям быстро определить и использовать ссылки. Вы должны создавать стили, которые не заставят кого-то остановиться и задуматься "а что же здесь будет ссылками?!".

Эти ожидания транслируются в несколько простых правил кодирования:

Используйте цвет с осторожностью

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

Необходимо также проверить, что выбранные цвета обладают достаточной контрастностью - это на самом деле легко сделать с помощью таких инструментов как Colour Contrast Analyser (для ПК и Mac) (http://www.paciellogroup.com/resources/contrast-analyser.html) или Web Accessibility Toolbar for Opera (http://www.paciellogroup.com/resources/wat-about.html) (оба инструмента компании Paciello Group).

The Colour Contrast Analyser (см. рис 32.211) позволяет использовать специальный инструмент для выбора цветов фона и переднего плана на экране, а затем получить простую оценку их контраста:(рис 32.21) Снимок с экрана Colour Contrast Analyser во время использования

Если все четыре результата анализатора контраста показывают pass, то цветовая комбинация будет хорошей. Не забудьте проверить все состояния ссылок. Может понадобиться ввести некоторые из них вручную в "шестнадцатеричное" поле для проверки focus, hover и active.

Приступим к делу: CSS

Теперь, после рассмотрения некоторых базовых правил для ссылок, давайте обратимся к кодированию - этот раздел содержит все детали кода CSS, который может понадобиться для успешного оформления ссылок.

Оформления состояния ссылок в правильном порядке

Прежде всего, необходимо знать, что если стили ссылок будут размещены в неправильном порядке в таблице стилей, настройки будут переопределять друг друга и состояния ссылок не будут работать. Стили ссылок всегда должны располагаться в следующем порядке:

Различные состояния ссылок оформляют с помощью их "псевдо классов"- :link :visited :focus :hover :active - которые добавляют к селектору элемента ссылки, a. Поэтому начальный CSS должен выглядеть следующим образом:

a:link{}
a:visited{}
a:focus{}
a:hover{}
a:active{}

Если вы хотите задать правило CSS для всех ссылок во всех состояниях, то можно оформлять непосредственно a. Не забудьте только поместить сначала базовое правило, чтобы сохранить порядок:

a {}
a:link{}
a:visited{}
a:focus{}
a:hover{}
a:active{}

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

Управление поведением по умолчанию

По умолчанию большинство браузеров задает для всех ссылок подчеркивание, а состояние фокуса клавиатуры ссылок имеет рамку, как показано на рис 32.22:(рис 32.22) Слева направо: используемое по умолчанию оформление фокуса клавиатуры в Opera 9, Firefox 2 и IE7

Если вы заменяете эти стили чем-то другим, можно изменить или отключить это поведение по умолчанию.

Подчеркивание

Подчеркивание задается с помощью свойства ):

a {
  text-decoration: underline;
}

Можно отключить подчеркивание, задавая для этого свойства значение none:

a {
  text-decoration: none;
}

Даже если вы сохраняете стиль подчеркивания, может оказаться проще отключить свойство text-decoration и использовать border-bottom для задания ложного подчеркивания. Мы рассмотрим этот метод в примере ниже.

Создание рамки

Создание рамки фокуса управляется свойством ). Рамка почти то же самое, что и граница, но она не требует пространства и не вызывает при появлении изменения потока страницы (обратите внимание, что это не поддерживается в браузере IE7 и более ранних версиях). Легче всего управлять рамкой с помощью сокращенного свойства:

a:focus{
  outline: thick solid #000;
}

Этот пример представит что-то похожее на рис 32.23:(рис 32.23) Пример вывода толстой черной рамки

Если вы сомневаетесь, что делать с рамкой, оставьте просто рамку в соответствии со значениями браузера по умолчанию.

Пример: восстановление значений по умолчанию браузера Netscape

В качестве простого примера оформления ссылок давайте восстановим значения по умолчанию браузера Netscape для синего, пурпурного и красного цветов ссылок. Мы сохраним подчеркивание, но добавим для состояние active использование курсива. Мы увеличим размер текста для этого примера и зададим для страницы белый фон.

body {
  background: #fff;
  color: #000;
  font-size: 2em;
}

a {
  text-decoration: underline;
}


a:link{
  color: #0000CC;
}

a:visited{
  color: #6D006D;
}

a:focus{
  color: #CC0000;
}

a:hover{
  color: #CC0000;
}
 
a:active{
  color: #CC0000;
  font-style: italic;
}

В результате будет получено что-то похожее на рис 32.244:(рис 32.24) Восстановление значений по умолчанию для браузера Netscape.

Ложное подчеркивание с помощью border-bottom

Многие дизайнеры заметили, что подчеркивание является немного толстоватым и пересекает нижние выносные элементы строчных букв - то есть линия проходит через нижнюю часть букв g, j, p, q и y. Это показано на рис 32.15:(рис 32.15) Рисунок 25:Подчеркивание пересекает выносные элементы строчных букв.

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

Прежде всего, отключаем подчеркивание всех состояний ссылок, а затем задаем border-bottom в соответствии с цветом ссылки для каждого состояния:

body {
  background: #fff;
  color: #000;
  font-size: 2em;
}

a {
  text-decoration: none;
}

a:link{
  color: #00c;
  border-bottom: 1px solid #00c;
}

a:visited{
  color: #6D006D;
  border-bottom: 1px solid #6D006D;
}

a:focus{
  color: #c00;
  border-bottom: 1px solid #c00;
}

a:hover{
  color: #c00;
  border-bottom: 1px solid #c00;
}

a:active{
  color: #c00;
  border-bottom: 1px solid #c00;
  font-style: italic;
}

В результате будет получено что-то похожее на рис 32.27:(рис 32.27) Ложное подчеркивание в действии

При использовании метода ложной границы необходимо следить за тем, чтобы было задано достаточно большое значение line-height, чтобы избежать наложения подчеркивания на следующую строку текста.

Оформление, которое не полагается на цвет

Так как пример до сих пор полагался полностью на цвет для различения четырех из пяти состояний ссылок, мы должны сделать следующий шаг и изменить нижнюю границу для visited, focus и hover. Давайте зададим для посещенной ссылки ( visited ) точечную границу, а для hover и focus штриховую, active оставим без изменений.а для hover и active штриховую.

body {
  background: #fff;
  color: #000;
  font-size: 2em;
}

a {
  text-decoration: none;
}

a:link{
  color: #00c;
  border-bottom: 1px solid #00c;
}

a:visited{
  color: #6D006D;
  border-bottom: 1px dotted #6D006D;
}

a:focus{
  color: #c00;
  border-bottom: 1px dashed #c00;
}

a:hover{
  color: #c00;
  border-bottom: 1px dashed #c00;
}

a:active{
  color: #c00;
  border-bottom: 1px solid #c00;
  font-style: italic;
}

В результате будет получено что-то похожее на рис 32.28:(рис 32.28) Изменение стиля границы для каждого состояния ссылки

Принимая :(рис 32.29) Состояния ссылок теперь различаются даже в черно-белом представлении

Иконки на ссылках

Некоторые сайты используют иконки и символы для добавления информации о своих ссылках. Например, некоторые сайты используют стрелку для указания, что ссылка указывает на внешний сайт; или используют символ "галочки", чтобы показать, что ссылка была посещена.

Такие эффекты легко создаются с помощью фоновых изображений, как показано на рис 32.30:(рис 32.30) Пример ссылок с различными иконками

Чтобы добавить иконку стрелки к внешним ссылкам, можно добавить класс "external" в тег ссылки:

<a href="http://example.com/" class="external">external link</a>

Затем в таблице стилей задается фоновое изображение для этого класса - не забывая добавить заполнение для размещения этого изображения:

a.external {
  background: #fff url("icon-external.gif") center right no-repeat;
  padding-right: 30px;
}

Этот пример будет применять иконку для всех экземпляров внешних ссылок во всех состояниях. Если требуется ограничить иконки только непосещенными внешними ссылками, можно объединить классы и псевдо-классы состояний ссылок в селекторе:

a.external:link{
  background: #fff url("icon-external.gif") center right no-repeat;
  padding-right: 30px;
}

Объединение классов и состояний открывает широкие творческие возможности для ссылок. Не забудьте проверить свои цвета, вашим единственным ограничением с этой точки зрения является только воображение.

Объединяем все вместе - простое навигационное меню

Для иллюстрации одного из способов объединения списков и ссылок, ниже представлен простой пример раскрывающегося навигационного меню, показанного на рис 32.31. Раскрывающиеся меню являются очень распространенной навигационной системой.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv= "Content-Type" content="text/html; charset=utf-8"/>
	<title>Styling Lists example - basic flyout list</title>
	<link rel="stylesheet" href="styling-lists-example-flyout.css" type="text/css" media= "screen, projection"/>
	<script type="text/javascript" src="styling-lists-example-flyout.js"></script>
</head>
<body>
<div id="page">

    <h1 >Home</h1>

	<!-- Обратите внимание, что ID контейнерного списка должен 
соответствовать ID, заданному в Javascript. -- >
    <ul id="nav">
      <li><a href="http://example.com/">Home</a>
      	<ul>
      		<li><a href="http://example.com/">Nested Item</a></li>
      		<li><a href="http://example.com/">Nested Item</a></li>
      	</ul>
      </li>
      <li><a href="http://example.com/">About Us</a>
      	<ul>
      		<li><a href="http://example.com/">Nested Item</a></li>
      		<li><a href="http://example.com/">Nested Item</a></li>
      	</ul>
      </li>
      <li><a href="http://example.com/">Our Products</a >
      	<ul>
      		<li><a href="http://example.com/">Nested Item</a></li>
      		<li><a href="http://example.com/">Nested Item</a></li>
      	</ul>
      </li>
      <li><a href="http://example.com/">Contact Us</a>
      	<ul>
      		<li><a href="http://example.com/">Nested Item</a></li>
      		<li><a href="http://example.com/">Nested Item</a></li>
      	</ul>
      </li>
    </ul>

	<h2>Stuff</h2>

	<p>Text</p>

	<p>Text</p>

</div> <!-- // #page -- >
</body>
</html>

Заключение

Хорошие навыки оформления списков и ссылок являются существенно важными для разработчиков Web, так как они используются повсеместно. Они регулярно объединяются для создания навигации сайта; в то же время четкое оформление ссылок является критически важным при использовании любого сайта. Плохое оформление ссылок может серьезно запутать любого, и может даже сделать сайт непригодным для некоторых людей.

Контрольные вопросы

Дополнительное чтение

Об авторе

Бен Бучанан начал создавать Web-страницы более десяти лет назад, получив степень по всем наукам, кроме ИТ. Он работал как в публичном (университет), так и в частном секторах; и работал над реконструкцией крупных Web-сайтов, включая The Australian (http://www.theaustralian.com.au/) и три поколения корпоративного Web-сайта Университета Гриффита (http://www.griffith.edu.au/). Он работает в настоящее время в качестве Архитектора внешнего интерфейса в News Digital Media (http://www.newsdigitalmedia.com.au/) и пишет в блоге 200ok (http://weblog.200ok.com.au/).