Ссылки CSS

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

CSS-стили для ссылок

Ссылки имеют четыре различных состояния - link, visited, active и hover. Эти четыре состояния ссылки или гиперссылки можно определить с помощью CSS-стилей для элементов с锚ом:ПсевдоклассыУстановить различные стили с помощью CSS-атрибутов, в зависимости от их состояния.

Это связано с HTML <a>Маркер связанного CSS-псевдокласса, который можно использовать для определения различных стилей для различных состояний ссылок.

• a:link — Установить стиль для обычной или не посещенной ссылки без курсора.

• a:visited- Установить стиль для ссылки, которую пользователь уже посещал, но курсор на ней не находится.

• a:hover — Установить стиль для ссылки, когда пользователь наводит на нее курсор.

• a:active- Установить стиль для активной ссылки.

Вы можете指定 CSS-атрибуты, которые вы хотите определить, например:color，font-family，backgroundи т.д., как этиВыберитеПереопределение стиля ссылок, как если бы это был обычный текст.

a:link { /* Ссылка, которую еще не посещали */
　　　　color: #FF0000;
　　　　text-decoration: none;
}
a:visited { /* Ссылка, которую уже посещали */
　　　　color: #00FF00;
}
a:hover { /* Ссылка, на которую навели мышь */
　　　　color: #FF00FF;
　　　　text-decoration: underline;
}
a:active { /* Ссылка, которую сейчас нажимают */
　　　　color: #0000FF;
}

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

Стандартный стиль ссылок

В всех основных веб-браузерах, если стиль не был专门 настроен, ссылки на веб-страницах имеют подчеркивание и используют стандартный цвет ссылок браузера.

По умолчанию цвет ссылок в веб-браузерах на основе Gecko (например, Firefox) составляет - СинийЭто означает, что ссылка еще не посещена,ФиолетовыйЭто означает, что ссылка уже посещена,КрасныйЭто означает ссылку, которую сейчас нажимают.

Настройка цвета ссылок

Ниже приведен пример того, как можно настроить цвет ссылок.

a:link { /* Ссылка, которую еще не посещали */
　　　　color: #FF0000;
}
a:visited { /* Ссылка, которую уже посещали */
　　　　color: #00FF00;
}
a:hover { /* Ссылка, на которую навели мышь */
　　　　color: #FF00FF;
}
a:active { /* Ссылка, которую сейчас нажимают */
　　　　color: #0000FF;
}

Удаление стандартного подчеркивания из ссылок

text-decoration Свойства CSS обычно используются для удаления стандартных подчеркиваний из ссылок. Ниже приведен пример того, как удалить или установить свойства text-decoration для различных состояний ссылок.

a:link { /* Ссылка, которую еще не посещали */
　　　　color: #FF0000;
　　　　text-decoration: none;
}
a:visited { /* Ссылка, которую уже посещали */
　　　　color: #00FF00;
　　　　text-decoration: none;
}
a:hover { /* Ссылка, на которую навели мышь */
　　　　color: #FF00FF;
　　　　text-decoration: underline;
}
a:active { /* Ссылка, которую сейчас нажимают */
　　　　color: #0000FF;
　　　　text-decoration: underline;
}