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
01Jerarquí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;}
02Lo específicovence a lo genérico
Ante un conflicto de definicionesel navegador tomará la que se determinó
con mayor especificidad
<body><h1>Hola</h1><p>Contenido</p>
</body>
HolaContenido
<body><h1>Hola</h1><p>Contenido</p>
</body>
HolaContenido
body{
color:red;}
<body><h1>Hola</h1><p>Contenido</p>
</body>
HolaContenido
body{
color:red;}
<body><h1>Hola</h1><p>Contenido</p>
</body>
HolaContenido
body{
color:red;}body p{
color:blue;}
<body><h1>Hola</h1><p>Contenido</p>
</body>
HolaContenido
body{
color:red;}body p{
color:blue;}
<body><h1>Hola</h1><p>Contenido</p>
</body>
Elemento contextual
HolaContenido
body{
color:red;}body p{
color:blue;}
<body><h1>Hola</h1><p>Contenido</p>
</body>
03Orden
El último en ser leído esquien define la propiedad
HolaContenido
h1{
color:red;}
<body><h1>Hola</h1><p>Contenido</p>
</body>
HolaContenido
<body><h1>Hola</h1><p>Contenido</p>
</body>
h1{
color:red;}
h1{
color:blue;}
HolaContenido
<body><h1>Hola</h1><p>Contenido</p>
</body>
h1{
color:red;}
h1{
color:blue;}
04Sintaxis estricta
Un error provoca que el navegadoromita la definición del estilo
HolaContenido
BODY{
color:red;}
<body><h1>Hola</h1><p>Contenido</p>
</body>
05Unidades de medida
Absolutas
p{
font-size:14px;}
Absolutas
p{
font-size:12pt;}
Relativas
h1{
font-size:4em;}
Porcentuales
#encabezado{
width:50%;}
Propiedadesimportantes
01position
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>
02float
<div id=“caja1”>1
</div><div id=“caja2”>
2</div><div id=“caja3”>
3</div>
123
#caja1{
border-color:redfloat:left;
}
<div id=“caja1”>1
</div><div id=“caja2”>
2</div><div id=“caja3”>
3</div>
123
#caja1{
border-color:redfloat:left;width:25px;
}
<div id=“caja1”>1
</div><div id=“caja2”>
2</div><div id=“caja3”>
3</div>
1 23
#caja1{
border-color:redfloat:left;width:25px
}#caja2{
border-color:bluefloat:left;width:25px;
}
<div id=“caja1”>1
</div><div id=“caja2”>
2</div><div id=“caja3”>
3</div>
23
1
<div id=“caja1”>1
</div><div id=“caja2”>
2</div><div id=“caja3”>
3</div>
1 2 3
#caja1{
border-color:redfloat:left;width:25px
}#caja2{
border-color:bluefloat:left;width:25px;
}
03clear
<div id=“caja1”>1
</div><div id=“caja2”>
2</div><div id=“caja3”>
3</div>
1 2 3
#caja1{
border-color:redfloat:left;width:25px
}#caja2{
border-color:bluefloat:left;width:25px;
}
<div id=“caja1”>1
</div><div id=“caja2”>
2</div><div id=“caja3”>
3</div>
1 2 3
#caja2{
border-color:bluefloat:left;width:25px;
}#caja3{
width:25px;clear:both;
}
<div id=“caja1”>1
</div><div id=“caja2”>
2</div><div id=“caja3”>
3</div>
13
2
#caja2{
border-color:bluefloat:left;width:25px;
}#caja3{
width:25px;clear:both;
}
04z-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>
05contenedores
<div id=“caja1”>1
</div>1
#caja1{
border-color:redfloat:left;width:25px;
}
<div id=“caja1”>1
</div>
#caja1{
border-color:redfloat:left;width:25px;
}
1
<div id=“caja1”>1
</div>
#caja1{
border-color:redfloat:left;width:25px;padding:
}
1
<div id=“caja1”>1
</div>
1#caja1{
border-color:redfloat:left;width:25px;padding:
}
<div id=“caja1”>1
</div>
1#caja1{
border-color:redfloat:left;width:25px;padding:5px 10px 4px 9px;
}
<div id=“caja1”>1
</div>
1#caja1{
border-color:redfloat:left;width:25px;padding:5px 10px 4px 9px;
}
5px
10px
4px
9px
<div id=“caja1”>1
</div>
1#caja1{
border-color:redfloat:left;width:25px;padding:5px 10px 4px 9px;margin:
}
<div id=“caja1”>1
</div>
1#caja1{
border-color:redfloat:left;width:25px;padding:5px 10px 4px 9px;margin:
}
<div id=“caja1”>1
</div>
1#caja1{
border-color:redfloat: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:redfloat:left;width:25px;
}
<div id=“caja1”>1
</div>
1#caja1{
border-color:redfloat:left;width:25px;border-width:4px;
}
<div id=“caja1”>1
</div>
1#caja1{
border-color:redfloat:left;width:25px;border-width:4px;
}
<div id=“caja1”>1
</div>
1#caja1{
border-color:redfloat:left;width:25px;border-width:4px;border-style:dotted;
}
<div id=“caja1”>1
</div>
1#caja1{
border-color:redfloat:left;width:25px;border-width:4px;border-style:dotted;
}
<div id=“caja1”>1
</div>
1#caja1{
border-color:redfloat:left;width:25px;border-width:4px;border-style:dashed;
}
<div id=“caja1”>1
</div>
1#caja1{
border-color:redfloat:left;width:25px;border-width:4px;border-style:dashed;
}
<div id=“caja1”>1
</div>
1#caja1{
border-color:redfloat:left;width:25px;border-width:4px;border-style:none;
}
<div id=“caja1”>1
</div>
1#caja1{
border-color:redfloat:left;width:25px;border-width:4px;border-style:none;
}
<div id=“caja1”>1
</div>
1#caja1{
border-color:redfloat: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 márgenes
<h1>Titulo</h1><p>Contenido</p>
IE
MF
TituloContenido
<h1>Titulo</h1><p>Contenido</p>
h1{
color:red;}p{
color:blue;}
IE
MF
TituloContenido
<h1>Titulo</h1><p>Contenido</p>
h1{
color:red;}p{
color:blue;}
IE
MF
TituloContenido
<h1>Titulo</h1><p>Contenido</p>
h1{
color:red;}p{
color:blue;}
IE
MF
TituloContenido
¿?
<h1>Titulo</h1><p>Contenido</p>
h1{
color:red;}p{
color:blue;}
IE
MF
TituloContenido
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
TituloContenido
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
TituloContenido
TituloContenido
<h1>Titulo</h1><p>Contenido</p>
h1{
color:red;margin:10px 0 10px 25px;
}p{
color:blue;margin:0 0 10px 25px;
}
IE
MF
TituloContenido
TituloContenido
<h1>Titulo</h1><p>Contenido</p>
h1{
color:red;margin:10px 0 10px 25px;
}p{
color:blue;margin:0 0 10px 25px;
}
IE
MF
TituloContenido
TituloContenido
<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
TituloContenido
TituloContenido
<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
TituloContenido
TituloContenido
Contenido
Contenido
Doce tabletas:El problema de la caja
<div id=“caja1”>1
</div>
1#caja1{
border:1px solid redwidth:25px;height:25px;
} 25px
<div id=“caja1”>1
</div>
125px
#caja1{
border:1px solid redwidth:25px;height:25px;padding:5px 10px 4px 9px;
}
<div id=“caja1”>1
</div>
1#caja1{
border:1px solid redwidth:25px;height:25px;padding:5px 10px 4px 9px;
}
5px
10px
4px
9px
25px
<div id=“caja1”>1
</div>
1#caja1{
border:1px solid redwidth: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 redwidth: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
61px1 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+71 7px
3px
2px
8px
5px
10px
4px
9px
25px
30px
40px
#caja1{
border:1px solid redwidth: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 redwidth:25px;height:25px;padding:5px 10px 4px 9px;margin:3px 7px 2px 8px;
}
¿?
¿?
IE
MF
<div id=“caja1”>1
</div>
#caja1{
border:1px solid redwidth: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 redwidth:25px;height:25px;padding:5px 10px 4px 9px;margin:3px 7px 2px 8px;
}
¿?
¿?
IE
MF
#caja1{
border:1px solid redwidth: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 redwidth: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 redwidth:25px;height:25px;padding:5px 10px 4px 9px;margin:3px 7px 2px 8px;
}/*Comienza el hack-box*/#caja{
voice-family: "\"}\"";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 redwidth:25px;height:25px;padding:5px 10px 4px 9px;margin:3px 7px 2px 8px;
}/*Comienza el hack-box*/#caja{
voice-family: "\"}\"";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 redwidth:25px;height:25px;padding:5px 10px 4px 9px;margin:3px 7px 2px 8px;
}/*Comienza el hack-box*/#caja{
voice-family: "\"}\"";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 redwidth:25px;height:25px;padding:5px 10px 4px 9px;margin:3px 7px 2px 8px;
}/*Comienza el hack-box*/#caja{
voice-family: "\"}\"";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
Top Related