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 12. p strong { background-color:#FFFFFF; } Selector : Elemento contextual ¿Dónde? 25. Ante un conflicto de definiciones el navegador tomará la que se determinó con mayor especificidad 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> 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> 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; } 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; } 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> 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 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; } 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