Aula 19 e 20. estilização de links

Estilização de LinksCSS - Style Sheet

Professor: Jolvani

Aula 19 e 20

Estilização de Cabeçalhos - CSS Nesta aula utilizaremos pseudo classes, estudadas

anteriormente. Os efeitos em links são realizados declarando as regras de

estilos nas pseudo classes da tag <a> Quatro pseudo classes (revisando)

a:link – estiliza o link em seu estado inicial a:visited – estiliza um link que já foi visitado a:hover – estiliza o link no momento em que é passado o mouse

por ele a:active – estiliza o link quando o usuário está clicando sobre ele

Exemplo: estilizando os link, removendo o sublinhado original para fazê-lo aparecer quando passado o mouse sobre ele.

Estilização de Cabeçalhos - CSS Exemplo: estilizando os link, removendo o sublinhado original

para fazê-lo aparecer quando passado o mouse sobre ele.

Removendo o sublinhado: no arquivo estilo19e20.css

Estado normal

Estilização de Cabeçalhos - CSS Adicionando o sublinhado quando passar o mouse: no arquivo

estilo19e20.css

Adicionamos algumas propriedades (efeito “holover”)

Estilização de Cabeçalhos - CSS Espaçamento entre conteúdo e borda

Adicionando cor de fundo

Estilização de Cabeçalhos - CSS Agora o efeito “holover”: Quando passar o mouse alterar a cor

de fundo e a cor do texto.

Estilização de Cabeçalhos - CSS Criando novo efeito. Primeiro voltamos para estilização padrão,

removendo os atributos da tag “a” no arquivo estilo19e20.css Estilizando os links externos que possuem os atributos

[href^=“http:”]

Link para email: (iniciando com “mailto:”)

Estilização de Cabeçalhos - CSS Criando novo efeito. Primeiro voltamos para estilização padrão,

removendo os atributos da tag “a” no arquivo estilo19e20.css Representar um documento. (terminando com zip)

Estilização de Cabeçalhos - CSS Criando novo efeito. Primeiro voltamos para estilização padrão,

removendo os atributos da tag “a” no arquivo estilo19e20.css Temos ainda uma imagem linkada, no IE ela aparece com a borda

Estilizamos para remover a borda

Aplicar para todos os links.

Próxima Aula: Estilização de Listas