2.2 KiB
title | localeTitle |
---|---|
Styling Links | Links de estilo |
Links de estilo
Os links podem ser estilizados com qualquer propriedade CSS, como color
, font-family
font-size
e padding
. Aqui está um exemplo fácil:
a {
color: hotpink;
}
Além disso, os links podem ter um estilo diferente, dependendo do estado em que estão.
Os links também têm 4 estados e muitos programadores definem cada estado de maneira diferente. Os quatro estados são:
a:link
: uma:link
não visitado e não clicadoa:visited
: um link clicado visitadoa:hover
: um link quando o mouse do usuário está sobre elea:active
: um link quando é clicado
A propriedade <a href="">
é responsável por criar URLs e pode ser modificada usando várias propriedades de estilo CSS, embora tenha algumas delas por padrão:
- Sublinhado
- Cor azul
Você pode alterá-los adicionando as propriedades de color
e text-decoration
.
color: black;
text-decoration: none;
Você também pode estilizar o link com base na interação usando essas propriedades, também conhecidas como estados de link:
- a: link - um link normal não visitado
- a: visitado - um link que o usuário visitou
- a: hover - um link quando o usuário passa o mouse sobre ele
- a: ativo - um link no momento em que é clicado
Aqui está um exemplo de CSS usando os 4 estados:
a:link { color: red; }
a:visited { color: blue; }
a:hover { color: green; }
a:active { color: blue; }
Observe que existem algumas regras de ordenação para quando você está definindo o estilo para estados de link.
-
a:hover
deve vir depois dea:link
ea:visited
-
a:active
deve vir depois dea:hover
a: link - um link normal não visitado a: visitado - um link que o usuário visitou a: hover - um link quando o usuário passa o mouse sobre ele a: ativo - um link no momento em que é clicado
/* 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;
}