CSS цвет ссылки, стиль

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

Урок 8. CSS цвет ссылки, подчеркивание ссылок, картинка - ссылка

CSS атрибуты, определяющие CSS ссылки

В CSS ссылки также поддаются форматированию:

Содержание страницы

  1. Наглядные примеры в таблице форматирования
  2. Пример CSS подчеркивания ссылок
  3. Определяем CSS цвет ссылки и ее стиль
  4. CSS картинка - ссылка и пример написания кода

CSS подчеркивание ссылок, декоративный стиль

CSS подчеркивание ссылок определяется text-decoration и его значениями:

<head>
<title>Подчеркивание ссылок в CSS</title>
<style type="text/css">
a:link, a:active {
color:#0000ff;
font-weight:bold
}
a:visited {
color:#66cc66;
font-weight:bold
}
a:hover {
color:#ff0000;
font-weight:bold;
text-decoration:none
}
</style>
</head>
<body>
<p><a href="#">Ссылка</a></p>
</body>

Результат: CSS ссылки

Атрибут text-decoration имеет такие значения: underline – гиперссылка подчеркнута; overline – надчеркнута и none – стиль без декораций.

a:link, a:active – псевдоэлементы, которые определяют первоначальный вид ссылки и в момент нажатия (текст синего цвета, полужирный, по умолчанию подчеркнут).

Псевдоэлемент a:visited определяет уже посещенную ссылку (в данном случае текст зеленый, полужирный и подчеркнутый).

Псевдоэлемент a:hover определяет внешний вид ссылки при наведении на нее курсора мыши (текст красный, полужирный, без декораций).

Определяем CSS цвет ссылки

CSS цвет ссылки определяется атрибутом color и его значениями:

<head>
<title>Цвет ссылки в CSS</title>
<style type="text/css">
.primer a {
color:#ff6600
}
.primer a:hover {
color:#6600ff
}
</style>
</head>
<body>
<p class="primer">Текст со <a href="#">ссылкой</a></p>
</body>

Селектор a соединяет в себе а:link, а:visited, a:active.

Результат: ссылки в CSS

Смотрите дополнительно: таблица цветов

CSS картинка - ссылка

CSS картинка - ссылка определяется картинкой и тегами гиперссылки:

Картинка ссылка

Код примера:

<title>CSS картинка - ссылка</title>
</head>
<body>
<p>
<a href="#"><img src="../images/strelkavverx.png" alt="" border="0" /></a>
</p>

border="0" – отменяет границу картинки - ссылки и стили здесь не участвуют.

Дата публикации: Октябрь 2009 | Обновление: Август 2014

Урок 7. Текст по вертикали   CSS ссылка, гиперссылка   Урок 9. CSS курсор

    Сохранить в сервисы и закладки