Ссылки в CSS при наведении
Добавлено 19.05.2015 в 19:25
Ссылки в CSS при наведении
Основой интернета является гипертекст. Гипертекст состоит из узлов перехода от одного текста к какому-либо другому и эти узлы именуются ссылками.

По общепринятым стандартам гипертекста и интернета, все ссылки на сайте должны быть подчёркнуты. Выделяются ссылки для того, чтобы пользователь мог их сразу обнаружить среди простого текста. Ссылка — это как якорь среди сплошного текста. Как спасательный круг для пользователя, взявшись за который, он сможет попасть на какой-то определенный сайт.

Выделение и подчеркивание ссылок

Подчеркнутые ссылки — это один из общепринятых стандартов всемирной паутины.
К сожалению, некоторые вебмастеры ищут сомнительную, на мой взгляд, оригинальность, уходят от негласных правил и не подчеркивают ссылки в силу каких-либо обстоятельств. Чаще всего такие обстоятельства выливаются в обыденную фразу: «Подчеркнутые ссылки портят дизайн».

Также существует еще одно утверждение, о котором говорит даже А. Лебедев: «Активные ссылки должны быть синего цвета». Однако в настоящее время синий цвет #0000FF в ссылках используется все более редко, так как web-дизайнеры предпочитают сделать ее более подходящей к основному тону сайта.

Изменение ссылки при наведении делает навигацию по сайту более удобной и понятной для пользователя. Некоторые web-мастера предпочитают не выделять ссылку в тексте, делая ее не отличимой от основного контента. К примеру, мы видим статью на каком-либо сайте. В статье есть несколько ссылок с нужными автору анкорами. Ссылки никак не выделены (не подчеркнуты, написаны черным цветом, как и вся статья), соответственно, пользователь банально не подозревает об их существовании. Особенно часто это используется при размещении в статьях оплаченных ссылок на чужой сайт, чтобы посетитель не увидел их и не захотел перейти на другой ресурс.

Несколько лет назад наиболее распространенной была следующая ситуация. Все ссылки в статье подчеркнуты и отображаются синим цветом. При наведении курсора на ссылку она меняет цвет на оттенок, близкий к синему. При переходе по ссылке она окрашивается в другой цвет (скажем, красный) и даже если пользователь выходил с сайта, а затем заходил снова, посещенные ссылки выделялись, тем самым давая понять пользователю, что он уже просмотрел данные документы. Если он очистит cookies, то все ссылки вновь окажутся «не посещенными», то есть синими.

Псевдоклассы CSS: ссылки при наведении

Псевдокласс — это параметр, определяющий динамическое состояние элементов, которое изменяется со временем или с помощью действий пользователя. На псевдоклассах базируются каскадные таблицы стилей CSS.

Код

a:link { /*Используется для не посещенных ссылок*/}
a:visited { /*Используется для посещенных ссылок*/}
a:hover { /*Этот псевдокласс используется для ссылок, над которыми находится курсор мыши*/}
a:active { /*Используется для активных ссылок*/}


В фигурных скобках задаются параметры отдельно для каждого псевдокласса.

Код

color:  
/*Цвет ссылки. Например, color: #b32020; Цвета подбирайте в фотошопе*/
background-color:
/*Цвет фона ссылки*/
font-style:
/*Начертание шрифта: обычное (normal), наклонное (oblique) или курсивное (italic) */
letter-spacing:
/*Расстояние между буквами, задается в пикселях. Например, letter-spacing: 10px */
font-weight:
/*Насыщенность шрифта. bold — полужирное, bolder — жирное, lighter — светлое, normal — нормальное начертание. Либо можно использовать цифры от 100 до 900*/
text-decoration:
/*Оформление текста. Имеет несколько параметров: мигает раз в секунду (blink), перечеркнутый текст (line-through), надчеркнутый текст (overline), перечеркнутый текст (underline), без всех эффектов (none)*/


Если вы всё же решили убрать подчеркивание у ссылок на сайте, то в параметрах у вышеназванных псевдоклассах пропишите text-decoration: none
К материалу оставили 0 комментариев