Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1505942175
Vida do cache: 1505985375
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Hospedagem - 728 x 90

Aprendendo CSS e HTML

Conhecendo a Propriedade CSS Link

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! 😉



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

10 Comentários

  1. Rodrigo Forte disse:

    Olá Clau, desde que vi seu blog pela primeira vez virei fã na hora.Muito informativo e bem organizado principalmente.Quisera o meu fosse tão bom assim,enfim.Eu gostaria que você me desse uma dica de como mudar a fonte no título do blog, já que no meu caso a template é de terceiros e não oferece o recurso da mudança.E por isso o título aparece com uma fonte que não gosto e muito pequena também.Desde já agradeço.

  2. .:: Clau ::. disse:

    Luis Fernando
    Já tem tutorial publicado.
    No meu menu "Tutoriais Blogger", procura pelo tutorial:
    Efeito Tooltip nos links do blog".

  3. TecnoNerd disse:

    Boa tarde Clau,

    Antes de tudo parabéns pelo ótimo blog. Achei um elemento nele que não encontrei nos tutoriais, ou pode ter passado desapercebido, então como não custa perguntar…

    Como você personalizou o background do elemento "title" dos links? Achei algo mega interessante, porém não consegui reproduzir o feito.

    Desde já grato,
    Luis Fernando

  4. .:: Clau ::. disse:

    ???????
    Isso mesmo!
    É só sempre tentar se lembrar da regrinha – Tudo que contiver:
    a , a: a:visited, a:hover
    se refere ao link.
    P.s: Menino que nome complicado esse teu heim?rs

  5. ??????? disse:

    Clau, e se eu quiser mudar o CSS de um determinado Link em um menu, por exemplo.

    #naviation li a{
    ———–css————-
    }

    #navigation li a:Home{
    ————-outro css———–
    }

    Seria assim ?

  6. .:: Clau ::. disse:

    Rickzinhocps
    comandoblogger

    que bom que gostaram, obrigada pelo comentário. Voltem sempre viu?

    NANDUS
    Reitero o q JCMais falou acima, já tem tutorial publicado sobre isso, procure pelo tutorial "efeito tooltip nos links"

    JCMais
    No Blogger não tem, mas vc pode usar o próprio blockquote, inclusive pode criar, por exemplo: "blockquote1, blockquote2 e assim por diante..neste caso vc pode aplicar estilos com cores diferentes para cada um q vc criar.
    Por exemplo, blockquote1 ter um fundo verde, o blockquote2 ter um fundo azul e por ai…
    Obrigada pelo comentário. Volte sempre!

  7. JCMais disse:

    NANDUS, ela já ensinou isso tudo aqui no blog, basta só você procurar. ;D
    Clau, parabéns pelo ótimo serviço que você tá prestando, sempre tive uma dúvida, no blogger não tem nenhum plugin para colocar a caixa de código colorizada, de acordo com o código, automaticamente, estilo as do WP?

  8. NANDUS disse:

    Seu Blog é MUITO bom. estou conseguindo fazer meu site com sua ajuda, Mas tenho uma Dúvida!
    como vc coloca bordas arredondadas nos links?

    Ex: quando passo o mouse sobre os icones de redes sociais do seu blog aparece aquela legenda estilizada.
    Se puder compartilhar como fazer, fico grato!!!

    Boa Sorte e Sucesso

  9. comandoblogger disse:

    Esta sua seguencia de artigos sobre CSS e "HTML" esta me ajudando muito, e creio que não só a mim mais a varias pessoas!

    Parabéns Clau.

    Att.
    @JamisHenri

  10. Rickzinhocps disse:

    Belissimo tutorial clau,conseguiu mais uma vez, meus parabéns … Sempre visito o mundo blogger e vejo que a cada postagem seu blog está melhor ! Ajudou muito.

Desculpe, os comentários deste artigo estão desativados.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.