Baixar para ler offline
![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](https://image.slidesharecdn.com/slideshtmlcss-150423051146-conversion-gate01/75/Sintaxe-do-CSS-Aprenda-a-estrutura-das-regras-e-suas-propriedades-20-2048.jpg)
Carregado porDaniela Carvalho
Sintaxe do CSS - Aprenda a estrutura das regras e suas propriedades.
O documento aborda conceitos básicos de HTML e CSS, incluindo sintaxe, tipos de seletores e exemplos de estilo. Também menciona a importância da especificidade e fornece modelos de estrutura de páginas. Por fim, apresenta dicas sobre media types e editores gratuitos para desenvolvimento web.
Sintaxe do CSS - Aprenda a estrutura das regras e suas propriedades.
- 1. HTML e CSS DanielaCarvalho [email protected] www.cibercultural.com
- 2.
- 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.
- 11.
- 12.
- 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.
- 15.
- 16. <html> <head>…<head> <body> <div id=“topo”></div> <div id=“navegacao”></div> <divid=“conteudo”></div> <div id=“lateral”></div> <div id=“rodape”></div> </body> </html>
- 17.
- 18.
- 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
- 21.
- 22.
- 23.
- 24.
- 25. Editores Gratuitos 1. SublimeText(http://www.sublimetext.com/) 2. Aptana (http://www.aptana.com/)