Guía básica para entender CSS (Segunda parte)
•Download as PPT, PDF•
13 likes•2,129 views
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)
Recommended
More Related Content
What's hot
Viewers also liked
Viewers also liked (15)
Guía básica para entender CSS (Segunda parte)
- 2. Hojas de estilos en cascada. Instrucciones que debe seguir un navegador para presentar la información css
- 3. 1996. Recomendaciones para mejorar la visualización de un html. css
- 4. Separar al máximo la forma (presentación) y el fondo (datos) css
- 5. Determina la presentación de la información de acuerdo con el dispositivo que se emplee. css
- 7. Su sintáxis
- 9. body { background-color:#FFFFFF; } Selector : Etiqueta ¿Dónde?
- 10. #encabezado { background-color:#FFFFFF; } Selector : Identificador individual ¿Dónde?
- 11. .datos { background-color:#FFFFFF; } Selector : Identificador común ¿Dónde?
- 12. p strong { background-color:#FFFFFF; } Selector : Elemento contextual ¿Dónde?
- 13. a:hover { background-color:#FFFFFF; } Selector : Pseudo elemento ¿Dónde?
- 14. a:hover { background-color:#FFFFFF; } Declaración Selector : Pseudo elemento ¿Dónde?
- 15. a:hover { background-color:#FFFFFF; } Declaración Propiedad : Atributo ¿Qué? Selector : Pseudo elemento ¿Dónde?
- 16. a:hover { background-color:#FFFFFF; } Declaración Propiedad : Atributo ¿Qué? Valor : ¿Cómo? Selector : Pseudo elemento ¿Dónde?
- 17. Reglas básicas
- 18. 01 Jerarquía
- 19. Autor - Usuario - Navegador
- 20. <h1>Hola</h1>
- 22. <h1>Hola</h1> Hola h1 { color:red; }
- 23. Hola <h1>Hola</h1> h1 { color:red; }
- 24. 02 Lo específico vence a lo genérico
- 25. Ante un conflicto de definiciones el navegador tomará la que se determinó con mayor especificidad
- 26. <body> <h1>Hola</h1> <p>Contenido</p> </body>
- 27. Hola Contenido <body> <h1>Hola</h1> <p>Contenido</p> </body>
- 28. Hola Contenido body { color:red; } <body> <h1>Hola</h1> <p>Contenido</p> </body>
- 29. Hola Contenido body { color:red; } <body> <h1>Hola</h1> <p>Contenido</p> </body>
- 30. Hola Contenido body { color:red; } body p { color:blue; } <body> <h1>Hola</h1> <p>Contenido</p> </body>
- 31. Hola Contenido body { color:red; } body p { color:blue; } <body> <h1>Hola</h1> <p>Contenido</p> </body> Elemento contextual
- 32. Hola Contenido body { color:red; } body p { color:blue; } <body> <h1>Hola</h1> <p>Contenido</p> </body>
- 33. 03 Orden
- 34. El último en ser leído es quien define la propiedad
- 35. Hola Contenido h1 { color:red; } <body> <h1>Hola</h1> <p>Contenido</p> </body>
- 36. Hola Contenido <body> <h1>Hola</h1> <p>Contenido</p> </body> h1 { color:red; } h1 { color:blue; }
- 37. Hola Contenido <body> <h1>Hola</h1> <p>Contenido</p> </body> h1 { color:red; } h1 { color:blue; }
- 39. Un error provoca que el navegador omita la definición del estilo
- 40. Hola Contenido BODY { color:red; } <body> <h1>Hola</h1> <p>Contenido</p> </body>
- 41. 05 Unidades de medida
- 42. Absolutas p { font-size:14px; }
- 43. Absolutas p { font-size:12pt; }
- 44. Relativas h1 { font-size:4em; }
- 45. Porcentuales #encabezado { width:50%; }
- 47. 01 position
- 49. <div id=“marco”> <input id=“campo” /> </div>
- 50. #marco { position:relative; border-color:red } input#campo { position:absolute; left:25px; top:10px; } <div id=“marco”> <input id=“campo” /> </div>
- 51. #marco { position:relative; border-color:red } input#campo { position:absolute; left:25px; top:10px; } <div id=“marco”> <input id=“campo” /> </div>
- 52. 02 float
- 53. <div id=“caja1”> 1 </div> <div id=“caja2”> 2 </div> <div id=“caja3”> 3 </div> 1 2 3
- 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
- 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
- 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
- 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; }
- 58. 03 clear
- 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; }
- 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; }
- 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; }
- 62. 04 z-index
- 63. #marco { position:relative; border-color:red } input#campo { position:absolute; left:25px; top:10px; } <div id=“marco”> <input id=“campo” /> </div>
- 64. #marco { position:relative; border-color:red } input#campo { position:absolute; left:25px; top:10px; } <div id=“marco”> <input id=“campo” /> <button> </button> </div>
- 65. #marco { position:relative; border-color:red } input#campo { position:absolute; left:25px; top:10px; } <div id=“marco”> <input id=“campo” /> <button> </button> </div>
- 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>
- 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>
- 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>
- 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>
- 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>
- 71. 05 contenedores
- 72. <div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; }
- 73. <div id=“caja1”> 1 </div> #caja1 { border-color:red float:left; width:25px; } 1
- 74. <div id=“caja1”> 1 </div> #caja1 { border-color:red float:left; width:25px; padding: } 1
- 75. <div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; padding: }
- 76. <div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; padding:5px 10px 4px 9px; }
- 77. <div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; padding:5px 10px 4px 9px; } 5px 10px 4px 9px
- 78. <div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; padding:5px 10px 4px 9px; margin: }
- 79. <div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; padding:5px 10px 4px 9px; margin: }
- 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
- 81. <div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; }
- 82. <div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; border-width:4px; }
- 83. <div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; border-width:4px; }
- 84. <div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; border-width:4px; border-style:dotted; }
- 85. <div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; border-width:4px; border-style:dotted; }
- 86. <div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; border-width:4px; border-style:dashed; }
- 87. <div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; border-width:4px; border-style:dashed; }
- 88. <div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; border-width:4px; border-style:none; }
- 89. <div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; border-width:4px; border-style:none; }
- 90. <div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; border-width:4px; border-style:solid; }
- 91. <div id=“caja1”> 1 </div> 1 #caja1 { float:left; width:25px; border:4px solid red; }
- 92. Los dolores de cabeza
- 94. Primer Advil: Las márgenes
- 95. <h1>Titulo</h1> <p>Contenido</p> IE MF Titulo Contenido
- 96. <h1>Titulo</h1> <p>Contenido</p> h1 { color:red; } p { color:blue; } IE MF Titulo Contenido
- 97. <h1>Titulo</h1> <p>Contenido</p> h1 { color:red; } p { color:blue; } IE MF Titulo Contenido
- 98. <h1>Titulo</h1> <p>Contenido</p> h1 { color:red; } p { color:blue; } IE MF Titulo Contenido ¿?
- 99. <h1>Titulo</h1> <p>Contenido</p> h1 { color:red; } p { color:blue; } IE MF Titulo Contenido Titulo Contenido
- 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
- 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
- 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
- 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
- 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
- 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
- 106. Doce tabletas: El problema de la caja
- 107. <div id=“caja1”> 1 </div> 1 #caja1 { border:1px solid red width:25px; height:25px; } 25px
- 108. <div id=“caja1”> 1 </div> 1 25px #caja1 { border:1px solid red width:25px; height:25px; padding:5px 10px 4px 9px; }
- 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
- 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
- 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
- 112. IE MF 1 7px 3px 2px 8px 5px 10px 4px 9px 25px
- 113. IE MF 1 7px 3px 2px 8px 5px 10px 4px 9px 25px 30px 40px
- 114. IE MF 1 7px 3px 2px 8px 5px 10px 4px 9px 25px 30px 40px ¿?
- 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
- 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
- 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
- 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
- 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
- 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
- 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; } ¿? ¿?
- 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 ?
- 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; } ¿? ¿?
- 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
- 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
- 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: "amp;quot;}amp;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
- 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: "amp;quot;}amp;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
- 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: "amp;quot;}amp;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
- 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: "amp;quot;}amp;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