Planeta Tutorial
Planeta Tutorial

Ola Visitante, Seja bem vindo(a) ao Planeta Tutorial, esta-mos em construção em breve estaremos prontos para lhe atender e fornecer-lhe tutoriais e dicas diversas para você aprimorar os seus conhecimentos e passar para outros. esperamos que você goste de nosso conteudo e se torne um Membro para poder participar ainda mais de nossas atividades. Vale também ressaltar que, Para você ter acesso aos links por ai , é necessário ser registrado, então se registre .
Se já tem uma conta no forúm,
Logue-se .
Painel de Usuario
Convidado
Mensagens: 0


Alterar
Ver
Tópicos e mensagens
Menu
Redes Sociais
Buscar
 
 

Resultados por:
 


Rechercher Busca avançada

Translate
Últimos assuntos
» Regras da Área de pedidos
Ter 28 Jun 2011 - 17:31 por Admin

» Efeito Glow
Seg 27 Jun 2011 - 17:39 por Admin

» Efeito Brilho Suave nas fotos
Seg 27 Jun 2011 - 17:33 por Admin

» Arte geométrica com Photoshop
Seg 27 Jun 2011 - 17:31 por Admin

» Efeito Varinha Mágica no Photoshop
Sab 25 Jun 2011 - 15:20 por konan

» Montagem multicolorida com tintas e efeitos diversos
Sab 25 Jun 2011 - 15:18 por konan

» Linhas luminescentes no Photoshop
Sab 25 Jun 2011 - 15:17 por konan

» Segredos sobre design de site
Sex 24 Jun 2011 - 23:00 por konan

» Hardware para iniciantes, parte 5
Sex 24 Jun 2011 - 22:41 por konan

Estatísticas
Temos 26 usuários registrados
O último usuário registrado atende pelo nome de kaironborges

Os nossos membros postaram um total de 144 mensagens em 142 assuntos
Radio Jovem Pan
Relogio
Julho 2018
SegTerQuaQuiSexSabDom
      1
2345678
9101112131415
16171819202122
23242526272829
3031     

Calendário Calendário

Visitou

CSS links

Ir em baixo

Tutoriais CSS links

Mensagem por luan em Qui 16 Jun 2011 - 11:51

CSS possibilita definir uma variedade infinita de layouts e efeitos para um link ou um conjunto de links.
O limite é a sua imaginação!
Um link
visitado, não visitado, ativo ou no estado hover (quando você passa o
mouse sobre ele) pode assumir aspectos (cores, fundos, etc…) diferentes
através de CSS.
Abordarei neste tutorial as técnicas básicas de manipular os quatro seletores de link.
Pseudo classes
Os efeitos em links são possíveis através de declarações de regras de estilo para as pseudo classes do elemento do HTML.
As pseudo classes são usadas em CSS, para adicionar efeitos diferentes a alguns seletores, ou a uma instância de alguns seletores.
Sintaxe
A sintaxe das pseudo classes:
seletor:pseudo classe {propriedade: valor}
As classes em CSS podem também ser usadas com pseudo classes.
Esta regra permite que você defina diferentes efeitos para
links localizados em diferentes lugares em uma mesma página. No último
item deste tutorial “Diferentes estilos de links em uma mesma página web” veremos este efeito.
seletor.class:pseudo-class {propriedade: valor}
Os “seletores:pseudo classe” de links
São quatro as pseudo classes dos links:

  1. a:link……..define o estilo do link no estado inicial;
  2. a:visited…define o estilo do link visitado;
  3. a:hover…..define o estilo do link quando passa-se o mouse sobre ele;
  4. a:active….define o estilo do link ativo (o que foi “clicado”).



Vamos a seguir analisar cada um deles detalhadamente através de exemplos práticos.
Como estudar e entender os exemplos
Para cada seletor apresento as regras CSS definidas dentro de uma folha de estilos incorporada, e a seguir os efeitos em um link, onde se aplicam as regras.
Observe a regra e o efeito e para melhor fixar seu aprendizado
reproduza o código no seu editor, mude os valores e veja o resultado no
browser. Esta é a melhor e mais rápida maneira de você aprender CSS. Bons estudos! E faça ótimo proveito dos tutoriais.
Grande flexibilidade
É perfeitamente possível com CSS definir-se um estilo diferente para cada um dos quatro seletores, de forma semelhante como é definido para qualquer texto HTML.
[Você precisa estar
registrado e conectado para ver este link.] nas declarações para links
É importante a ordem de definição das regras para os estados dos
links. Lembre-se de que pelo “efeito cascata”, as regras mais próximas
do elemento prevalecem sobre as mais distantes. Assim, por exemplo: se
voce define a: hover ANTES de a: visited, esta prevalecerá sobre a: hover e em consequência: O link visitado pela primeira vez assumirá a regra definida em a: visited e a partir de então a: hover não mais funcionará naquele link pois a: visited prevalecerá sobre a: hover.
Qual é a ordem normal é lógica das declarações? É simples concluir ! Senão vejamos:


1.) a: link é o estado inicial dos links;
a:link deverá ser a primeira declaração;
2.) a: active deverá acontecer mesmo
em links já visitados;
a: active deverá ser declarado depois
de a:visited;
1.) a: hover não precisa funcionar em a:active;
a:active pode ser declarado depois de a:hover.


Em consequência a ordem das declarações deve ser:
a:link
a:visited
a:hover
a:active

Exemplos de efeitos em links
A seguir exemplos dos efeitos mais comuns e simples aplicando CSS aos seletores de links

1-) Removendo o sublinhado do link
Típicamente, por default os links são sublinhados e na cor azul.
Um efeito muito comum em páginas web é o de se retirar o sublinhado
do link normal, mudar a cor e fazer “aparecer” o sublinhado, quando o
mouse é passado sobre ele.
Esse efeito obtém-se facilmente com CSS. Abaixo a regra para esse simples efeito:



2-) Adicionando sublinhado e sobrelinhado
Este efeito semelhante ao anterior, consiste em um sobrelinhado adicional no link hover.
Abaixo a regra para esse efeito:



3-) Acrescentando um fundo
Este efeito simulando um “rollover” simples, consiste em acrescentar uma cor de fundo no link hover.
Abaixo a regra para esse efeito:



4-) Link com um fundo de uma cor que muda no link hover
Este efeito também simula um “rollover” simples, consiste em mudar a cor de fundo no link hover.
Abaixo a regra para esse efeito:



5-) Link que muda o tamanho da letra no link hover
Neste efeito há uma mudança no tamanho da letra (em geral para maior) no link hover.
Abaixo a regra para esse efeito:



Diferentes estilos de links em uma mesma página web
É possível definir diferentes estilos para os 4 seletores de links para serem usados em uma mesma página.
Isso consegue-se utilizando os seletores de contexto que consiste em adicionar uma classe aos seletores.
Assim cada conjunto dos 4 seletores de uma classe assumem o
comportamento daquela classe e você pode definir quantas classes quiser.
Por exemplo:






ESTE É O LINK DA classe1


ESTE É O LINK DA classe2
avatar
luan
Newbie
Newbie

Respeito às regras : Respeito as regras 100%

Mensagens : 18
Reputação : 0
Data de inscrição : 14/06/2011
Idade : 23

Voltar ao Topo Ir em baixo

Voltar ao Topo


 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum