Rambler's Top100

ОФОРМЛЕНИЕ ССЫЛОК
в CSS

Обычно, если не указывать стиль, на странице ссылка будет выглядеть стандартно, как установлено в настройках браузера, по умолчанию это ссылка синего цвета при открытии страницы, красного цвета при щелчке по ссылке и фиолетовый цвет после посещения адреса указанного в ссылке

Ссылка без оформления стилей  

И так, ссылки имеют четыре состояния

1.a:link (Ссылка в спокойном состоянии при открытии страницы}
2.a:visited ( Ссылка посещённая)
3.a:hover (Ссылка при наведении мыши на неё)
4.a:active (Cсылка в момент щелчка по ней)

C помощью стилей CSS каждому из этих состояний, можно назначить свои стили. К оформление ссылок в css применяется тип селекторов псевдоклассы. Как вы уже знаете из HTML, ссылки обозначаются тегом <a>, в css a у нас будет селектором по элементу, а каждое из четырёх состояний - link, visited, hover, active, это имена псевдоклассов для ссылок, в файле CSS для каждого псевдокласса пишутся свои стили, например так:

a:link{ font:Arial, Helvetica, sans-serif; font-size:16px; font-weight: bold; text-decoration:none; color:#006400; }

a:visited { font:Arial, Helvetica, sans-serif; font-size:16px; font-weight: bold; text-decoration:none; color:#B22222; }

a:hover { font:Arial, Helvetica, sans-serif; font-size:16px; font-weight: bold; text-decoration:none; color:#00FA9A; }

a:active { font:Arial, Helvetica, sans-serif; font-size:16px; font-weight: bold; text-decoration:none; color:#FF1493; }

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

В этом случае все ссылки где есть тег <A> будут оформлены вышеописанным стилем. Но на странице может быть несколько видов ссылок, например нужно оформить ссылки верхнего меню одним стилем, а боковое меню другим стилем, для этого можно использовать либо селектор по КЛАССУ, либо селектор по ID

Для верхнего меню

Для ссылок верхнего меню создадим отдельный класс, например top_menu и пишем в CSS файле так:

.top_menu a:link{ font:Arial, Helvetica, sans-serif; font-size:14px; font-weight: bold; text-decoration:none; color:#006400; }

.top_menu a:visited { font:Arial, Helvetica, sans-serif; font-size:14px; font-weight: bold; text-decoration:none; color:#B22222; }

.top_menu a:hover { font:Arial, Helvetica, sans-serif; font-size:14px; font-weight: bold; text-decoration:none; color:#00FA9A; }

.top_menu a:active { font:Arial, Helvetica, sans-serif; font-size:14px; font-weight: bold; text-decoration:none; color:#FF1493; }

В коде HTML-файла пишем <a class="top_menu">Здесь текст ссылки</a>

Невидимые ссылки

Иногда может понадобиться сделать ссылкой какое-то слово в тексте, но чтобы эта ссылка не выделялась из общего текста, например в предложении ниже, слово "классификации" сделаем ссылкой

Если рассматривать признаки классификации, то можно выделить следующeе...

Присваеваем класс для такой ссылки, пусть это будет "nesc" и прописываем значения свойств идентичные тексту, например так:

.nesс a:link{ font-size:16px; color: #680000; text-decoration:none; }

.nesс a:visited { font-size:16px; color: #680000; text-decoration:none; }

.nesс a:hover { font-size:16px; color: #680000; text-decoration:none; }

.nesс a:active { font-size:16px; color: #680000; text-decoration:none; }

В коде HTML- файла пишем:

<p>
Если рассматривать признаки <span class="nesс"> <a href="#">классификации </span>, то можно выделить следующeе...</p>

И теперь слово "классификации" не выделяется из текста, и в то же время оно является ссылкой.

Если рассматривать признаки классификации, то можно выделить следующeе...

Для перехода к следующей теме "Списки в CSS", ниже нажмите кнопку 6

 

 

Rambler's Top100 Яндекс цитирования