O slideshow foi denunciado.
HTML  e  CSS	
Daniela Carvalho
danicarvalho@gmail.com
www.cibercultural.com
CSS	
http://www.maujor.com/tutorial/intrtut.php
Sintaxe	
p { font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
}
seletor
declaração
propriedade
valor
Sintaxe	
p { font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
}
seletor
declaração
propriedade
valor
Sintaxe	
p { font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
}
seletor
declaração
propriedade
valor
Sintaxe	
seletor
declaração
propriedade
valor
p { font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
}
Exemplo	
div #conteudo { font-family: Arial, Helvetica, sans-serif;}
div#conteudo { font-family: Arial, Helvetica, sans-se...
Tipos  de  Seletores	
•  Globais: p, h1, a, div
•  Classes: .coluna
•  Id: #topo
Funcionamento	
•  Arquivo
o  Ex: principal.css
•  Na página
o  Ex:
<head>
<style>
p {font-family: Arial, Helvetica, sans-s...
Render
Telas
Suporte	
http://caniuse.com/#cats=CSS
Importância	
Seletor	
 ID	
 Classes	
 Elementos	
 Especificidade	
body	
 0	
 0	
 1	
 1	
#mainContent	
 1	
 0	
 0	
 100	
quo...
Modelo	
http://colecaoaprender.blogspot.com.br/
Wireframe	
Topo	
Navegação	
Lateral	
 Conteúdo	
Rodapé
<html>
<head>…<head>
<body>
<div id=“topo”></div>
<div id=“navegacao”></div>
<div id=“conteudo”></div>
<div id=“lateral”><...
<html>
<head>…<head>
<body>
<header></header>
<nav></nav>
<article></article>
<aside></aside>
<footer></footer>
</body>
</...
Lembrete
Media  Types	
•  all
•  braille
•  embossed
•  handheld
•  print
•  projection
•  screen
•  speech
•  tty
•  tv
Media  Types	
link rel=“”stylesheet” href=“desktop.css” media=“[not |
only ] screen [and] (expressão)”
link rel=“styleshee...
CSS  3	
http://css3generator.com/
Grid  Layout
Grid  Layout	
http://colecaoaprender.blogspot.com.br/2014/08/grid-webdesign.html
Validação  W3C	
http://validator.w3.org/
Editores  Gratuitos	
1.  SublimeText (http://www.sublimetext.com/)
2.  Aptana (http://www.aptana.com/)
Próximos SlideShares
Carregando em…5
×

Sintaxe do CSS - Aprenda a estrutura das regras e suas propriedades.

511 visualizações

Publicada em

Criei estes slides para dar suportes aos meus cursos de HTML 5 e CSS 3. Estes, em específico, destaco o desenvolvimento de regras em CSS e suas características.

Publicada em: Internet
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sintaxe do CSS - Aprenda a estrutura das regras e suas propriedades.

  1. 1. HTML  e  CSS Daniela Carvalho danicarvalho@gmail.com www.cibercultural.com
  2. 2. CSS http://www.maujor.com/tutorial/intrtut.php
  3. 3. Sintaxe p { font-family: Arial, Helvetica, sans-serif; font-size: 1em; } seletor declaração propriedade valor
  4. 4. Sintaxe p { font-family: Arial, Helvetica, sans-serif; font-size: 1em; } seletor declaração propriedade valor
  5. 5. Sintaxe p { font-family: Arial, Helvetica, sans-serif; font-size: 1em; } seletor declaração propriedade valor
  6. 6. Sintaxe seletor declaração propriedade valor p { font-family: Arial, Helvetica, sans-serif; font-size: 1em; }
  7. 7. Exemplo div #conteudo { font-family: Arial, Helvetica, sans-serif;} div#conteudo { font-family: Arial, Helvetica, sans-serif;}
  8. 8. Tipos  de  Seletores •  Globais: p, h1, a, div •  Classes: .coluna •  Id: #topo
  9. 9. Funcionamento •  Arquivo o  Ex: principal.css •  Na página o  Ex: <head> <style> p {font-family: Arial, Helvetica, sans-serif;} </style> </head> •  Na linha o  Ex: <p style=“font-family:Arial,Helvetica,sans-serif;”> Texto de parágrafo </p>
  10. 10. Render
  11. 11. Telas
  12. 12. Suporte http://caniuse.com/#cats=CSS
  13. 13. Importância Seletor ID Classes Elementos Especificidade body 0 0 1 1 #mainContent 1 0 0 100 quote 0 1 0 10 div  p 0 0 2 2 #sidebar  p 1 0 1 101
  14. 14. Modelo http://colecaoaprender.blogspot.com.br/
  15. 15. Wireframe Topo Navegação Lateral Conteúdo Rodapé
  16. 16. <html> <head>…<head> <body> <div id=“topo”></div> <div id=“navegacao”></div> <div id=“conteudo”></div> <div id=“lateral”></div> <div id=“rodape”></div> </body> </html>
  17. 17. <html> <head>…<head> <body> <header></header> <nav></nav> <article></article> <aside></aside> <footer></footer> </body> </html>
  18. 18. Lembrete
  19. 19. Media  Types •  all •  braille •  embossed •  handheld •  print •  projection •  screen •  speech •  tty •  tv
  20. 20. Media  Types link rel=“”stylesheet” href=“desktop.css” media=“[not | only ] screen [and] (expressão)” link rel=“stylesheet” href=“desktop.css” media=“only screen and (min-width:0px) and (max-width:480px)” hNp://www.sonora.iar.unicamp.br/index.php/sonora1/article/view/28
  21. 21. CSS  3 http://css3generator.com/
  22. 22. Grid  Layout
  23. 23. Grid  Layout http://colecaoaprender.blogspot.com.br/2014/08/grid-webdesign.html
  24. 24. Validação  W3C http://validator.w3.org/
  25. 25. Editores  Gratuitos 1.  SublimeText (http://www.sublimetext.com/) 2.  Aptana (http://www.aptana.com/)

×