82 lines
3.2 KiB
Markdown
82 lines
3.2 KiB
Markdown
|
---
|
|||
|
|
title: Styling Links
|
|||
|
|
localeTitle: Ссылки для стилизации
|
|||
|
|
---
|
|||
|
|
## Ссылки для стилизации
|
|||
|
|
|
|||
|
|
Ссылки могут быть созданы с любым свойством CSS, таким как `color` , `font-family` , `font-size` и `padding` . Вот простой пример:
|
|||
|
|
|
|||
|
|
```css
|
|||
|
|
a {
|
|||
|
|
color: hotpink;
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## Кроме того, ссылки могут быть оформлены по-разному в зависимости от того, в каком состоянии они находятся.
|
|||
|
|
|
|||
|
|
В ссылках также есть 4 состояния, и многие программисты создают разные состояния по-разному. Четыре государства:
|
|||
|
|
|
|||
|
|
* `a:link` : незатронутая, незакрепленная ссылка
|
|||
|
|
* `a:visited` : посещенная, кликнутая ссылка
|
|||
|
|
* `a:hover` : ссылка, когда мышь пользователя находится над ней
|
|||
|
|
* `a:active` : ссылка при нажатии
|
|||
|
|
|
|||
|
|
Свойство `<a href="">` отвечает за создание URL-адресов и может быть изменено с использованием нескольких свойств стилизации CSS, хотя по умолчанию у него несколько:
|
|||
|
|
|
|||
|
|
1. подчеркивание
|
|||
|
|
2. Синий цвет
|
|||
|
|
|
|||
|
|
Вы можете изменить их, добавив изменения свойств `color` и `text-decoration` .
|
|||
|
|
|
|||
|
|
```css
|
|||
|
|
color: black;
|
|||
|
|
text-decoration: none;
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Вы также можете создать ссылку на основе взаимодействия, используя эти свойства, также известные как состояния ссылок:
|
|||
|
|
|
|||
|
|
* a: link - нормальная, незаметная ссылка
|
|||
|
|
* a: visited - ссылка, которую пользователь посетил
|
|||
|
|
* a: hover - ссылка, когда пользователь мыши над ней
|
|||
|
|
* a: active - ссылка в момент ее нажатия
|
|||
|
|
|
|||
|
|
Вот пример CSS с использованием четырех состояний:
|
|||
|
|
|
|||
|
|
```css
|
|||
|
|
a:link { color: red; }
|
|||
|
|
a:visited { color: blue; }
|
|||
|
|
a:hover { color: green; }
|
|||
|
|
a:active { color: blue; }
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**Обратите внимание,** что существуют некоторые _правила упорядочения,_ когда вы устанавливаете стиль для состояний ссылок.
|
|||
|
|
|
|||
|
|
* `a:hover` ДОЛЖЕН прибыть после `a:link` и `a:visited`
|
|||
|
|
|
|||
|
|
* `a:active` ДОЛЖЕН прийти после `a:hover`
|
|||
|
|
|
|||
|
|
a: link - нормальная, незаметная ссылка a: visited - ссылка, которую пользователь посетил a: hover - ссылка, когда пользователь мыши над ней a: active - ссылка в момент ее нажатия
|
|||
|
|
|
|||
|
|
|
|||
|
|
```css
|
|||
|
|
/* unvisited link */
|
|||
|
|
a:link {
|
|||
|
|
color: red;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* visited link */
|
|||
|
|
a:visited {
|
|||
|
|
color: green;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* mouse over link */
|
|||
|
|
a:hover {
|
|||
|
|
color: hotpink;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* selected link */
|
|||
|
|
a:active {
|
|||
|
|
color: blue;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
```
|