Как правильно прописывать CSS-свойства для гиперссылок. Псевдоселекторы

Как правильно прописывать CSS-свойства для гиперссылок. Псевдоселекторы

Как правильно прописывать CSS-свойства для гиперссылок. Псев

» » Сообщение:

Как правильно прописывать CSS-свойства для гиперссылок. Псевдоселекторы

При указании CSS-стилей для ссылок необходимо соблюдать некоторые правила.

Правило №1

Необходимо соблюдать правильную последовательность появления в коде псевдоклассов ссылки (:link, :visited, :focus, :hover, :active). Для запоминания правильной последовательности псевдоклассов используется запоминающаяся мнемоническая фраза "LOVE-FOILS-HATE», где буква “L” означает псевдокласс :link, “V” означает :visited, ”F” означает :focus, “H” означает :hover, “A” означает :active. Данная последовательность псевдоклассов обеспечит назначение правильных CSS-свойств гиперссылке. Состояния гиперссылки, описываемые псевдоклассом, стоящим позже остальных, будет доминировать. Если псевдокласс :focus стоит раньше псевдокласса :hover, то тогда при наведении указателя мыши на ссылку, даже если на ссылке в данный момент будет стоять фокус, доминировать будут свойства, указанные для псвдокласса :hover. Общий селектор для ссылки без указанного пседокласса (обозначается просто a.mylink) может стоять где угодно.

Код: Выделить всё Развернуть
a.mylink:link { /* Не посещённая ранее ссылка */
}
 
a.mylink:visited { /* Посещённая ранее ссылка */
}
 
a.mylink:focus { /* Ссылка, на которой находится фокус */
}
 
a.mylink:hover { /* При наведении курсора мыши над ссылкой */
}
 
a.mylink:active { /* При нажатии и неотпускании левой клавиши мыши над ссылкой */
}
 
a.mylink { /* Общий селектор для всех состояний и всех псевдоклассов, если для них не установлены свои собственные свойства */
}

Следует заметить, что :focus поддерживается Internet Explorer только начиная с восьмой версии. Для некоторых других браузеров (например, Опера) псевдокласс :focus не будет работать для ссылок, если для этих ссылок не установлен атрибут tabindex. Например так:

Код: Выделить всё Развернуть
<a href="http://mail.ru" tabindex="2">mail.ru</a>

Общий селектор ссылки без каких либо псевдоклассов вида a.mylink { } устанавливает CSS-свойства для ссылки в любых состояниях, если в псевдоклассах не определены свои собственных свойства. При этом не важно, где данный селектор находится: до или после стилей для псевдоклассов, он никогда не может переопределить их. При наличии указания свойств гиперссылки с использованием всех псеводклассов (:link, :visited, :focus, :hover, :active), надобность в использовании общего стиля отпадает, то есть использование селектора a.mylink { } при наличии остальных пяти псевдоклассв, в принципе, не обязательно. Но его использование способно уменьшить объём CSS-кода.

Правило №2

Обычно, при наличии одного css-свойства, указанного хотя бы для одного из пяти состояний гиперссылки, рекомендуется указывать это css-свойство и для остальных состояний. Особенно это важно, если это “нетекстовые” css-свойства, относящиеся не к свойствам текста, такие как display, position, margin, padding и прочие. Например, если для псевдокласса :hover указано свойство margin-left:20px;, то свойство margin-left, имеющее свои собственные нужные значения, рекомендуется указать для всех остальных состояний ссылки, используя либо псевдоклассы, либо общий селектор ссылки вида a.mylink { }. Этим обеспечивается однозначность отображения во всех браузерах, гарантируется, что это свойство не будет случайно переопределено в селекторах для совсем других ссылок, а так же упрощается написание и отладка кода в некоторых сложных ситуациях.

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

Пример:

Код: Выделить всё Развернуть
/* свойство margin-top определяется сразу для пяти состояний ссылки в отдельных псевдоклассах */
a.mylink:link {
margin-top:0;
}
 
a.mylink:visited {
margin-top:0;
}
 
a.mylink:focus {
margin-top:0;
}
 
a.mylink:hover {
margin-top:20px;
}
 
a.mylink:active {
margin-top:0;   
}

Второй, когда используется общий селектор ссылки (который относится сразу ко всем состояниям ссылки):

Код: Выделить всё Развернуть
/* свойство margin-top определяется  для всех состояний ссылки, а для :hover имеет особенное значение */
a.mylink:hover {
margin-top:20px;
}
 
a.mylink {
margin-top:0;
}

При использовании первого способа в некоторых случаях возможно непредвиденное поведение браузеров. Например в IE6, IE7 и IE8 первый вариант примера иногда работает не так как ожидается. К примеру такой CSS-код сделает в IE6, IE7, IE8 (в IE8 при DTD указанном как XHTML 1.0 Transitional и указанном пространстве имён для тега <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru"> результат отличался от кода с DTD указанном как HTML5) так, что при наведении курсора мыши на ссылку она не смещается вниз в результате относительного позиционирования, как в других браузерах:

Код: Выделить всё Развернуть
/* В IE6 и IE7 при наличии свойств position и top код работает не так как ожидается */
a:link {
position:relative;
top:0;
}
 
a:visited {
position:relative;
top:0;
}
 
a:focus {
position:relative;
top:0;
}
 
a:hover {
position:relative;
top:10px;
}
 
a:active {
position:relative;
top:0;
}
 
a {
color:blue;
}

А следующий код в IE6-IE8 уже работает корректно:

/* В IE6-IE8 этот код работает также, как и в других браузерах */

Код: Выделить всё Развернуть
a:hover {
position:relative;
top:10px;
}
 
a {
color:blue;
}

В целом, это полезное правило, которое упрощает отладку кода. Но из-за возможных проблем в браузере IE его следует применять осторожно.

Правило №3

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

Код: Выделить всё Развернуть
div.content ul li.list-product a.desc:hover {
}

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

Код: Выделить всё Развернуть
div.content ul li.list-product a.desc {
}
 
div.content ul li.list-product a.desc:link {
}
 
div.content ul li.list-product a.desc:visited {
}
 
div.content ul li.list-product a.desc:focus {
}
 
div.content ul li.list-product a.desc:hover {
}
 
div.content ul li.list-product a.desc:active {
}

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

© http://indysite.ru/

как правильно, прописывать, css-свойства, гиперссылка, псевдоселекторы



Похожие темыКомментарии ПросмотрыПоследнее сообщение
0569Как правильно ухаживать за лицом в ...
Сообщение от: Admin
0268Не хлопайте дверью! Или как правиль...
Сообщение от: Admin
21040Re: Помогите правильно написать фун...
Сообщение от: razrushutel