Upload
jolvani-morgan
View
34
Download
2
Embed Size (px)
Citation preview
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