Guía básica para entender CSS (Segunda parte)

7,560 views
7,486 views

Published on

Esta presentación es un apoyo para una capacitación que hice a una empresa.

La primera parte presenta aspectos fundamentales del xhtml y la segunda busca explicar conceptos básicos sobre los CSS

(CC Atribución-No Comercial-Licenciar Igual 2.5)

0 Comments
13 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,560
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
278
Comments
0
Likes
13
Embeds 0
No embeds

No notes for slide

Guía básica para entender CSS (Segunda parte)

  1. 2. Hojas de estilos en cascada. Instrucciones que debe seguir un navegador para presentar la información css
  2. 3. 1996. Recomendaciones para mejorar la visualización de un html. css
  3. 4. Separar al máximo la forma (presentación) y el fondo (datos) css
  4. 5. Determina la presentación de la información de acuerdo con el dispositivo que se emplee. css
  5. 6. media=“screen” media=“print” media=“aural”
  6. 7. Su sintáxis
  7. 8. body { background-color:#FFFFFF; }
  8. 9. body { background-color:#FFFFFF; } Selector : Etiqueta ¿Dónde?
  9. 10. #encabezado { background-color:#FFFFFF; } Selector : Identificador individual ¿Dónde?
  10. 11. .datos { background-color:#FFFFFF; } Selector : Identificador común ¿Dónde?
  11. 12. p strong { background-color:#FFFFFF; } Selector : Elemento contextual ¿Dónde?
  12. 13. a:hover { background-color:#FFFFFF; } Selector : Pseudo elemento ¿Dónde?
  13. 14. a:hover { background-color:#FFFFFF; } Declaración Selector : Pseudo elemento ¿Dónde?
  14. 15. a:hover { background-color:#FFFFFF; } Declaración Propiedad : Atributo ¿Qué? Selector : Pseudo elemento ¿Dónde?
  15. 16. a:hover { background-color:#FFFFFF; } Declaración Propiedad : Atributo ¿Qué? Valor : ¿Cómo? Selector : Pseudo elemento ¿Dónde?
  16. 17. Reglas básicas
  17. 18. 01 Jerarquía
  18. 19. Autor - Usuario - Navegador
  19. 20. <h1>Hola</h1>
  20. 21. Hola <h1>Hola</h1>
  21. 22. <h1>Hola</h1> Hola h1 { color:red; }
  22. 23. Hola <h1>Hola</h1> h1 { color:red; }
  23. 24. 02 Lo específico vence a lo genérico
  24. 25. Ante un conflicto de definiciones el navegador tomará la que se determinó con mayor especificidad
  25. 26. <body> <h1>Hola</h1> <p>Contenido</p> </body>
  26. 27. Hola Contenido <body> <h1>Hola</h1> <p>Contenido</p> </body>
  27. 28. Hola Contenido body { color:red; } <body> <h1>Hola</h1> <p>Contenido</p> </body>
  28. 29. Hola Contenido body { color:red; } <body> <h1>Hola</h1> <p>Contenido</p> </body>
  29. 30. Hola Contenido body { color:red; } body p { color:blue; } <body> <h1>Hola</h1> <p>Contenido</p> </body>
  30. 31. Hola Contenido body { color:red; } body p { color:blue; } <body> <h1>Hola</h1> <p>Contenido</p> </body> Elemento contextual
  31. 32. Hola Contenido body { color:red; } body p { color:blue; } <body> <h1>Hola</h1> <p>Contenido</p> </body>
  32. 33. 03 Orden
  33. 34. El último en ser leído es quien define la propiedad
  34. 35. Hola Contenido h1 { color:red; } <body> <h1>Hola</h1> <p>Contenido</p> </body>
  35. 36. Hola Contenido <body> <h1>Hola</h1> <p>Contenido</p> </body> h1 { color:red; } h1 { color:blue; }
  36. 37. Hola Contenido <body> <h1>Hola</h1> <p>Contenido</p> </body> h1 { color:red; } h1 { color:blue; }
  37. 38. 04 Sintaxis estricta
  38. 39. Un error provoca que el navegador omita la definición del estilo
  39. 40. Hola Contenido BODY { color:red; } <body> <h1>Hola</h1> <p>Contenido</p> </body>
  40. 41. 05 Unidades de medida
  41. 42. Absolutas p { font-size:14px; }
  42. 43. Absolutas p { font-size:12pt; }
  43. 44. Relativas h1 { font-size:4em; }
  44. 45. Porcentuales #encabezado { width:50%; }
  45. 46. Propiedades importantes
  46. 47. 01 position
  47. 48. www.kiutnorma.com
  48. 49. <div id=“marco”> <input id=“campo” /> </div>
  49. 50. #marco { position:relative; border-color:red } input#campo { position:absolute; left:25px; top:10px; } <div id=“marco”> <input id=“campo” /> </div>
  50. 51. #marco { position:relative; border-color:red } input#campo { position:absolute; left:25px; top:10px; } <div id=“marco”> <input id=“campo” /> </div>
  51. 52. 02 float
  52. 53. <div id=“caja1”> 1 </div> <div id=“caja2”> 2 </div> <div id=“caja3”> 3 </div> 1 2 3
  53. 54. #caja1 { border-color:red float:left; } <div id=“caja1”> 1 </div> <div id=“caja2”> 2 </div> <div id=“caja3”> 3 </div> 1 2 3
  54. 55. #caja1 { border-color:red float:left; width:25px; } <div id=“caja1”> 1 </div> <div id=“caja2”> 2 </div> <div id=“caja3”> 3 </div> 1 2 3
  55. 56. #caja1 { border-color:red float:left; width:25px } #caja2 { border-color:blue float:left; width:25px; } <div id=“caja1”> 1 </div> <div id=“caja2”> 2 </div> <div id=“caja3”> 3 </div> 2 3 1
  56. 57. <div id=“caja1”> 1 </div> <div id=“caja2”> 2 </div> <div id=“caja3”> 3 </div> 1 2 3 #caja1 { border-color:red float:left; width:25px } #caja2 { border-color:blue float:left; width:25px; }
  57. 58. 03 clear
  58. 59. <div id=“caja1”> 1 </div> <div id=“caja2”> 2 </div> <div id=“caja3”> 3 </div> 1 2 3 #caja1 { border-color:red float:left; width:25px } #caja2 { border-color:blue float:left; width:25px; }
  59. 60. <div id=“caja1”> 1 </div> <div id=“caja2”> 2 </div> <div id=“caja3”> 3 </div> 1 2 3 #caja2 { border-color:blue float:left; width:25px; } #caja3 { width:25px; clear:both; }
  60. 61. <div id=“caja1”> 1 </div> <div id=“caja2”> 2 </div> <div id=“caja3”> 3 </div> 1 3 2 #caja2 { border-color:blue float:left; width:25px; } #caja3 { width:25px; clear:both; }
  61. 62. 04 z-index
  62. 63. #marco { position:relative; border-color:red } input#campo { position:absolute; left:25px; top:10px; } <div id=“marco”> <input id=“campo” /> </div>
  63. 64. #marco { position:relative; border-color:red } input#campo { position:absolute; left:25px; top:10px; } <div id=“marco”> <input id=“campo” /> <button> </button> </div>
  64. 65. #marco { position:relative; border-color:red } input#campo { position:absolute; left:25px; top:10px; } <div id=“marco”> <input id=“campo” /> <button> </button> </div>
  65. 66. input#campo { position:absolute; left:25px; top:10px; } #marco button { position:absolute; left:100px; top:10px; } <div id=“marco”> <input id=“campo” /> <button> </button> </div>
  66. 67. input#campo { position:absolute; left:10px; top:10px; } #marco button { position:absolute; left:100px; top:10px; } <div id=“marco”> <input id=“campo” /> <button> </button> </div>
  67. 68. input#campo { position:absolute; left:10px; top:10px; } #marco button { position:absolute; left:100px; top:10px; } <div id=“marco”> <input id=“campo” /> <button> </button> </div>
  68. 69. input#campo { position:absolute; left:10px; top:10px; z-index:1; } #marco button { position:absolute; left:100px; top:10px; z-index:2; } <div id=“marco”> <input id=“campo” /> <button> </button> </div>
  69. 70. input#campo { position:absolute; left:10px; top:10px; z-index:1; } #marco button { position:absolute; left:100px; top:10px; z-index:2; } <div id=“marco”> <input id=“campo” /> <button> </button> </div>
  70. 71. 05 contenedores
  71. 72. <div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; }
  72. 73. <div id=“caja1”> 1 </div> #caja1 { border-color:red float:left; width:25px; } 1
  73. 74. <div id=“caja1”> 1 </div> #caja1 { border-color:red float:left; width:25px; padding: } 1
  74. 75. <div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; padding: }
  75. 76. <div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; padding:5px 10px 4px 9px; }
  76. 77. <div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; padding:5px 10px 4px 9px; } 5px 10px 4px 9px
  77. 78. <div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; padding:5px 10px 4px 9px; margin: }
  78. 79. <div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; padding:5px 10px 4px 9px; margin: }
  79. 80. <div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; padding:5px 10px 4px 9px; margin:3px 7px 2px 8px; } 7px 3px 2px 8px
  80. 81. <div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; }
  81. 82. <div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; border-width:4px; }
  82. 83. <div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; border-width:4px; }
  83. 84. <div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; border-width:4px; border-style:dotted; }
  84. 85. <div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; border-width:4px; border-style:dotted; }
  85. 86. <div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; border-width:4px; border-style:dashed; }
  86. 87. <div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; border-width:4px; border-style:dashed; }
  87. 88. <div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; border-width:4px; border-style:none; }
  88. 89. <div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; border-width:4px; border-style:none; }
  89. 90. <div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; border-width:4px; border-style:solid; }
  90. 91. <div id=“caja1”> 1 </div> 1 #caja1 { float:left; width:25px; border:4px solid red; }
  91. 92. Los dolores de cabeza
  92. 94. Primer Advil: Las márgenes
  93. 95. <h1>Titulo</h1> <p>Contenido</p> IE MF Titulo Contenido
  94. 96. <h1>Titulo</h1> <p>Contenido</p> h1 { color:red; } p { color:blue; } IE MF Titulo Contenido
  95. 97. <h1>Titulo</h1> <p>Contenido</p> h1 { color:red; } p { color:blue; } IE MF Titulo Contenido
  96. 98. <h1>Titulo</h1> <p>Contenido</p> h1 { color:red; } p { color:blue; } IE MF Titulo Contenido ¿?
  97. 99. <h1>Titulo</h1> <p>Contenido</p> h1 { color:red; } p { color:blue; } IE MF Titulo Contenido Titulo Contenido
  98. 100. <h1>Titulo</h1> <p>Contenido</p> h1 { color:red; margin:0 0 0 0; } p { color:blue; margin:0 0 0 0; } IE MF Titulo Contenido Titulo Contenido
  99. 101. <h1>Titulo</h1> <p>Contenido</p> h1 { color:red; margin:0 0 0 0; } p { color:blue; margin:0 0 0 0; } IE MF Titulo Contenido Titulo Contenido
  100. 102. <h1>Titulo</h1> <p>Contenido</p> h1 { color:red; margin:10px 0 10px 25px; } p { color:blue; margin:0 0 10px 25px; } IE MF Titulo Contenido Titulo Contenido
  101. 103. <h1>Titulo</h1> <p>Contenido</p> h1 { color:red; margin:10px 0 10px 25px; } p { color:blue; margin:0 0 10px 25px; } IE MF Titulo Contenido Titulo Contenido
  102. 104. <h1>Titulo</h1> <p>Contenido</p> <p>Contenido</p> h1 { color:red; margin:10px 0 10px 25px; } p { color:blue; margin:0 0 10px 25px; } IE MF Titulo Contenido Titulo Contenido
  103. 105. <h1>Titulo</h1> <p>Contenido</p> <p>Contenido</p> h1 { color:red; margin:10px 0 10px 25px; } p { color:blue; margin:0 0 10px 25px; } IE MF Titulo Contenido Titulo Contenido Contenido Contenido
  104. 106. Doce tabletas: El problema de la caja
  105. 107. <div id=“caja1”> 1 </div> 1 #caja1 { border:1px solid red width:25px; height:25px; } 25px
  106. 108. <div id=“caja1”> 1 </div> 1 25px #caja1 { border:1px solid red width:25px; height:25px; padding:5px 10px 4px 9px; }
  107. 109. <div id=“caja1”> 1 </div> 1 #caja1 { border:1px solid red width:25px; height:25px; padding:5px 10px 4px 9px; } 5px 10px 4px 9px 25px
  108. 110. <div id=“caja1”> 1 </div> 1 #caja1 { border:1px solid red width:25px; height:25px; padding:5px 10px 4px 9px; margin:3px 7px 2px 8px; } 5px 10px 4px 9px 25px
  109. 111. <div id=“caja1”> 1 </div> #caja1 { border:1px solid red width:25px; height:25px; padding:5px 10px 4px 9px; margin:3px 7px 2px 8px; } 1 7px 3px 2px 8px 5px 10px 4px 9px 25px
  110. 112. IE MF 1 7px 3px 2px 8px 5px 10px 4px 9px 25px
  111. 113. IE MF 1 7px 3px 2px 8px 5px 10px 4px 9px 25px 30px 40px
  112. 114. IE MF 1 7px 3px 2px 8px 5px 10px 4px 9px 25px 30px 40px ¿?
  113. 115. IE MF 1 7px 3px 2px 8px 5px 10px 4px 9px 25px 30px 40px 1 7px 3px 2px 8px 5px 10px 4px 9px 25px
  114. 116. IE MF 1 7px 3px 2px 8px 5px 10px 4px 9px 25px 30px 40px 1 7px 3px 2px 8px 5px 10px 4px 9px 25px
  115. 117. IE MF 1 7px 3px 2px 8px 5px 10px 4px 9px 25px 1 7px 3px 2px 8px 5px 10px 4px 9px 25px 30px 40px
  116. 118. IE MF 1 7px 3px 2px 8px 5px 10px 4px 9px 25px 61px 1 7px 3px 2px 8px 5px 10px 4px 9px 25px 30px 40px
  117. 119. IE MF 1 7px 3px 2px 8px 5px 10px 4px 9px 25px 61px=8+1+9+25+10+1+7 1 7px 3px 2px 8px 5px 10px 4px 9px 25px 30px 40px
  118. 120. #caja1 { border:1px solid red width:25px; height:25px; padding:5px 10px 4px 9px; margin:3px 7px 2px 8px; } <div id=“caja1”> 1 </div> 1 7px 3px 2px 8px 5px 10px 4px 9px 25px
  119. 121. IE MF <div id=“caja1”> 1 </div> #caja1 { border:1px solid red width:25px; height:25px; padding:5px 10px 4px 9px; margin:3px 7px 2px 8px; } ¿? ¿?
  120. 122. IE MF <div id=“caja1”> 1 </div> #caja1 { border:1px solid red width:25px; height:25px; padding:5px 10px 4px 9px; margin:3px 7px 2px 8px; } ¿? ¿ Javascript ?
  121. 123. IE MF <div id=“caja1”> 1 </div> #caja1 { border:1px solid red width:25px; height:25px; padding:5px 10px 4px 9px; margin:3px 7px 2px 8px; } ¿? ¿?
  122. 124. IE MF #caja1 { border:1px solid red width:25px; height:25px; padding:5px 10px 4px 9px; margin:3px 7px 2px 8px; } 1 7px 3px 2px 8px 5px 10px 4px 9px 25px 1 7px 3px 2px 8px 5px 10px 4px 9px 25px
  123. 125. IE #caja1 { border:1px solid red width:25px; height:25px; padding:5px 10px 4px 9px; margin:3px 7px 2px 8px; } /*Comienza el hack-box*/ /*Termina el hack-box*/ 1 7px 3px 2px 8px 5px 10px 4px 9px 25px MF 1 7px 3px 2px 8px 5px 10px 4px 9px 25px
  124. 126. IE #caja1 { border:1px solid red width:25px; height:25px; padding:5px 10px 4px 9px; margin:3px 7px 2px 8px; } /*Comienza el hack-box*/ #caja { voice-family: &quot;&quot;}&quot;&quot;; voice-family:inherit; } html>body div#caja { } /*Termina el hack-box*/ 1 7px 3px 2px 8px 5px 10px 4px 9px 25px MF 1 7px 3px 2px 8px 5px 10px 4px 9px 25px
  125. 127. IE MF #caja1 { border:1px solid red width:25px; height:25px; padding:5px 10px 4px 9px; margin:3px 7px 2px 8px; } /*Comienza el hack-box*/ #caja { voice-family: &quot;&quot;}&quot;&quot;; voice-family:inherit; width:4px; height:14px; } html>body div#caja { width:4px; height:14px; } /*Termina el hack-box*/ 1 7px 3px 2px 8px 5px 10px 4px 9px 25px 1 7px 3px 2px 8px 5px 10px 4px 9px 25px
  126. 128. IE MF #caja1 { border:1px solid red width:25px; height:25px; padding:5px 10px 4px 9px; margin:3px 7px 2px 8px; } /*Comienza el hack-box*/ #caja { voice-family: &quot;&quot;}&quot;&quot;; voice-family:inherit; width:4px; height:14px; } html>body div#caja { width:4px; height:14px; } /*Termina el hack-box*/ 4+1+10+1+9 1 7px 3px 2px 8px 5px 10px 4px 9px 25px 1 7px 3px 2px 8px 5px 10px 4px 9px 25px
  127. 129. IE MF #caja1 { border:1px solid red width:25px; height:25px; padding:5px 10px 4px 9px; margin:3px 7px 2px 8px; } /*Comienza el hack-box*/ #caja { voice-family: &quot;&quot;}&quot;&quot;; voice-family:inherit; width:4px; height:14px; } html>body div#caja { width:4px; height:14px; } /*Termina el hack-box*/ 4+1+10+1+9 14+1+5+1+4 1 7px 3px 2px 8px 5px 10px 4px 9px 25px 1 7px 3px 2px 8px 5px 10px 4px 9px 25px

×