Sintaxe do CSS - Aprenda a estrutura das regras e suas propriedades.
•
0 gefällt mir•851 views
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.
Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie Sintaxe do CSS - Aprenda a estrutura das regras e suas propriedades.
Ähnlich wie Sintaxe do CSS - Aprenda a estrutura das regras e suas propriedades. (9)
Mehr von Daniela Carvalho
Mehr von Daniela Carvalho (20)
Sintaxe do CSS - Aprenda a estrutura das regras e suas propriedades.
- 1. HTML e CSS Daniela Carvalho danicarvalho@gmail.com www.cibercultural.com
- 3. Sintaxe p { font-family: Arial, Helvetica, sans-serif; font-size: 1em; } seletor declaração propriedade valor
- 4. Sintaxe p { font-family: Arial, Helvetica, sans-serif; font-size: 1em; } seletor declaração propriedade valor
- 5. Sintaxe p { font-family: Arial, Helvetica, sans-serif; font-size: 1em; } seletor declaração propriedade valor
- 6. Sintaxe seletor declaração propriedade valor p { font-family: Arial, Helvetica, sans-serif; font-size: 1em; }
- 7. Exemplo div #conteudo { font-family: Arial, Helvetica, sans-serif;} div#conteudo { font-family: Arial, Helvetica, sans-serif;}
- 8. Tipos de Seletores • Globais: p, h1, a, div • Classes: .coluna • Id: #topo
- 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. Render
- 11. Telas
- 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
- 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>
- 18. Lembrete
- 19. Media Types • all • braille • embossed • handheld • print • projection • screen • speech • tty • tv
- 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
- 22. Grid Layout
- 25. Editores Gratuitos 1. SublimeText (http://www.sublimetext.com/) 2. Aptana (http://www.aptana.com/)