Transferir como PDF, PPTX
Carregado porDinis Correia
HTML&CSS 4 - Intermediate CSS (1/2)
Este documento fornece um resumo sobre CSS (Cascading Style Sheets) e como estilizar elementos HTML. Ele discute os três métodos para adicionar CSS (inline, embed e external), a herança e cascata de estilos, a resolução de conflitos com base na origem, especificidade e ordem, e como estilizar texto usando propriedades como font-size, font-family e cores.
HTML&CSS 4 - Intermediate CSS (1/2)
- 1. HTML 4 & CSS DINIS CORREIA 2011 cbn
- 2. CSS 1 HTML + CSS 2 CASCADE E INHERITANCE 3 ESTILIZAR TEXTO
- 3. 3 ESTILIZAR TEXTO CSS ⇪ na sessão anterior...
- 4.
- 5. HTML + CSS 1. Inline 2. Embed 3. External
- 6. HTML + CSS 1. Inline 2. Embed 3. External
- 7. <p style="color: blue;">Lorem ipsum dolor.</p>
- 8. HTML + CSS 1. Inline 2. Embed 3. External
- 9. <head> <title>Um título</title> <meta name="description" content="A descrição da página"> <meta name="keywords" content="vídeos,fotos,pesquisa"> <style> p { color: blue; } </style> </head>
- 10. HTML + CSS 1. Inline 2. Embed 3. External
- 11. <head> <title>Um título</title> <meta name="description" content="A descrição da página"> <meta name="keywords" content="vídeos,fotos,pesquisa"> <link type="text/css" rel="stylesheet" media="screen" href="style.css"> </head>
- 12.
- 14. User User Author agent
- 16. User User Author agent
- 17.
- 20. HERDAM NÃO HERDAM color background font border letter-spacing display line-height float/clear list-style height/width text-align margin text-indent outline text-transform overflow white-space padding word-spacing position ... ...
- 22. CSS body { font-‐family: Arial; }
- 23. CSS p { border: inherit; }
- 24.
- 25. CSS p { color: blue; } p { color: red; }
- 26. CSS p { color: blue; } p { color: red; }
- 27. CONFLITOS 1. Origem resolvidos por 2. Especificidade 3. Ordem
- 28. CONFLITOS 1. Origem resolvidos por 2. Especificidade 3. Ordem
- 29. 1 2 3 User User Author agent
- 30. 1 2 3 User User Author agent 4 5 Author User !important !important
- 31. CSS p { color: blue; } p { color: red !important; }
- 32. User agent p { color: blue; } User Author
- 33. User agent p { color: blue; } User p { color: yellow; } Author
- 34. User agent p { color: blue; } User p { color: yellow; } Author p { color: green; }
- 35. User agent p { color: blue; } User p { color: yellow; } p { color: green; } Author p { color: blue !important; }
- 36. User agent p { color: blue; } p { color: yellow; } User p { color: black !important; } p { color: green; } Author p { color: blue !important; }
- 37. CONFLITOS 1. Origem resolvidos por 2. Especificidade 3. Ordem
- 38. CONFLITOS 1. Origem resolvidos por 2. Especificidade 3. Ordem
- 39. PONTUAÇÕES PARA CSS FOTODE MICHAEL PICK c HTTP://FLIC.KR/P/6ZXG7A
- 40. p { color: blue; } #container .nav p { color: red; }
- 41. Inline ID Class Elements 0 0 0 0
- 42. CSS <p style="color: red;">Um parágrafo.</p> Inline ID Class Elements 1 0 0 0
- 43. CSS #container { color: red; } Inline ID Class Elements 0 1 0 0
- 44. CSS .nav { color: red; } Inline ID Class Elements 0 0 1 0
- 45. CSS p { color: red; } Inline ID Class Elements 0 0 0 1
- 46. CSS p { color: blue; } .lead { color: red; }
- 47. CSS p { color: blue; } .lead { color: red; }
- 48. CSS #container .content p { color: red; } Inline ID Class Elements 0 1 1 1
- 49. CSS #container .content p:first-‐line { color: red; } Inline ID Class Elements 0 1 2 1
- 50. CSS #container .content p strong { color: red; } Inline ID Class Elements 0 1 1 2
- 51. CONFLITOS 1. Origem resolvidos por 2. Especificidade 3. Ordem
- 52. CONFLITOS 1. Origem resolvidos por 2. Especificidade 3. Ordem
- 53. CSS .content p { color: blue; } .content p { color: red; }
- 54. CSS .content p { color: blue; } .content p { color: red; }
- 56. EXERCÍCIO FOTO DE SOCIALISBETTERc HTTP://FLIC.KR/P/5BMFB7
- 57. User agent h2 { color: blue; } User h2 { color: yellow; } Author
- 58. User agent h2 { color: blue; } User h2 { color: yellow; } Author
- 59. User agent h2 { color: blue; } User h2 { color: yellow; } Author h2 { color: red; }
- 60. User agent h2 { color: blue; } User h2 { color: yellow; } Author h2 { color: red; }
- 61. User agent h2 { color: blue; } User h2 { color: yellow; } h2 { color: red; } Author <h2 style="color: black;">Título</h2>
- 62. User agent h2 { color: blue; } User h2 { color: yellow; } h2 { color: red; } Author <h2 style="color: black;">Título</h2>
- 63. User agent h2 { color: blue; } h2 { color: yellow; } User h2 { color: green !important; } Author <h2 style="color: black;">Título</h2>
- 64. User agent h2 { color: blue; } h2 { color: yellow; } User h2 { color: green !important; } Author <h2 style="color: black;">Título</h2>
- 65. CSS p.lead { color: blue; } p { color: red; }
- 66. CSS p.lead { color: blue; } p { color: red; }
- 67. CSS p.lead { color: blue; } p { color: red; } p.lead { color: black; }
- 68. CSS p.lead { color: blue; } p { color: red; } p.lead { color: black; }
- 69. CSS #container p { color: white; } p.lead { color: blue; } p { color: red; } p.lead { color: black; }
- 70. CSS #container p { color: white; } p.lead { color: blue; } p { color: red; } p.lead { color: black; }
- 71.
- 72.
- 73. CSS p { font-‐size: 12px; }
- 74. px em % keywords
- 75. ABSOLUTAS px RELATIVAS em % keywords
- 77. ABSOLUTAS px RELATIVAS em % keywords
- 78. ABSOLUTAS px font-‐size: 12px; RELATIVAS em font-‐size: 1.3em; % font-‐size: 80%; keywords font-‐size: small;
- 79. CSS body { font-‐size: 16px; } p { font-‐size: 0.86em } 14px / 16px = 0.86
- 80. CSS body { font-‐size: 62,5%; } p { font-‐size: 1.2em } 10px x 1.2em = 12px
- 81.
- 82. CSS body { font-‐family: Helvetica, Arial, sans-‐serif; }
- 83. CSS body { font-‐family: "Times New Roman", serif; }
- 84. Exemplo serif Exemplo sans-serif Exemplo monospace Exemplo cursive Exemplo fantasy
- 85.
- 86. ESTILIZAR TEXTO font-‐style font-‐weight font-‐variant
- 87. CSS p { font-‐style: italic; } p { font-‐style: oblique; } p { font-‐style: normal; }
- 88. CSS p { font-‐variant: small-‐caps; } p { font-‐variant: normal; }
- 89. CSS p { font-‐weight: normal; } p { font-‐weight: bold; } p { font-‐weight: 400; }
- 90.
- 91. CSS body { font: italic normal bold 12px Helvetica, Arial, sans-‐serif }
- 92. CSS body { font: italic normal bold 12px Helvetica, Arial, sans-‐serif } -style -weight -family -variant -size
- 93. ESTILIZAR TEXTO outras propriedades
- 94. CSS p { text-‐align: right; } p { text-‐align: left; } p { text-‐align: center; } p { text-‐align: justify; }
- 95. CSS p { letter-‐spacing: 0.05em; } p { word-‐spacing: 0.3em; }
- 96. CSS p { text-‐indent: 10px; }
- 97. CSS p { text-‐indent: 1.5em; }
- 98. CSS p { text-‐transform: uppercase; } p { text-‐transform: lowercase; } p { text-‐transform: none; }
- 99. CSS p { text-‐decoration: underline; } p { text-‐decoration: line-‐through; } p { text-‐decoration: none; }
- 100. CSS p { line-‐height: 16px; } p { line-‐height: 1em; } p { line-‐height: 1.5; }