ݺߣ

ݺߣShare a Scribd company logo

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

•Download as PPT, PDF•
•
Carlos Caicedo
Carlos Caicedo

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)

1 of 130
Hojas de estilos en cascada. Instrucciones que debe seguir un navegador para presentar la información css
1996. Recomendaciones para mejorar la visualización de un html. css
Separar al máximo la forma (presentación) y el fondo (datos) css
Determina la presentación de la información de acuerdo con el dispositivo que se emplee. css
media=“screen” media=“print” media=“aural”
Su sintáxis
body { background-color:#FFFFFF; }
body { background-color:#FFFFFF; } Selector : Etiqueta ¿Dónde?
#encabezado { background-color:#FFFFFF; } Selector : Identificador individual ¿Dónde?
.datos { background-color:#FFFFFF; } Selector : Identificador común ¿Dónde?
p strong { background-color:#FFFFFF; } Selector : Elemento contextual ¿Dónde?
a:hover { background-color:#FFFFFF; } Selector : Pseudo elemento ¿Dónde?
a:hover { background-color:#FFFFFF; } Declaración Selector : Pseudo elemento ¿Dónde?
a:hover { background-color:#FFFFFF; } Declaración Propiedad : Atributo ¿Qué? Selector : Pseudo elemento ¿Dónde?
a:hover { background-color:#FFFFFF; } Declaración Propiedad : Atributo ¿Qué? Valor : ¿Cómo? Selector : Pseudo elemento ¿Dónde?
Reglas básicas
01 Jerarquía
Autor - Usuario - Navegador
<h1>Hola</h1>
Hola <h1>Hola</h1>
<h1>Hola</h1> Hola h1 { color:red; }
Hola <h1>Hola</h1> h1 { color:red; }
02 Lo específico vence a lo genérico
Ante un conflicto de definiciones el navegador tomará la que se determinó con mayor especificidad
<body> <h1>Hola</h1> <p>Contenido</p> </body>
Hola Contenido <body> <h1>Hola</h1> <p>Contenido</p> </body>
Hola Contenido body { color:red; } <body> <h1>Hola</h1> <p>Contenido</p> </body>
Hola Contenido body { color:red; } <body> <h1>Hola</h1> <p>Contenido</p> </body>
Hola Contenido body { color:red; } body p { color:blue; } <body> <h1>Hola</h1> <p>Contenido</p> </body>
Hola Contenido body { color:red; } body p { color:blue; } <body> <h1>Hola</h1> <p>Contenido</p> </body> Elemento contextual
Hola Contenido body { color:red; } body p { color:blue; } <body> <h1>Hola</h1> <p>Contenido</p> </body>
03 Orden
El último en ser leído es quien define la propiedad
Hola Contenido h1 { color:red; } <body> <h1>Hola</h1> <p>Contenido</p> </body>
Hola Contenido <body> <h1>Hola</h1> <p>Contenido</p> </body> h1 { color:red; } h1 { color:blue; }
Hola Contenido <body> <h1>Hola</h1> <p>Contenido</p> </body> h1 { color:red; } h1 { color:blue; }
04 Sintaxis estricta
Un error provoca que el navegador omita la definición del estilo
Hola Contenido BODY { color:red; } <body> <h1>Hola</h1> <p>Contenido</p> </body>
05 Unidades de medida
Absolutas p { font-size:14px; }
Absolutas p { font-size:12pt; }
Relativas h1 { font-size:4em; }
Porcentuales #encabezado { width:50%; }
Propiedades importantes
01 position
www.kiutnorma.com
<div id=“marco”> <input id=“campo” /> </div>
#marco { position:relative; border-color:red } input#campo { position:absolute; left:25px; top:10px; } <div id=“marco”> <input id=“campo” /> </div>
#marco { position:relative; border-color:red } input#campo { position:absolute; left:25px; top:10px; } <div id=“marco”> <input id=“campo” /> </div>
02 float
<div id=“caja1”> 1 </div> <div id=“caja2”> 2 </div> <div id=“caja3”> 3 </div> 1 2 3
#caja1 { border-color:red float:left; } <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; } <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; } <div id=“caja1”> 1 </div> <div id=“caja2”> 2 </div> <div id=“caja3”> 3 </div> 2 3 1
<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; }
03 clear
<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; }
<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; }
<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; }
04 z-index
#marco { position:relative; border-color:red } input#campo { position:absolute; left:25px; top:10px; } <div id=“marco”> <input id=“campo” /> </div>
#marco { position:relative; border-color:red } input#campo { position:absolute; left:25px; top:10px; } <div id=“marco”> <input id=“campo” /> <button> </button> </div>
#marco { position:relative; border-color:red } input#campo { position:absolute; left:25px; top:10px; } <div id=“marco”> <input id=“campo” /> <button> </button> </div>
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>
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>
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>
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>
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>
05 contenedores
<div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; }
<div id=“caja1”> 1 </div> #caja1 { border-color:red float:left; width:25px; } 1
<div id=“caja1”> 1 </div> #caja1 { border-color:red float:left; width:25px; padding: } 1
<div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; padding: }
<div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; padding:5px 10px 4px 9px; }
<div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; padding:5px 10px 4px 9px; } 5px 10px 4px 9px
<div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; padding:5px 10px 4px 9px; margin: }
<div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; padding:5px 10px 4px 9px; margin: }
<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
<div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; }
<div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; border-width:4px; }
<div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; border-width:4px; }
<div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; border-width:4px; border-style:dotted; }
<div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; border-width:4px; border-style:dotted; }
<div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; border-width:4px; border-style:dashed; }
<div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; border-width:4px; border-style:dashed; }
<div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; border-width:4px; border-style:none; }
<div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; border-width:4px; border-style:none; }
<div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; border-width:4px; border-style:solid; }
<div id=“caja1”> 1 </div> 1 #caja1 { float:left; width:25px; border:4px solid red; }
Los dolores de cabeza
Primer Advil: Las áԱ
<h1>Titulo</h1> <p>Contenido</p> IE MF Titulo Contenido
<h1>Titulo</h1> <p>Contenido</p> h1 { color:red; } p { color:blue; } IE MF Titulo Contenido
<h1>Titulo</h1> <p>Contenido</p> h1 { color:red; } p { color:blue; } IE MF Titulo Contenido
<h1>Titulo</h1> <p>Contenido</p> h1 { color:red; } p { color:blue; } IE MF Titulo Contenido ¿?
<h1>Titulo</h1> <p>Contenido</p> h1 { color:red; } p { color:blue; } IE MF Titulo Contenido Titulo Contenido
<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
<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
<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
<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
<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
<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
Doce tabletas: El problema de la caja
<div id=“caja1”> 1 </div> 1 #caja1 { border:1px solid red width:25px; height:25px; } 25px
<div id=“caja1”> 1 </div> 1 25px #caja1 { border:1px solid red width:25px; height:25px; padding:5px 10px 4px 9px; }
<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
<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
<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
IE MF 1 7px 3px 2px 8px 5px 10px 4px 9px 25px
IE MF 1 7px 3px 2px 8px 5px 10px 4px 9px 25px 30px 40px
IE MF 1 7px 3px 2px 8px 5px 10px 4px 9px 25px 30px 40px ¿?
IE MF 1 7px 3px 2px 8px 5px 10px 4px 9px 25px 30px 40px 1 7px 3px 2px 8px 5px 10px 4px 9px 25px
IE MF 1 7px 3px 2px 8px 5px 10px 4px 9px 25px 30px 40px 1 7px 3px 2px 8px 5px 10px 4px 9px 25px
IE MF 1 7px 3px 2px 8px 5px 10px 4px 9px 25px 1 7px 3px 2px 8px 5px 10px 4px 9px 25px 30px 40px
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
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
#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
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; } ¿? ¿?
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 ?
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; } ¿? ¿?
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
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
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;amp;quot;}amp;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
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;amp;quot;}amp;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
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;amp;quot;}amp;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
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;amp;quot;}amp;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

More Related Content

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