Capas

Taller de capas en hojas de estilos

1.
2.
3.
4.
5.

Manejo de capas :pag. 18 del manual : manualcsshojasestilos.pdf
Capas se le llama a la etiqueta : <div>
Ejemplo:
Crear la hoja de estilo: capas.css
El contenido del archivo será:
div {color:red;font-size:40px}
6. Crear la pagina capas1.html
7. El contenido del cuerpo debe contener:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Este texto es el título del documento</title>
<link rel="stylesheet" href="capas.css">
</head>
<body>
<div>
<p>Mi texto</p>
</div>
</body>
</html>
8. Los atributos de las capas: pag. 19, 20, 21
9. Asignaremos a la capa:
Color : azul
Posición: absoluta.
Arriba: 20px
Izquierda: 50px
Ancho: 200px
Alto: 500px
Borde: 2px
Forma del borde : solido
Color del borde: gris

10. El archivo capas.css quedariaasi:
div {
color:red;
font-size:40px;
background-color:blue;
position:absolute;
border: 2px solid #CCC;
top: 30px;

11.
12.

13.
14.
15.
16.

left:50px;
width:200px;
height:500px
}
Cargar de Nuevo la pagina: capas1.html
Oculte la capa. Añadir al archivo capas.css
Visibility: hidden
El cual quedaría asi:
div {
color:red;
font-size:40px;
position:absolute;
top: 30px;
left:50px;
width:200px;
height:500px;
visibily:hidden
}
Cargar y probar.
Deje visible la capa, que valor debe tener visibility?
Para tener dos capas con diferentes atributos, que debemos usar en el archivo css?
Insertar en el archivo capas.html otra capa:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Este texto es el título del documento</title>
<link rel="stylesheet" href="capas.css">
</head>
<body>
<div>
<p>Mi texto</p>
</div>
<div>
<p> otro texto </p>
</div>
</body>
</html>

17.
18.
19.
20.

Guardar y probar.
Que ocurrió?
Quedebemos hacer?
Crear clases capa1 y capa2 con atributos diferentes:

21. En el archivo capas.css cambiarlo por:
#capa1 {
color:red;
font-size:40px;
position:absolute;
top: 30px;
left:50px;
width:200px;
height:500px
}

22.
23.
24.
25.

#capa2 {
color:green;
font-size:40px;
background-color:black;
position:absolute;
top:30px;
left:50px;
width:200px;
height:500px
}
En archivo de la pagina web quedemos hacer?
Guardar y probar.
Que ocurrio porque solo me muestra la segunda capa?
Colocar la capa 2 al lado derecho de la capa 1:
Debemos quitar la position absoluta y agregar float izquierda y derecha,
Debe quedar asi el archivo capas.css:
#capa1 {
color:red;
font-size:40px;
top: 30px;left:50px;
width:200px;
height:500px;
float:left
}

#capa2 {
color:green;
font-size:40px;
top:30px;
left:50px;
width:200px;
height:500px;
float:right;
}
26. Cargar y probar.
27. Resumiendo con el atributo margin:
margin: top right bottom left;
Los valores dados en px o %.
#capa1 {
color:red;
font-size:40px;
margin: 30px 1% 50px 2%;
width: 200px;
height:500px;
float:left
}

28.
29.
30.
31.

#capa2 {
color:green;
font-size:40px;
margin:30px 2% 50px 1%;
width:200px;
height:500px;
float:right;
}
Cargar y probar.
Ahora probar cambiando la clase capa2 float por left.
Cargar y probar, como le sale las cajas??
De la misma manera se puede usar sangría o separación del contenido interno de la
caja con padding:

padding: toppxrightpxbottompxleftpx;
32. El archive capas.css quedariaasi:
#capa1 {
color:red;
font-size:40px;
padding: 60px 2px 8px 80px;
width: 200px;
height:500px;
float:left;
}

#capa2 {
color:green;
font-size:40px;
width:200px;
height:500px;
float:left;
}
33. Guardar y probar.
34. Aplicando el atributo clear: pag. 12
Valoresposibls: none, right, left, both
#capa1 {
color:red;
font-size:40px;
width: 200px;
height:500px;
float:left;
}

#capa2 {
color:green;
font-size:40px;
width:200px;
height:500px;
clear: left;
}
35. Pruebe con los demás valores.
36. Probando atributo z-index: pag. 12 y 19
37. Crear un nuevo archivo de hoja de estilo: capasindex.css
#capa1 {
color:red;
font-size:40px;
width: 200px;
height:500px;
position:absolute;
}

#capa2 {
color:green;
font-size:40px;
width:200px;
height:500px;
position:absolute;
}
38. Guardar y probar pagina.
39. Observar, que ocurre??
40. Insertar el atributo z-index en ambas clases:
#capa1 {
color:red;

font-size:40px;
width: 200px;
height:500px;
position:absolute;
z-index:1;
}

#capa2 {
color:green;
font-size:40px;
width:200px;
height:500px;
position:absolute;
z-index:2;
}
41.
42.
43.
44.

Cargar y probar.
Ahora intercambie los valores de z-index, el primero con 2 y segundo con 1.
Cargar y probar.
Crea la hoja de estilo para la pagina con cajas que debe quedar asi:

Capas

Recommandé

Recommandé

Contenu connexe

Similaire à Capas

Similaire à Capas (20)

Plus de Nadin David Herrera

Plus de Nadin David Herrera (20)

Capas