Bem vindo ao PROJECT-HTML
Aprenda mais sobre:
HTML, CSS, JavaScript, webmaster, Imagens, banners, wallpapers, videos aula, windows, utilitários para site/blogs, Jogos, animes e muito mais.
Basta se registrar!



 
InícioProject HTMLGaleriaFAQRegistrar-seConectar-se
Buscar
 
 

Resultados por:
 
Rechercher Busca avançada
Conectar-se
Nome de usuário:
Senha:
Conexão automática: 
:: Esqueci minha senha
Votação
Qual seu navegador favorito?
 FireFox
 Chrome
 Internet Explorer
 safari
 Netscape
 Opera
 Avant
Exibir resultados
Quem está conectado
1 usuário online :: Nenhum usuário registrado, Nenhum Invisível e 1 Visitante

Nenhum

O recorde de usuários online foi de 36 em 3/4/2016, 3:36 am
Últimos assuntos
» TAG´s (comandos)
4/8/2014, 10:15 am por robson

» Comandos básico de HTML - body (corpo da home page)
16/7/2014, 10:10 am por robson

» Apresentações aqui
15/7/2014, 4:14 pm por robson

» Como colocar "posts recomendados" no sou blog sou site.
24/3/2014, 8:05 pm por Otome

» Arquivo de ajuda sobre PHP, help para iniciantes e experientes
24/3/2014, 8:03 pm por Otome

» Imagens Exercício-6
22/3/2014, 5:19 pm por SY64

» Alinhamento de imagens
22/3/2014, 4:43 pm por SY64

» Link´s Exercicios-5
22/3/2014, 12:43 pm por SY64

» Criar um site passo a passo
1/8/2013, 4:41 pm por marlonsouzajs


Compartilhe | 
 

 Links

Ver o tópico anterior Ver o tópico seguinte Ir em baixo 
AutorMensagem
Diego
Admin
Admin
avatar

Masculino
Número de Mensagens : 321
Idade : 26
Localização : Aqui no PROJECT-HTML
Pontos : 5530
Reputação : 24
Data de inscrição : 04/07/2008

MensagemAssunto: Links   9/1/2009, 8:16 am

Você pode aplicar aos links tudo que aprendeu nas lições anteriores (i.e. mudar cores, fontes, sublinhados, etc). A novidade aqui é que você pode definir as propriedades de maneira diferenciada de acordo com o estado do link ou seja visitado, não visitado, ativo ou com o ponteiro do mouse sobre o link. Isto possibilita adicionar interessantes efeitos ao seu website. Para estilizar estes efeitos você usará as chamadas pseudo-classes.

Que é pseudo-classe?
Uma pseudo-classe permite estilizar levando em conta condições diferentes ou eventos ao definir uma propriedade de estilo para uma tag HTML.

Vamos ver um exemplo. Como você já sabe, links são marcados no HTML com tags <a>. Podemos então usar a como um seletor CSS:


Citação :
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.

Citação :
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.

Citação :
a:link {
color: green;
}

Pseudo-classe: active
A pseudo-classe :active é usada para links ativos.

No exemplo a seguir links ativos terão seu fundo na cor vermelha:


Citação :
a:active {
background-color: red;
}

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:


Citação :
a:hover {
color: orange;
font-style: italic;
}

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 passada, 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:

Citação :
a:hover {
letter-spacing: 10px;
font-weight:bold;
color:red;
}

Exemplo 1b: UPPERCASE e lowercase
Na lição passada vimos a propriedade text-transform, para estilizar com letras maiúsculas e minúsculas. Isto pode ser usado para estilizar links:


Citação :
a:hover {
text-transform: uppercase;
font-weight:bold;
color:blue;
background-color:yellow;
}

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 passada, 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.

Citação :
a {
text-decoration:none;

}

Alternativamante, você pode definir text-decoration juntamente com outras propriedades para as quatro pseudo-classes.


Citação :
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;
}

_________________
Quem pode faz, não copia!
[Você precisa estar registrado e conectado para ver esta imagem.]
s2 Diego e Barbara s2
Informações do meu PC:
Processador:Intel Core i5 760 @ 2.80GHz 8Mb cache
Placa mãe: ASUSTeK Computer INC. P7P55D-Deluxe
Memoria Ram: 4.0GB Único -Channel DDR3 @ 668MHz * 2 = 1333Mhz (9-9-9-24)
Placa de video: 512 MB GeForce 8400 GS (XFX Pine Group)
HD: 160GB SAMSUNG SAMSUNG HD161HJ (SATA)
Audio: SoundMAX Integrated Digital Audio
Sistema operativo: MS Windows 7 Ultimate 64-bit
Voltar ao Topo Ir em baixo
Ver perfil do usuário http://www.projecthtml.tk
 
Links
Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo 
Página 1 de 1
 Tópicos similares
-
» Permissão de postar links
» Mudar a cor de apenas alguns links do menu de navegação
» Como remover esses links do menu
» Bloqueio de links para os visitantes
» Links ocultos visualizados no Portal.

Permissão deste fórum:Você não pode responder aos tópicos neste fórum
 :: CSS - (Cascading Style Sheets) :: CSS - Basico-
Ir para: