Изменить цвет ссылки HTML

Информация о материале

 

Изменить цвет ссылки HTML

 

Цвет ссылки

 

Ссылка в HTML выглядит следующим образом: 

<a href="http://www.web-lesson.ru" title="Ссылка HTML">Изменяем цвет ссылки</a> 

По умолчанию ее цвет синий и она будет иметь подчеркивание. 

Вы можете изменить ее цвет и убрать подчеркивание, просто добавив внутрь тега свойство style с соответствующими значениями. Вот так: 

<a href="http://www.web-lesson.ru" title="Ссылка HTML" style="color:#FF0000; text-decoration:none">Изменяем цвет ссылки</a>

 

Есть и другой способ изменить внешний вид ссылки. Для этих целей используются таблицы стилей CSS. Причем вы сможете задать значения для ссылок при различных условиях, будь-то активная ссылка (a:active), посещенная ссылка(a:visited) либо ссылка при наведении мыши (a:hover). Вот как это делается: 

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
}

  

Создайте два файла. 

Первый index.html с таким содержимым: 

<html>

<head>
<link rel="stylesheet" type="text/css" href="/style.css">
</head>

<body> 

<a href="http://www.web-lesson.ru" 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
} 

Изменяя значения свойств можно менять внешний вид ссылок.