Главная
Блог разработчиков phpBB
 
+ 17 предустановленных модов
+ SEO-оптимизация форума
+ авторизация через соц. сети
+ защита от спама

Ссылки в CSS

Viktor | 24.02.2014 | нет комментариев

Как Вы помните из уроков по 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: none; – отключает поддчеркивание;
  • text-decoration: overline; – подчеркивание сверху;

Довавляя свойство 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-страницах к которым “привязана” эта таблица стилей, если Вы хотите некоторые ссылки выделить как-то по другому, то для них нужно создать отдельный класс и естественно прописать этим ссылкам (которые хотите изменить).

АВТОРСКИЕ ПРАВА
Источник: luksweb.ru
При перепечатке ссылка на источник обязательна
Оставить комментарий

Ваш email не будет опубликован. Обязательные поля помечены (обязательно)

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Форум phpBB, русская поддержка форума phpBB
Рейтинг@Mail.ru 2008 - 2014 © BB3x.ru - русская поддержка форума phpBB