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?
Antes de mais nada, você deve se lembrar que um link pode aparecer em 4 estados diferentes em uma página:
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.
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.
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.
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;
}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!
Aproveite e faça nosso teste de nível de inglês. Ou baixe nossa apostila que te ensina como aprender inglês de maneira eficiente!
Quer realmente aprender outras línguas, como inglês e espanhol? Conheça os nossos cursos que reforçam o aprendizado de inglês e espanhol.