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

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

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

CSS описания ссылки	Комментарий	Результат
`a {font-size:16px}`	Ссылка без псевдоэлементов. По умолчанию ее цвет синий, у той, которую посетили – пурпурный.	Ссылка
`a:link {font-size:16px; color:Red} a:visited {font-size:16px; color:DarkRed} a:hover {font-size:16px; color:Tomato}`	Здесь уже с псевдоэлементами: `link` – определяет изначальный вид ссылки. `visited` – определяет вид посещенной ссылки. `hover` – определяет вид ссылки в момент наведения на нее курсора.	Ссылка
`a {font-size:16px; color:#ff6600; font-weight:bold} a:hover {font-size:16px; color:#ff0000; font-weight:bold}`	Данный способ описания ссылки самый распространенный. Селектор `a` соединяет в себе и `а:link`, и `а:visited`. `а:hover` – как было сказано, определяет вид ссылки в момент наведения на нее курсора мыши.	Ссылка

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

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 ссылка и курсор