Приступим к делу: css
Теперь, после рассмотрения некоторых базовых правил для ссылок, давайте обратимся к кодированию - этот раздел содержит все детали кода CSS, который может понадобиться для успешного оформления ссылок.
Оформления состояния ссылок в правильном порядке
Прежде всего, необходимо знать, что если стили ссылок будут размещены в неправильном порядке в таблице стилей, настройки будут переопределять друг друга и состояния ссылок не будут работать. Стили ссылок всегда должны располагаться в следующем порядке:
link
visited
focus
hover
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.24:
Рис. 32.24. Восстановление значений по умолчанию для браузера Netscape.