• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn

Dando prosseguimento à série Aprendendo CSS e HTML, neste artigo iremos tratar sobre a Propriedade Link e suas pseudo-classes.
Entendendo melhor esta propriedade CSS Link você conseguirá criar regras CSS aplicáveis aos links no seu template.

Quando vamos aplicar estilos aos links do blog você pode definir os estilos de maneira diferenciada, aplicando efeitos diferentes às pseudo-classes.

Para melhor compreensão, vejamos o que é Pseudo-Classes:

Pseudo-Classes

Uma pseudo-classe permite aplicar condições diferentes definindo uma propriedade de estilo para cada estado.
Neste caso, a pseudo-classe define as propriedades de uma maneira diferenciada, definindo um estilo de acordo com o estado do link.
Conhecendo as pseudo-classes:
? a:link
? a:visited
? a:hover
? a:active

Usando as pseudo-classes você pode aplicar estilos diferentes ao links não visitados, aos links visitados, links ativos e aos links no estado hover (quando passa-se o mouse em cima).

Pseudo-classe a:link

Corresponde ao link quando não visitado. É a forma que o link se apresenta quando o leitor carrega a página. É a primeira regra que você deve aplicar.
É importante criar uma regra CSS para a pseudo-classe a:link, para que o navegador do usuário reconheça o estilo que você aplicou a seus links da página.
Vejamos um exemplo:

a:link {
color: #000000;
}

Neste exemplo, os links não visitados se apresentarão ao usuário na cor preta.

Pseudo-classe a:visited

Corresponde ao link que já foi visitado pelo usuário.
Você já deve ter notado em alguns blogs que quando você visita uma certa página clicando no link que aponta para ela, o link inicial é de uma cor “X”.
Quando você volta à página inicial, aquele link que você já clicou anteriormente, aparece com outra cor diferente.
Isto ocorre porque o usuário(dono do blog) determinou aspectos diferentes aos links depois que já foram visitados(clicados).
Vejamos um exemplo:

a:link {
color: #000000;
}
a:visited { color: #CCCCCC; }

Neste exemplo, os links não visitados se apresentarão ao usuário na cor preta e os que já foram visitados se apresentam com uma cor diferente.

Se você não pretende que os links já visitados tenham aspectos diferentes dos não visitados, basta aplicar os mesmos estilos as duas pseudo-classes (a:link e a:visited)

Em geral, na maioria dos templates padrões do Blogger, os links não visitados e os já visitados se apresentam com efeito sublinhado.
Isto ocorre quando não há regra CSS definida para aplicação de estilos com efeito de decoração dos links. Não havendo regras aplicadas, é aplicada uma estilização “default” (= padrão/sem estilo) aos links não visitados e aos já visitados, que aparecem sublinhados.
E se você quiser retirar esse sublinhado dos links, é só aplicar a propriedade “Text-decoration” atribuindo a ela o valor “none”.

Desta forma a declaração “text-decoration: none” retira o efeito sublinhado na pseudo-classe do link.

 

Pseudo-classe a:hover

Corresponde ao aspecto que o link se apresenta quando o usuário passa o mouse sobre o link.
Nesta pseudo-classe você pode aplicar efeitos diferentes, desta forma os links no estado “hover” assumirão aspectos diferenciados das demais pseudo-classes dos links.
Vejamos um exemplo:

a:link {
color: #000000;
}
a:visited {
color: #CCCCCC;
}
a:hover {
color: #FFFFFF;
} 

Você pode definir, por exemplo, que os links no estado “hover” sejam sublinhados, basta aplicar a propriedade “text-decoration” atribuindo a ela o valor que você deseja.

Como você já viu no artigo anterior desta série que trata sobre a propriedade CSS “Text”, o efeito text-decoration admite vários valores:

 text-decoration: underline; -> sublinhado 
text-decoration: line-through; -> linha em cima 
text-decoration: overline; -> sobrelinhado 
text-decoration: none; -> sem decoração ou efeito 

 

Pseudo-classe a:active

Corresponde ao aspecto que o link se apresenta quando ativo.
É aquele que acabou de ser clicado pelo usuário.
Geralmente essa pseudo-classe é utilizada para aplicarmos estilo diferenciado em links de menus.
Você pode definir uma regra CSS para ser aplicada ao link ativo no menu.
Por exemplo: quando o usuário clicou no link “home” de determinado menu, o link está ativo, ou seja, a página que o usuário se encontra naquele momento veio redirecionada do link que ele clicou.
Você pode definir que o link ativo tenha uma cor de fundo, ou que a cor deste link seja diferente das cores dos demais links.

Vejamos o exemplo:

a:active {
background-color: #DEDEDE;  /*cor do fundo*/
color:#FCFCFC; /*cor do link*/
}

As pseudo-classes Links no Blogger:

Nos templates padrões do Blogger, as pseudo-classes dos links, estão definidas em Variable Definitions.
Isto é para facilitar a alteração das cores dos links, através do painel no modo “avançado” da aba “design“.
As pseudo-classes dos links, nos templates padrões geralmente são estas:

 a:link { text-decoration:none; color: $linkcolor; }
a:visited {
text-decoration:none;
color: $linkvisitedcolor;
}

a:hover {
text-decoration:underline;
color: $linkhovercolor;
}

Nos novos templates Designer de Modelo as pseudo-classes dos links são:

 a:link { text-decoration:none; color: $(link.color); }
a:visited {
text-decoration:none;
color: $(link.visited.color);
}

a:hover {
text-decoration:underline;
color: $(link.hover.color);
}

Notem que em ambos os casos, as cores que deverão ser aplicadas aos links estão definidas em Variable definitions.
Que nos templates padrões é:

 <Variable name="linkcolor" description="Link Color" type="color" default="#896636"> <Variable name="visitedlinkcolor" description="Visited Link Color" type="color" default="#896636"> 

Já nos Designer de Modelo é:

 <variable name="link.color" description="Link Color" type="color" default="#2288bb" value="#2288bb"> <variable name="link.visited.color" description="Visited Color" type="color" default="#888888" value="#888888"> <variable name="link.hover.color" description="Hover Color" type="color" default="#33aaff" value="#33aaff"> 

Todos os valores de cores dos links da página estão estabelecidos em Variable Definitions, e você poderá alterar os estilos, como cores, fontes e efeitos, de 2 formas:
1) Diretamente pelo painel , no menu “modelo“, clicando na opção “personalizar“.
2) Determinando o valor da propriedade diretamente no CSS.

Exemplificando para um melhor entendimento:
Os links das páginas no estado hover a cor definida é:

 <variable name="link.hover.color" description="Hover Color" type="color" default="#33aaff" value="#33aaff"> 

Digamos que que queira alterar essa cor para o valor #000000

 <variable name="link.hover.color" description="Hover Color" type="color" default="#000000" value="#000000"> 

Digamos que eu prefira aplicar uma cor para os links no estado hover diretamente no CSS.
O código está assim:

 a:hover { text-decoration:underline; color: $(link.hover.color); } 

Então eu substituo color: $(link.hover.color);
por:
color:#000000;

No artigo anterior vimos a propriedade “text-transform” que usamos para estilizar os textos. Esta propriedade também pode ser aplicada nos links.
Você também pode aplicar a propriedade text-shadow aos links.
Lembrando que esta propriedade permite aplicação de sombras no texto, mas só é visível em alguns navegadores. Sobre esta propriedade, leia Efeito Sombra nos Textos.

? Efeito cascata:
É muito importante que ao definir regras CSS aplicáveis nas pseudo classes para links, você utilize uma sequência correta para evitar que alguma dela acabe não funcionando corretamente.
A sequência correta é:

a:link
a:visited
a:hover
a:active

Isso porque todas as regras que forem descritas primeiro, terão precedência sobre as posteriores.
Exemplificando:
Se você definir 1º os estilos para a pseudo-classe a:hover e somente no final definir a pseudo-classe a:link, pode ocorrer que o estilos aplicados aos links no estado hover sejam também aplicados aos links não visitados, mesmo que você tenha definido e especificados no código estilos diferentes para eles.
Isto ocorre porque o navegador irá interpretar a sequência de estilos exatamente na ordem da lista definida por você no CSS.

 

pseudo-elementos:

Assim como qualquer outro seletor, os links podem ser combinados com outros elementos, ou seja, podemos aplicar estilos a pseudo-elementos.
Você pode definir uma regra CSS para adicionar efeitos aos links de determinado seletor. Desta forma você pode definir diferentes efeitos para pseudo-elementos em seletores diferentes.
Só para relembrar: seletor é o elemento que você aplica determinada propriedade, por exemplo:

#sidebar-wrapper{
background-color:#FFFFFF;
}
No exemplo acima, Sidebar-wrapper é um seletor ,background-color é uma propriedade e #FFFFFF é um valor.

Veja exemplo de aplicação de estilos a pseudo-classes links a determinados seletores:

 .sidebar a:link, .sidebar a:visited{ color:#000; } .sidebar a:hover{ color: #ddd; }

No exemplo acima, a:link, a:visited e a:hover são as pseudo-classes dos links e
.sidebar é o seletor.
No meu exemplo, eu determinei que todos os links ativos e visitados contidos na sidebar deverão se apresentar na cor preta, e os links no estado hover (também contidos na sidebar) deverão se apresentar na cor cinza.

Lembrando que você pode definir não somente cores diferentes, mas pode também definir vários efeitos em seus links juntamente com outras propriedades para as quatro pseudo-classes, as mesmas ultilizadas para os textos, como:
? text-ident
? text-align
? text-decoration
? text-transform
? letter-spacing

Viu só? Agora você já aprendeu sobre as pseudo-classes dos links e viu como usar algumas propriedades, desta forma facilitará muito mais na personalização dos links no seu template.
Até a próxima! 😉

• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn