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

2. 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.

3. 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

4. Estilização de Cabeçalhos - CSS
 Adicionando o sublinhado quando passar o mouse: no arquivo
estilo19e20.css
 Adicionamos algumas propriedades (efeito “holover”)

5. Estilização de Cabeçalhos - CSS
 Espaçamento entre conteúdo e borda
 Adicionando cor de fundo

6. Estilização de Cabeçalhos - CSS
 Agora o efeito “holover”: Quando passar o mouse alterar a cor de fundo
e a cor do texto.

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

8. 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)

9. 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.

10. Próxima Aula: Estilização de Listas