Ссылки CSS - httpdoc.ru

Стиль ссылок CSS

По умолчанию цвет ссылок синий, но в CSS вы можете изменить цвет ссылок.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Link Style </title> 
  <meta charset="UTF-8">
<style>
 a {
  color: green; 
 }
</style>
</head>

<body>
<p><b><a href="https://coderepublics.com" target="_blank">This is a link</a></b></p>
</body>
</html>

Выход

CSS Link Style

Это ссылка


Для ссылок можно использовать любое свойство CSS (например, цвет, семейство шрифтов, фон и т. Д.). Ссылки могут иметь разные стили в зависимости от того, в каком состоянии они находятся.

Некоторые состояния ссылок:

Типы Описание
ссылка Обычная, непосещенная ссылка
а: посетил Посещенная ссылка
а: парение Когда пользовательская мышь проходит над ним.
а: активный Момент перехода по ссылке.
Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Link Color Property </title> 
  <meta charset="UTF-8">
<style>
/* unvisited link */
a:link {
    color: purple;
}

/* visited link */
a:visited {
    color: green;
}

/* mouse over link */
a:hover {
    color: red;
}

/* selected link */
a:active {
    color: brown;
}
</style>
</head>
<body>

<p><b><a href="https://coderepublics.com" target="_blank">This is a link</a></b></p>
</body>
</html>

Выход

CSS Link Color Property

Это ссылка


Оформление текста ссылки

text-decoration Свойство используется для удаления подчеркивания из ссылок:

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Text Decoration </title> 
  <meta charset="UTF-8">
<style>
 a:link {
 text-decoration: none;
 }

 a:visited {
 text-decoration: none;
 }

 a:hover {
 text-decoration: underline;
 }

 a:active {
 text-decoration: underline;
 }
</style>
</head>
<body>

<p><b><a href="https://coderepublics.com" target="_blank">This is a link</a></b></p>

</body>
</html>

Выход

CSS Text Decoration

Это ссылка


Цвет фона ссылки

background-color Свойство используется для задания цвета фона для ссылок:

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Background Color </title> 
  <meta charset="UTF-8">
<style>
a.link {
    background-color: black;
}

a.visited {
    background-color: white;
}

a.hover {
    background-color: yellow;
}

a.active {
    background-color: gray;
} 
</style>
</head>
<body>

<p><b><a href="https://coderepublics.com" target="_blank">This is a link</a></b></p>

</body>
</html>

Выход

CSS Background Color

Это ссылка


Кнопки ссылок CSS

В этом примере мы объединяем несколько свойств CSS для отображения ссылок в виде полей / кнопок, посмотрите на это:

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Link Button </title> 
  <meta charset="UTF-8">
<style>
 a:link, a:visited {
  background-color: seagreen;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
 }

 a:hover, a:active {
  background-color: brown;
 }
</style>
</head>

<body>
<a href="https://coderepublics.com" target="_blank">This is a link</a>
</body>
</html>

Выход

CSS Link Button Это ссылка