Capas

Taller de capas en hojas de estilos

1. Manejo de capas :pag. 18 del manual : manualcsshojasestilos.pdf2. Capas se le llama a la etiqueta : <div>3. Ejemplo:4. Crear la hoja de estilo: capas.css5. El contenido del archivo será:

div {color:red;font-size:40px}6. Crear la pagina capas1.html7. 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, 219. Asignaremos a la capa:

Color : azulPosición: absoluta.Arriba: 20pxIzquierda: 50pxAncho: 200pxAlto: 500pxBorde: 2pxForma del borde : solidoColor 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;

left:50px;width:200px;height:500px}

11. Cargar de Nuevo la pagina: capas1.html12. Oculte la capa. Añadir al archivo capas.css

Visibility: hiddenEl cual quedaría asi:div {color:red;font-size:40px;background-color:blue;position:absolute;border: 2px solid #CCC;top: 30px;left:50px;width:200px;height:500px;visibily:hidden}

13. Cargar y probar.14. Deje visible la capa, que valor debe tener visibility?15. Para tener dos capas con diferentes atributos, que debemos usar en el archivo css?16. 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. Guardar y probar.18. Que ocurrió?19. Quedebemos hacer?20. Crear clases capa1 y capa2 con atributos diferentes:

21. En el archivo capas.css cambiarlo por:

#capa1 {color:red;font-size:40px;background-color:blue;position:absolute;border: 2px solid #CCC;top: 30px;left:50px;width:200px;height:500px}

#capa2 {color:green;font-size:40px;background-color:black;position:absolute;border: 2px solid #CCC;top:30px;left:50px;width:200px;height:500px}

22. En archivo de la pagina web quedemos hacer?23. Guardar y probar.24. Que ocurrio porque solo me muestra la segunda capa?25. 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;background-color:blue;border: 2px solid #CCC;top: 30px;left:50px;width:200px;height:500px;float:left }

#capa2 {color:green;font-size:40px;background-color:black;border: 2px solid #CCC;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;background-color:blue;border: 2px solid #CCC;margin: 30px 1% 50px 2%;width: 200px;height:500px;float:left }

#capa2 {color:green;font-size:40px;background-color:black;border: 2px solid #CCC;margin:30px 2% 50px 1%;width:200px;height:500px;float:right;}

28. Cargar y probar.29. Ahora probar cambiando la clase capa2 float por left.30. Cargar y probar, como le sale las cajas??31. De la misma manera se puede usar sangría o separación del contenido interno de la

caja con padding:

padding: toppx rightpx bottompx leftpx;

32. El archive capas.css quedaria asi:

#capa1 { color:red; font-size:40px; background-color:blue; border: 2px solid #CCC; margin: 30px 1% 50px 2%; padding: 60px 2px 8px 80px; width: 200px; height:500px; float:left; }

#capa2 { color:green; font-size:40px; background-color:black; border: 2px solid #CCC; margin:30px 2% 50px 0%; padding: 60px 2px 8px 80px; width:200px; height:500px; float:left; }

33. Guardar y probar.34. Aplicando el atributo clear: pag. 12

Valores posibls: none, right, left, both

#capa1 { color:red; font-size:40px; background-color:blue; border: 2px solid #CCC; margin: 30px 1% 50px 2%; padding: 60px 2px 8px 80px; width: 200px; height:500px; float:left; }

#capa2 { color:green; font-size:40px; background-color:black; border: 2px solid #CCC; margin:30px 2% 50px 0%; padding: 60px 2px 8px 80px; width:200px; height:500px; clear: left; }

35. Pruebe con los demás valores.36. Probando atributo z-index: pag. 12 y 1937. Crear un nuevo archivo de hoja de estilo: capasindex.css

#capa1 { color:red; font-size:40px; background-color:blue; border: 2px solid #CCC; margin: 30px 2% 50px 2%; padding: 60px 2px 8px 80px; width: 200px; height:500px; position:absolute; }

#capa2 { color:green; font-size:40px; background-color:black; border: 2px solid #CCC; margin:30px 2% 50px 2%; padding: 60px 2px 8px 80px; 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;

background-color:blue;

border: 2px solid #CCC;

margin: 30px 2% 50px 2%;

padding: 60px 2px 8px 80px;

width: 200px;

height:500px;

position:absolute;

z-index:1;

}

#capa2 {

color:green;

font-size:40px;

background-color:black;

border: 2px solid #CCC;

margin:30px 2% 50px 2%;

padding: 60px 2px 8px 80px;

width:200px;

height:500px;

position:absolute;

z-index:2;

}

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

Capas

Documents

Transcript of Capas