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

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

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

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

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

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

  1. Примеры CSS ссылок в таблице форматирования
  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 | Обновление: Август 2018

CSS текст по вертикали   CSS ссылка, гиперссылка   CSS ссылка и курсор