Your SlideShare is downloading. ×
Capas
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Capas

196
views

Published on


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
196
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
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: