Um link é uma conexão de uma página da web para outra, e o CSS pode estilizar links de várias maneiras por meio de diferentes atributos.
1. Estilo do link
Os links são uma parte importante de um site. Você pode ver muitos links em quase todas as páginas da web. Os links têm quatro estados diferentes, nomeadamente link, visitado, ativo e pairar. Você pode definir estilos diferentes para os quatro estados do link por meio dos seguintes seletores de pseudoclasse:
(1) a: link => Este é um link normal e não visitado.
(2) a: visitado => Este é um link que o usuário visitou pelo menos uma vez
(3) a:hover => quando o mouse passa sobre ele, é um link
(4) a: ativo => Este é um link que acabou de ser clicado.
gramática:
a:link{cor:color_name;}color_name pode estar em qualquer formato, como um nome de cor (verde), um valor hexadecimal (#5570f0) ou um valor RGB - rgb(25, 255, 2). Existe outro estado "a:focus" que é usado para focar quando o usuário usa a tecla tab para navegar em um link.
Valor padrão para link:
(1) Por padrão, os links criados estão sublinhados.
(2) Quando o mouse passa sobre o link, ele muda para um ícone de mão.
(3) Links normais/não visitados são azuis.
(4) Os links visitados são coloridos em roxo.
(5 ) Os links ativos são vermelhos.
(6) Quando um link está em foco, ele possui um contorno ao seu redor.
Por exemplo:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>Links CSS</title><style>p{font-size:25px;text-align:center;}</style></head ><body><p><ahref=https://www.dotcpp.com/>Link simples</a></p></body></html>Os resultados exibidos são os seguintes:
2. Como definir o estilo do link com CSS?
Aqui estão algumas propriedades CSS básicas para links:
(1) atributo de cor
Esta propriedade CSS é usada para alterar a cor do texto do link.
gramática:
a{cor:nome_da_cor;}(2) atributo font-family
Esta propriedade é usada para alterar o tipo de fonte do link usando a propriedade font-family.
gramática:
a{família da fonte:nome da família;}(3) atributo de decoração de texto
Este atributo é usado principalmente para remover ou adicionar sublinhados e outras modificações em links.
gramática:
a{decoração de texto:none;}Exemplo:
<style>/*Defina o tamanho da fonte para melhorar a visibilidade*/p{font-size:2rem;}/*Remova sublinhados usando o atributo text-decoration*/a{text-decoration:none;}/*Você também pode usar os seguintes estilos, adicione sublinhado text-decoration:underline;*/</style>(4) atributo de cor de fundo
Esta propriedade é usada para definir a cor de fundo do link.
gramática:
a{cor de fundo:color_name;}