Как изменить цвет ссылки с помощью css

изменить цвет ссылки htmlКаждый из нас, бродя по просторам интернета натыкался на сайты у которых есть ссылки с меняющимся цветом при наведении на них курсором.

Этому мы сегодня и будем учиться, для начала создадим простую ссылку:

<a href="url" title="Title">Стандартная ссылка html</a>

В данном случае ссылка будет выглядеть как у большинства сайтов - стандартно. Цвет ссылки будет синим и она будет подчёркнута.

Еще при наведении на данную ссылку будет отображена подсказка, об этом говорит тег title.

Далее изменим ссылку:

<a href="url" title="title" style="color: #00CC33; text-decoration:none;">Изменение цвета ссылки</a>

Теперь ссылка будет без подчёркивания и изменится её цвет в данном случае на зелёный.

Тег style='color: #00CC33; отвечает за цвет самой ссылки отображаемой в окне браузера, а text-decoration:none указывает что ссылка должна быть без подчёркивания.

Следующим делом создадим файл index.php

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<a href="url" title="Title">Стандартная ссылка html</a>
</body>
</html>

Далее файл style.css

a {
	color:#FF0000;
	text-decoration:none;
}
a:active {
	color:#FF0000;
	text-decoration:none;
}

a:visited {
	color:#666666;
	text-decoration:none;
}

a:hover {
	color:#339900;
	text-decoration: underline;
}

В итоге все ссылки теперь будут иметь единый стиль, кроме тех у которых задан свой стиль. Изменяя значения в файле style.css вы можете редактировать стиль (цвет) ссылки для вашего дизайна.

Поделитесь ссылкой если мы вам помогли!

Читайте также:

Циклы в JavaScript

Лучшие дизайны сайтов рунета

Обзор ноутбука Lenovo IdeaPad Y560

Как сделать отступ в html

Учимся работать с cookies на javascript

Добавить комментарий:

Минимум 100 символов.
Модераторы detected!

Вы ввели сообщение длиной символов

Три + Пять ? =