Sei sulla pagina 1di 10

Estilizao de Links

CSS - Style Sheet


Professor: Jolvani
Aula 19 e 20

Estilizao de Cabealhos - CSS

Nesta aula utilizaremos pseudo classes, estudadas anteriormente.

Os efeitos em links so 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 usurio est clicando sobre ele

Exemplo: estilizando os link, removendo o sublinhado original para fazlo aparecer quando passado o mouse sobre ele.

Estilizao de Cabealhos - CSS

Exemplo: estilizando os link, removendo o sublinhado original para fazlo aparecer quando passado o mouse sobre ele.

Estado normal

Removendo o sublinhado: no arquivo estilo19e20.css

Estilizao de Cabealhos - CSS

Adicionando o sublinhado quando passar o mouse: no arquivo


estilo19e20.css

Adicionamos algumas propriedades (efeito holover)

Estilizao de Cabealhos - CSS

Espaamento entre contedo e borda

Adicionando cor de fundo

Estilizao de Cabealhos - CSS

Agora o efeito holover: Quando passar o mouse alterar a cor de fundo


e a cor do texto.

Estilizao de Cabealhos - CSS

Criando novo efeito. Primeiro voltamos para estilizao padro,


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

Estilizao de Cabealhos - CSS

Criando novo efeito. Primeiro voltamos para estilizao padro,


removendo os atributos da tag a no arquivo estilo19e20.css

Representar um documento. (terminando com zip)

Estilizao de Cabealhos - CSS

Criando novo efeito. Primeiro voltamos para estilizao padro,


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.

Prxima Aula: Estilizao de Listas