Capas

  • 178 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
178
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 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;
  • 2. 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; background-color:blue; position:absolute; border: 2px solid #CCC; 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:
  • 3. 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 } 22. 23. 24. 25. #capa2 { color:green; font-size:40px; background-color:black; position:absolute; border: 2px solid #CCC; 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; background-color:blue; border: 2px solid #CCC; top: 30px;left:50px; width:200px; height:500px; float:left }
  • 4. #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 } 28. 29. 30. 31. #capa2 { color:green; font-size:40px; background-color:black; border: 2px solid #CCC; 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:
  • 5. padding: toppxrightpxbottompxleftpx; 32. El archive capas.css quedariaasi: #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 Valoresposibls: 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; }
  • 6. #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 19 37. 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;
  • 7. 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. 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: