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:
Top Related