HTML&CSS 4 - Intermediate CSS (1/2)

2,188 views

Published on

Slides for my in-house HTML & CSS trainning at SAPO.

Intermediate CSS: the cascade, inheritance and text styling.

Published in: Technology, Design
1 Comment
4 Likes
Statistics
Notes
No Downloads
Views
Total views
2,188
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
216
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

HTML&CSS 4 - Intermediate CSS (1/2)

  1. 1. HTML& CSSDINIS CORREIA 2011 cbn
  2. 2. HTML 4& CSSDINIS CORREIA 2011 cbn
  3. 3. CSS 1 HTML + CSS 2 CASCADE E INHERITANCE 3 ESTILIZAR TEXTO
  4. 4. 3 ESTILIZAR TEXTOCSS ⇪na sessão anterior...
  5. 5. BENEFÍCIOSSeparação do conteúdo e apresentação 1. Acessibilidade 2. Flexibilidade 3. Largura de banda
  6. 6. SELECTOR DECLARAÇÃO p  { color:  blue; REGRA } PROPRIEDADE VALOR
  7. 7. SINTAXE 1. Elementoselectores 2. Class 3. ID
  8. 8. p  {  ...  }
  9. 9. .lead  {  ...  }
  10. 10. #logo  {  ...  }
  11. 11. p  {  color:  blue;  } h2  {  color:  blue;  }p,  h2  {  color:  blue;  }
  12. 12. 1. Descendent 2. Child 3. Universal SINTAXE 4. Adjacent siblingselectores  avançados 5. Attribute 6. Multiple classes 7. Pseudo-classes 8. Pseudo-elements
  13. 13. 1. Descendent 2. Child 3. Universal SINTAXE 4. Adjacent siblingselectores  avançados 5. Attribute 6. Multiple classes 7. Pseudo-classes 8. Pseudo-elements
  14. 14. CSS div  strong  {  color:  blue;  }HTML<div><strong>Alerta!</strong></div><div><h2><strong>Alerta!</strong></h2></div>
  15. 15. CSS .lead.destaque  {  color:  blue;  }HTML<p  class="lead">Lorem  ipsum  dolor....</p><p  class="destaque">Lorem  ipsum  dolor....</p><p  class="lead  destaque">Lorem  ipsum  dolor....</p>
  16. 16. CSS .destaque  {  color:  blue;  } .lead  {  margin:  2px;  }HTML<p  class="lead">Lorem  ipsum  dolor....</p><p  class="destaque">Lorem  ipsum  dolor....</p><p  class="lead  destaque">Lorem  ipsum  dolor....</p>
  17. 17. a:link  {  ...  }a:visited  {  ...  } a:focus  {  ...  } a:hover  {  ...  } a:active  {  ...  }
  18. 18. p:first-­‐letter  {  ...  } p:first-­‐line  {  ...  } :before  {  ...  } :after  {  ...  }
  19. 19. HTML + CSS
  20. 20. HTML + CSS 1. Inline 2. Embed 3. External
  21. 21. HTML + CSS 1. Inline 2. Embed 3. External
  22. 22. <p  style="color:  blue;">Lorem  ipsum  dolor.</p>
  23. 23. HTML + CSS 1. Inline 2. Embed 3. External
  24. 24. <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>
  25. 25. HTML + CSS 1. Inline 2. Embed 3. External
  26. 26. <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>
  27. 27. CASCADE &INHERITANCE
  28. 28. User User Authoragent
  29. 29. User User Authoragent
  30. 30. INHERITANCE
  31. 31. HERDAM NÃO HERDAM color background font borderletter-spacing display line-height float/clear list-style height/width text-align margin text-indent outlinetext-transform overflow white-space paddingword-spacing position ... ...
  32. 32. CSS body  {  font-­‐family:  Arial;  }
  33. 33. CSS p  {  border:  inherit;  }
  34. 34. CASCADE
  35. 35. CSS p  {  color:  blue;  } p  {  color:  red;  }
  36. 36. CSS p  {  color:  blue;  } p  {  color:  red;  }
  37. 37. CONFLITOS 1. Origem resolvidos  por 2. Especificidade 3. Ordem
  38. 38. CONFLITOS 1. Origem resolvidos  por 2. Especificidade 3. Ordem
  39. 39. 1 2 3 User User Author agent
  40. 40. 1 2 3 User User Author agent 4 5 Author User !important !important
  41. 41. CSS p  {  color:  blue;  } p  {  color:  red  !important;  }
  42. 42. Useragent p  {  color:  blue;  } UserAuthor
  43. 43. Useragent p  {  color:  blue;  } User p  {  color:  yellow;  }Author
  44. 44. Useragent p  {  color:  blue;  } User p  {  color:  yellow;  }Author p  {  color:  green;  }
  45. 45. Useragent p  {  color:  blue;  } User p  {  color:  yellow;  } p  {  color:  green;  }Author p  {  color:  blue  !important;  }
  46. 46. Useragent p  {  color:  blue;  } p  {  color:  yellow;  } User p  {  color:  black  !important;  } p  {  color:  green;  }Author p  {  color:  blue  !important;  }
  47. 47. CONFLITOS 1. Origem resolvidos  por 2. Especificidade 3. Ordem
  48. 48. CONFLITOS 1. Origem resolvidos  por 2. Especificidade 3. Ordem
  49. 49. PONTUAÇÕES PARA CSSFOTO DE MICHAEL PICK cHTTP://FLIC.KR/P/6ZXG7A
  50. 50. p  {  color:  blue;  }#containter  .nav  p  {  color:  red;  }
  51. 51. Inline ID Class Elements0 0 0 0
  52. 52. CSS <p  style="color:  red;">Um  parágrafo.</p> Inline ID Class Elements 1 0 0 0
  53. 53. CSS #container  {  color:  red;  } Inline ID Class Elements 0 1 0 0
  54. 54. CSS .nav  {  color:  red;  } Inline ID Class Elements 0 0 1 0
  55. 55. CSS p  {  color:  red;  } Inline ID Class Elements 0 0 0 1
  56. 56. CSS p  {  color:  blue;  } .lead  {  color:  red;  }
  57. 57. CSS p  {  color:  blue;  } .lead  {  color:  red;  }
  58. 58. CSS #container  .content  p  {  color:  red;  } Inline ID Class Elements 0 1 1 1
  59. 59. CSS#container  .content  p:first-­‐line  {  color:  red;  } Inline ID Class Elements 0 1 2 1
  60. 60. CSS #container  .content  p  strong  {  color:  red;  } Inline ID Class Elements 0 1 1 2
  61. 61. CONFLITOS 1. Origem resolvidos  por 2. Especificidade 3. Ordem
  62. 62. CONFLITOS 1. Origem resolvidos  por 2. Especificidade 3. Ordem
  63. 63. CSS .content  p  {  color:  blue;  } .content  p  {  color:  red;  }
  64. 64. CSS .content  p  {  color:  blue;  } .content  p  {  color:  red;  }
  65. 65. EXERCÍCIOFOTO DE SOCIALISBETTER cHTTP://FLIC.KR/P/5BMFB7
  66. 66. Useragent h2  {  color:  blue;  } User h2  {  color:  yellow;  }Author
  67. 67. Useragent h2  {  color:  blue;  } User h2  {  color:  yellow;  }Author
  68. 68. Useragent h2  {  color:  blue;  } User h2  {  color:  yellow;  }Author h2  {  color:  red;  }
  69. 69. Useragent h2  {  color:  blue;  } User h2  {  color:  yellow;  }Author h2  {  color:  red;  }
  70. 70. Useragent h2  {  color:  blue;  } User h2  {  color:  yellow;  } h2  {  color:  red;  }Author <h2  style="color:  black;">Título</h2>
  71. 71. Useragent h2  {  color:  blue;  } User h2  {  color:  yellow;  } h2  {  color:  red;  }Author <h2  style="color:  black;">Título</h2>
  72. 72. Useragent h2  {  color:  blue;  } h2  {  color:  yellow;  } User h2  {  color:  green  !important;  }Author <h2  style="color:  black;">Título</h2>
  73. 73. Useragent h2  {  color:  blue;  } h2  {  color:  yellow;  } User h2  {  color:  green  !important;  }Author <h2  style="color:  black;">Título</h2>
  74. 74. CSS p.lead  {  color:  blue;  } p  {  color:  red;  }
  75. 75. CSS p.lead  {  color:  blue;  } p  {  color:  red;  }
  76. 76. CSS p.lead  {  color:  blue;  } p  {  color:  red;  } p.lead  {  color:  black;  }
  77. 77. CSS p.lead  {  color:  blue;  } p  {  color:  red;  } p.lead  {  color:  black;  }
  78. 78. CSS #container  p  {  color:  white;  } p.lead  {  color:  blue;  } p  {  color:  red;  } p.lead  {  color:  black;  }
  79. 79. CSS #container  p  {  color:  white;  } p.lead  {  color:  blue;  } p  {  color:  red;  } p.lead  {  color:  black;  }
  80. 80. ESTILIZAR TEXTO
  81. 81. ESTILIZAR TEXTO font-­‐size
  82. 82. CSS p  {  font-­‐size:  12px;  }
  83. 83. px em %keywords
  84. 84. ABSOLUTAS pxRELATIVAS em % keywords
  85. 85. ABSOLUTAS pxRELATIVAS em % keywords
  86. 86. ABSOLUTAS px font-­‐size:  12px;RELATIVAS em font-­‐size:  1.3em; % font-­‐size:  80%; keywords font-­‐size:  small;
  87. 87. CSS body  {  font-­‐size:  16px;  } p  {  font-­‐size:  0.86em  } 14px / 16px = 0.86
  88. 88. CSS body  {  font-­‐size:  62,5%;  } p  {  font-­‐size:  1.2em  } 10px x 1.2em = 12px
  89. 89. ESTILIZAR TEXTOfont-­‐family
  90. 90. CSS body  {  font-­‐family:  Helvetica,  Arial,  sans-­‐serif;  }
  91. 91. CSS body  {  font-­‐family:  "Times  New  Roman",  serif;  }
  92. 92. Exemplo serifExemplo sans-serifExemplo monospaceExemplo cursiveExemplo fantasy
  93. 93. Sans-serif Serif
  94. 94. ESTILIZAR TEXTO font-­‐style font-­‐weight font-­‐variant
  95. 95. CSS p  {  font-­‐style:  italic;  }   p  {  font-­‐style:  oblique;  }   p  {  font-­‐style:  normal;  }  
  96. 96. CSS p  {  font-­‐variant:  small-­‐caps;  }   p  {  font-­‐variant:  normal;  }  
  97. 97. CSS p  {  font-­‐weight:  normal;  }   p  {  font-­‐weight:  bold;  }   p  {  font-­‐weight:  400;  }
  98. 98. ESTILIZAR TEXTO shorthand
  99. 99. CSS body  {  font:  italic  normal  bold  12px  Helvetica,  Arial,  sans-­‐serif  }
  100. 100. CSS body  {  font:  italic  normal  bold  12px  Helvetica,  Arial,  sans-­‐serif  } -style -weight -family -variant -size
  101. 101. ESTILIZAR TEXTOoutras  propriedades
  102. 102. CSS p  {  text-­‐align:  right;  }   p  {  text-­‐align:  left;  } p  {  text-­‐align:  center;  } p  {  text-­‐align:  justify;  }  
  103. 103. CSS p  {  letter-­‐spacing:  0.05em;  }   p  {  word-­‐spacing:  0.3em;  }
  104. 104. CSS p  {  text-­‐indent:  10px;  }  
  105. 105. CSS p  {  text-­‐indent:  1.5em;  }  
  106. 106. CSS p  {  text-­‐transform:  uppercase;  }   p  {  text-­‐transform:  lowercase;  } p  {  text-­‐transform:  none;  }  
  107. 107. CSS p  {  text-­‐decoration:  underline;  }   p  {  text-­‐decoration:  line-­‐through;  } p  {  text-­‐decoration:  none;  }  
  108. 108. CSS p  {  line-­‐height:  16px;  }   p  {  line-­‐height:  1em;  } p  {  line-­‐height:  1.5;  }  

×