10
Estilização de Links CSS - Style Sheet Professor: Jolvani Aula 19 e 20

Aula 19 e 20. estilização de links

Embed Size (px)

Citation preview

Page 1: Aula 19 e 20. estilização de links

Estilização de LinksCSS - Style Sheet

Professor: Jolvani

Aula 19 e 20

Page 2: Aula 19 e 20. estilização de links

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.

Page 3: Aula 19 e 20. estilização de links

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

Page 4: Aula 19 e 20. estilização de links

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

estilo19e20.css

Adicionamos algumas propriedades (efeito “holover”)

Page 5: Aula 19 e 20. estilização de links

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

Adicionando cor de fundo

Page 6: Aula 19 e 20. estilização de links

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

de fundo e a cor do texto.

Page 7: Aula 19 e 20. estilização de links

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:”)

Page 8: Aula 19 e 20. estilização de links

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)

Page 9: Aula 19 e 20. estilização de links

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.

Page 10: Aula 19 e 20. estilização de links

Próxima Aula: Estilização de Listas