Hello, there! Quando você está programando uma página web e definindo o estilo dos elementos através do CSS, um dos elementos mais importantes e que mais se repetem é o dos links clicáveis, que vão redirecionar o usuário para outras páginas.
Existem algumas propriedades que são comuns de serem usadas para estilizar esses links, como, por exemplo, a cor deles. So let's take a look at some of these properties?
Aprenda as propriedades de links em CSS
Os 4 estados de um link
Antes de mais nada, você deve se lembrar que um link pode aparecer em 4 estados diferentes em uma página:
- a:link - um link normal, ainda não visitado
- a:visited - um link que o usuário já visitou
- a:hover - um link quando o usuário passa o mouse em cima (lembre-se que o verbo hover significa pairar sobre alguma coisa)
- a:active - um link no momento em que ele é clicado
A partir disso, você pode definir exatamente qual será o estilo de cada um desses estados. Você pode definir, por exemplo, que um link não visitado tenha a cor azul, enquanto que um já visitado tenha a cor vermelha.
Voê pode estilizar um link usando qualquer propriedade de CSS relacionada a texto, mas as 4 propriedades mais comuns de serem usadas são color, font-family, text-decoration e background-color.
Color
A propriedade color define a cor do texto de um link. Você pode definir essa cor a partir de um código hexadecimal (como #008000, para verde) ou com o nome da cor em inglês (como "green", também para verde). For example:
a.visited {
color: green;
}
Nesse exemplo, todos os links que já foram visitados pelo usuário terão a cor verde.
Font-family
Além da cor, você também pode definir a fonte usada para o seu link. Para isso, você deve usar a propriedade font-family, e definir o nome da família de fontes que você quer que seja usada. This way:
a.visited {
font-family: Arial;
color: green;
}
Nesse caso, além da cor verde, todos os links já visitados aparecerão escritos com a fonte Arial.
Text-decoration
Já a propriedade text-decoration é utilizada para remover o sublinhado dos links. Você pode definir dois valores possíveis: underline, caso você queira que o link tenha um sublinhado, ou none, caso você prefira que o texto do link apareça sem nenhum sublinhado. Like this:
a:link {
text-decoration: none;
}
Background-color
Por último, você também pode definir a background color, ou seja, cor de fundo, do link. Nesse caso, o texto aparecerá escrito dentro de um retângulo da cor especificada, que, novamente, pode ser escrita em código hexadecimal ou por extenso em inglês. For example:
a:hover {
background-color: lightgreen;
}
Nesse exemplo, o link terá um fundo verde claro todas as vezes que o usuário passar o mouse sobre ele.
Very interesting, don't you think? Can you try to define the properties used on the links on this page? (Muito interessante, não acha? Você consegue definir as propriedades usadas nos links desta página?)
Continue estudando com a gente no nosso artigo "O que é YAGNI em desenvolvimento de software?". See you!