Guía básica para entender CSS (Segunda parte)
130
-
Upload
carlos-caicedo -
Category
Documents
-
view
7.222 -
download
1
description
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)
Transcript of Guía básica para entender CSS (Segunda parte)
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
