Aula 19 e 20. estilização de links

225 visualizações

Publicada em

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
225
No SlideShare
0
A partir de incorporações
0
Número de incorporações
5
Ações
Compartilhamentos
0
Downloads
11
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Aula 19 e 20. estilização de links

  1. 1. Estilização de Links CSS - Style Sheet Professor: Jolvani Aula 19 e 20
  2. 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. 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. 4. Estilização de Cabeçalhos - CSS  Adicionando o sublinhado quando passar o mouse: no arquivo estilo19e20.css  Adicionamos algumas propriedades (efeito “holover”)
  5. 5. Estilização de Cabeçalhos - CSS  Espaçamento entre conteúdo e borda  Adicionando cor de fundo
  6. 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. 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. 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. 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. 10. Próxima Aula: Estilização de Listas

×