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