Урок 5. Ссылки в CSS
Автор: Андрей Краснокутский
Дата: 2009-03-17 Как Вы помните из уроков по HTML ссылки подразделяются на:
-
не посещенная ссылка - определяется атрибутом link="#3562c5";
-
посещенная ссылка - определяется атрибутом vlink="#c53535";
-
ссылка в момент нажатия - определяется атрибутом alink="#000000".
Прописывая эти атрибуты в теге мы определяли внешний вид ссылок на WEB-странице. Цвет ссылки задавался шестнадцатеричным значением или названием цвета.
В CSS параметры ссылок определяется с помощью псевдоклассов определяющих внешний вид тега <а>, которые прописываюся в таблице стилей. Это делается так:
-
a:link { color:#634438; } - не посещенные ссылки;
-
a:visited { color: #634438; } - посещённые ссылки;
-
a:focus { color:#c380f8} - состояние в фокусе;
-
a:hover { color:black; } - при установке курсора на ссылку;
-
a:active {color:red; } - при активизации ссылок (в момент нажатия).
Как видите, для элемента определены пять псевдоклассов (имена которых отделяются двоеточием). Цвет ссылки задается опять же исходя из вкусов web-мастера или общего дизайна сайта (т.е. цвет любой какой нравится) указанием названия цвета или его шестнадцатеричным значением.
Примечание: Псевдокласс a:focus подсвечивает положение табуляции для пользователей, применяющих для навигации клавиатуру. Этот псевдокласс поддерживают не все браузеры, поэтому он практически не применяется.
Важно: Все эти псевдоклассы имееют одинаковый вес (порядок выполнения браузером), поэтому порядок в котором они размещаются в файле CSS, имеет большое значение. Псевдокласс, который появляется в файле CSS позже, заменяет собой преведущий. Правильный порядок указан выше!
В HTML все ссылки имели обязательное подчеркивание снизу. В CSS появилась интересная возможность добавляя к псевдоклассам ссылок свойство text-decoration с различными значениями, влиять на подчеркивание ссылки. Это свойство может принимать следующие значения:
Довавляя свойство text-decoration в псевдоклассы ссылок можно создавать новые классы с очень интересными эффектами.
Кстати свойство text-decoration со значениями описанными выше, можно применять не только к ссылкам, но и к обычному тексту - эффект будет тот же.
Так же как и для простого текста мы можем задать для ссылок и другие свойства: определенный шрифт, размер шрифта, выделить ссылку жирным.
Давайте на нашей тестовой страничке для всех ссылок изменим шрифт на Arial, сделаем его жирным, величиной 12px. Не посещенные ссылки оставим синего цвета с нижним подчеркиванием, посещенные ссылки сделаем черного цвета, а вот ссылки в момент наведения курсора сделаем красного цвета и с верхним подчеркиванием.
Открываем файл со стилями style.css и добавляем в следующий код:
Листинг 5.1.
a {
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:12px;
}
a:link { color:blue; }
a:visited {
color:black;
}
a:hover {
color:red;
text-decoration:overline;
}
a:active {color:green; }
| |
Сохраняем, обновляем файл index.html и смотрим. Вот что у нас получилось.
Примечание: Мы прописали эти свойства для всех ссылок на web-страницах к которым "привязана" эта таблица стилей, если Вы хотите некоторые ссылки выделить как-то по другому, то для них нужно создать отдельный класс и естественно прописать этим ссылкам (которые хотите изменить).
Просмотров: 19759
На страничке где приведен пример того "что получилось" перед ссылками стоят "стрелочки-треугольнички". Как их добавить, здесь Вы ни чего об этом не говорите?
Смотрите в разделе Статьи "Как добавить стрелку перед ссылкой" там все подробно описано
А если сайт создан на народе.ру и я хочу убрать подчёркивание и изменить цвет ссылки, что мне нужно прописать в коде этой ссылки или перед кодом?
Здравствуйте. Подскажите пожалуйста, как сделать так, чтобы ссылка в меню оставалась подчеркнутой на той странице на которой нахожусь? Спасибо.
Добрый День, вы не поможете, как сделать ссылку которая выполняла несколько действий: как например при наведении меняла цвет, при нажатии и до ее активации?
Vasala18 создайте таблицу стилей и пропишите код Листинга 5.1 и ссылка будет при наведении менять цвет, при нажатии и до ее активации
|