Feliz ano novo para você!
Área Vip, os códigos mais inovadores
Leia as Regras do SP-Design
Publique no SPublicidade
Modifique o visual do seu fórum
Faça Pedidos Gráficos para seu fórum
Novo Administrador na comunidade
Jose Hamizaki
Designer Grafico
Mensagens : 1481 Reputação : 122
Status : Trabalhando
Inscrição : 05/04/2012 Localização : Barueri - SP
Cash : 2243
Status : Trabalhando
Inscrição : 05/04/2012 Localização : Barueri - SP
Cash : 2243 Dom 27 Jan 2013, 2:21 pm | |
a {
color: blue;
}
Um link pode ter diferentes estados. Por exemplo, pode ter sido visitado ou não visitado. Você usará pseudo-classes para estilizar links visitados e não visitados.- Código:
a:link {
color: blue;
}
a:visited {
color: red;
}
Use as pseudo-classes a:link e a:visited para estilizar links não visitados e visitados respectivamente. Links ativos são estilizados com a pseudo-classe a:active e a:hover, esta última é a pseudo-classe para links com o ponteiro do mouse sobre ele.
A seguir explicaremos com mais detalhes e exemplificação, as quatro pseudo-classes.
Pseudo-classe: link
A pseudo-classe :link é usada para links não visitados.
No exemplo a seguir links não vistados serão na cor verde.
- Código:
a:link {
color: green;
}
Exemplo
Pseudo-classe: visited
A pseudo-clases :visited é usada para links visitados. No exemplo a seguir links visitados serão na cor amarela:
- Código:
a:visited {
color: yellow;
}
Exemplo
Pseudo-classe: active
A pseudo-classe :active é usada para links ativos.
No exemplo a seguir links ativos terão seu fundo na cor vermelha:
- Código:
a:active {
background-color: red;
}
Exemplo
Pseudo-classe: hover
A pseudo-classe :hover é usada para quando o ponteiro do mouse está sobre o link.
Isto pode ser usado para conseguir efeitos bem interessantes. Por exemplo, podemos mudar a cor do link para laranja e o texto para itálico quando o ponteiro do mouse passa sobre ele, o código CSS para estes efeitos é o mostrado a seguir:
- Código:
a:hover {
color: orange;
font-style: italic;
}
Exemplo
Exemplo 1: Efeito quando o ponteiro está sobre o link
É comum a criação de efeitos diferentes quando o ponteiro está sobre o link. Veremos a seguir alguns exemplos extras de estilização da pseudo-classe :hover.
Exemplo 1a: Espaçamento entre as letras
Como você deve estar lembrado da lição 5, o espaçamento entre as letras de um texto pode ser controlado pela propriedade letter-spacing. Isto pode ser aplicado aos links para obter um efeito interessante:
- Código:
a:hover {
letter-spacing: 10px;
font-weight:bold;
color:red;
}
Exemplo 1b: UPPERCASE e lowercase
Na lição 5 vimos a propriedade text-transform, para estilizar com letras maiúsculas e minúsculas. Isto pode ser usado para estilizar links:
- Código:
a:hover {
text-transform: uppercase;
font-weight:bold;
color:blue;
background-color:yellow;
}
Exemplo
Os exemplos mostrados dão uma idéia das inúmeras possibilidades de combinação de diferentes propriedades. Você pode criar seus próprios efeitos — faça uma tentativa!
Exemplo 2: Removendo sublinhado dos links
Uma pergunta comum: Como remover o sublinhado dos links?
Você deve estudar com muito cuidado a necessidade de retirar o sublinhado dos links, pois isto poderá reduzir signifcativamente a usabilidade do website. As pessoas estão acostumadas com links na cor azul e sublinhados e sabem que ali há um texto a ser clicado. Até minha mãe sabe disto! Se você muda a cor e retira o sublinhado dos links, poderá confundir seus visitantes e em conseqüência não retirar o máximo dos conteúdos do seu website.
Feita esta ressalva, é muito fácil retirar o sublinhado dos links. Conforme explicado na lição 5, a propriedade text-decoration pode ser usada para definir se o texto é ou não sublinhado. Para remover o sublinhado, basta definir o valor none para a propriedade text-decoration.
- Código:
a {
text-decoration:none;
}
Alternativamante, você pode definir text-decoration juntamente com outras propriedades para as quatro pseudo-classes.
- Código:
a:link {
color: blue;
text-decoration:none;
}
a:visited {
color: purple;
text-decoration:none;
}
a:active {
background-color: yellow;
text-decoration:none;
}
a:hover {
color:red;
text-decoration:none;
}
Exemplo
Fonte: " target="_blank" rel="nofollow">http://pt-br.html.net/tutorials/css/lesson6.php">
![[F]lames](https://i.imgur.com/yiv4sag.jpg)
Destaque do Fórum
Muito Obrigado
