Concepção de Websites - Introdução às CSS’s - Hélder OliveiraConcepção de WebsitesIntrodução às CSS’s
Concepção de Websites - Introdução às CSS’s - Hélder OliveiraO que são as CSS’s?• CSS = Cascade Style Sheets• Introduzidas...
Concepção de Websites - Introdução às CSS’s - Hélder OliveiraDefinição de um estilo• Sintaxe básica:<selector>{<propriedad...
Concepção de Websites - Introdução às CSS’s - Hélder OliveiraTipos de definição de estilos• Externa– Uso de um ficheiro pr...
Concepção de Websites - Introdução às CSS’s - Hélder OliveiraDefinição Externa• Usa um ficheiroindependente apenascom defi...
Concepção de Websites - Introdução às CSS’s - Hélder OliveiraDefinição Interna• Uso do mesmodocumento HTML ondeos estilos ...
Concepção de Websites - Introdução às CSS’s - Hélder OliveiraDefinição Local• Não usa selector• Aplicação do estilona próp...
Concepção de Websites - Introdução às CSS’s - Hélder OliveiraSelector• Permite estabelecer aligação entre a definiçãode um...
Concepção de Websites - Introdução às CSS’s - Hélder OliveiraDefinição do selector• Nome da tag– Assume o mesmo nome datag...
Concepção de Websites - Introdução às CSS’s - Hélder OliveiraDefinição do selector• Identificador deelementos HTML– Ligaçã...
Concepção de Websites - Introdução às CSS’s - Hélder OliveiraDefinição do selector• Classes– É dado um nomefacultativo ao ...
Concepção de Websites - Introdução às CSS’s - Hélder OliveiraPrioridades• Estabelecidas em casode redefinição depropriedad...
Concepção de Websites - Introdução às CSS’s - Hélder OliveiraQuestões?
Concepção de Websites - Introdução às CSS’s - Hélder OliveiraFIM
Próximos SlideShares
Carregando em…5
×

Apresentacao aula5

132 visualizações

Publicada em

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
132
No SlideShare
0
A partir de incorporações
0
Número de incorporações
1
Ações
Compartilhamentos
0
Downloads
1
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Apresentacao aula5

  1. 1. Concepção de Websites - Introdução às CSS’s - Hélder OliveiraConcepção de WebsitesIntrodução às CSS’s
  2. 2. Concepção de Websites - Introdução às CSS’s - Hélder OliveiraO que são as CSS’s?• CSS = Cascade Style Sheets• Introduzidas no HTML 4• Separação entre estilo da página econteúdos• Compatível com a maioria dosbrowsers
  3. 3. Concepção de Websites - Introdução às CSS’s - Hélder OliveiraDefinição de um estilo• Sintaxe básica:<selector>{<propriedade1>: <valor1>;<propriedade2>: <valor2>;}• Exemplo:.estilo1{color: #FF0000;font-family: “Arial”;font-size: “Arial”;}
  4. 4. Concepção de Websites - Introdução às CSS’s - Hélder OliveiraTipos de definição de estilos• Externa– Uso de um ficheiro próprio• Interna– Definição no próprio ficheiro HTML em zonaespecífica• Local– Definição directa na tag (não usa selector)
  5. 5. Concepção de Websites - Introdução às CSS’s - Hélder OliveiraDefinição Externa• Usa um ficheiroindependente apenascom definição deestilos• Necessária a definiçãode uma ligação aoficheiro CSS nocabeçalho HTML• Permite partilha entrevários documentosHTMLINDEX.HTM<HTML><HEAD><LINK (…) href=“ESTILOS.CSS”/></HEAD><BODY></BODY></HTML>ESTILOS.CSS.estilo1{(…)}.estilo2{(…)}
  6. 6. Concepção de Websites - Introdução às CSS’s - Hélder OliveiraDefinição Interna• Uso do mesmodocumento HTML ondeos estilos são aplicados• Definido, normalmente,no cabeçalho• Para definição de estilosespecíficos e repetitivosno mesmo documento• Melhora a portabilidade• Não permite partilha comoutros documentosINDEX.HTM<HTML><HEAD><STYLE type=“text/css”>.estilo1{(…)}.estilo2{(…)}</STYLE></H EAD><BODY></BODY></HTML>
  7. 7. Concepção de Websites - Introdução às CSS’s - Hélder OliveiraDefinição Local• Não usa selector• Aplicação do estilona própria tag• Usa o atributo “style”• Usado em situaçõespontuais e muitoespecíficas• Exemplos:<p style="color:#FF0000">Aplicações Informáticas A </p><td style=“background-color:#EEE”>&nbsp;</td>
  8. 8. Concepção de Websites - Introdução às CSS’s - Hélder OliveiraSelector• Permite estabelecer aligação entre a definiçãode um estilo e a tag ondeeste será aplicado• Útil apenas em classes• Existem 3 tiposfundamentais:– Nome da tag– Identificadores– Classes• Exemplos:td{(…)}#link1{(…)}.texto{(…)}
  9. 9. Concepção de Websites - Introdução às CSS’s - Hélder OliveiraDefinição do selector• Nome da tag– Assume o mesmo nome datag à qual se pretendeaplicar o estilo– Todas as tags com essenome serão afectas• Exemplo:td{(…)}body{(…)}a{(…)}
  10. 10. Concepção de Websites - Introdução às CSS’s - Hélder OliveiraDefinição do selector• Identificador deelementos HTML– Ligação feita com baseno atributo ID de cadatag– A indicação do valor doatributo ID deve serprecedida de #• Exemplo#celula1{(…)}~<td id=“celula1”></td>
  11. 11. Concepção de Websites - Introdução às CSS’s - Hélder OliveiraDefinição do selector• Classes– É dado um nomefacultativo ao estilo– O nome da classe é sempreprecedido de um ponto(ex: .estilo1)– Para aplicação na tag usa-se o atributo class• Exemplo.estilo1{(…)}td.estilo2{(…)}<p class=“estilo1”></p><td class=“estilo1”></td><p class=“estilo2”></p><td class=“estilo2”></td>
  12. 12. Concepção de Websites - Introdução às CSS’s - Hélder OliveiraPrioridades• Estabelecidas em casode redefinição depropriedades:1. Externo2. Interno3. Local
  13. 13. Concepção de Websites - Introdução às CSS’s - Hélder OliveiraQuestões?
  14. 14. Concepção de Websites - Introdução às CSS’s - Hélder OliveiraFIM

×