Оформление списков и ссылок с помощью CSS

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

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

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

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

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

Стили ссылок всегда должны быть заданы в таблице стилей в следующем порядке: link, visited, focus, hover и active. Если стили ссылок будут размещены в другом порядке, то настройки будут переопределять друг друга, и состояния ссылок не будут работать.

Для оформления различных состояний ссылок используются псевдоклассы :link, :visited, :focus, :hover и :active, которые добавляют к селектору элемента A:

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

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

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

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

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

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

Подчеркивание задается с помощью свойства text-decoration, рассмотренного в "Оформление текста с помощью CSS" . Напомним, что подчеркивание задается с помощью значения свойства text-decoration, равного underline:

A {text-decoration: underline;}

Можно отключить подчеркивание с помощью следующего правила:

A {text-decoration: none;}

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

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

A {text-decoration: none;}

Отключив заданное по умолчанию подчеркивание, можно задать свое подчеркивание с помощью свойства border-bottom:

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

Результат применения описанных выше свойств к состоянию ссылки представлен на рисунке 14.3. Для сравнения представлена также ссылка, оформленная по умолчанию.

Рис. 14.3. Ложное подчеркивание в действии

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

Ложное подчеркивание позволяет создавать дизайн, в котором состояния ссылок можно отличать не только по цветам. Задавая различный стиль подчеркивания, можно гарантировать, что пользователь сможет различить состояния ссылок даже в черно-белом представлении.

Изображения возле ссылок

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

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

<A href="http://www.somewhere.com /"
 class="external">external link</A>

Затем необходимо задать фоновое изображение для этого класса:

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

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

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

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