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

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

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

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

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

1. link
2. visited
3. focus
4. hover
5. active

Различные состояния ссылок оформляют с помощью их "псевдо классов"- :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

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

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

Подчеркивание задается с помощью свойства text-decoration (http://www.w3.org/TR/REC-CSS2/text.html#lining-striking-props):

a {
  text-decoration: underline;
}

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

a {
  text-decoration: none;
}

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

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

Создание рамки фокуса управляется свойством outline (http://www.w3.org/TR/REC-CSS2/ui.html#dynamic-outlines). Рамка почти то же самое, что и граница, но она не требует пространства и не вызывает при появлении изменения потока страницы (обратите внимание, что это не поддерживается в браузере 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.

Давайте предположим, что проектирующий сайт человек согласился, и захотел, чтобы подчеркивание было тоньше и не касалось текста. Для выполнение этого обычного запроса, мы используем вместо подчеркивания границу, поэтому она выглядит, как показано на рис. 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. Изменение стиля границы для каждого состояния ссылки

Принимая focus и hover как эквивалентно оформленные состояния, этот метод означает, что состояния ссылок различаются не только цветами. Даже если вы видите эти ссылки черно-белыми, вы сможете определить различные состояния ссылок, как показано на рис. 32.29:

Рис. 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;
}

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