Recomendados
Más contenido relacionado
La actualidad más candente
Similar a Tema 9 - Estructura con css
Similar a Tema 9 - Estructura con css (20)
Más de Pamela Rodriguez
Más de Pamela Rodriguez (9)
Tema 9 - Estructura con css
- 1. ESTRUCTURAS CON HTML Y CSS
- 2. Reglas generales de CSS • Verificar que todas las llaves abiertas estén debidamente cerradas. • Nunca omitir puntos y comas. • Utilizar nombres representativos para todas las clases.
- 3. Recordando terminología CSS 1 h1 { 3 font-size: 20px; } 2
- 4. Recordando terminología CSS ¿Cuáles son las cinco maneras de manejar objetos CSS?
- 5. El elemento <DIV> • Es el elemento más útil de HTML • Se emplea con fines estructurales • Plantea una sub-estructura en un documento HTML
- 6. <!DOCTYPE html> <html lang="es"> <head> <link href="styles/style.css" type="text/css" rel="stylesheet" /> </head> <body> </body> </html>
- 7. <body> <div id="container"> <div id="header"> </div> <div id="content"> </div> <div id="footer"> </div> </div> </body>
- 9. Container
- 10. Header Footer
- 11. Content
- 12. <body> <div id="container"> <div id="header"> <h1>Titulo de la practica</h1> </div> <div id="content"> <p>...</p> </div> <div id="footer"> ... </div> </div> </body>
- 13. El modelo de caja Documento HTML Elemento HTML Contenido
- 14. El modelo de caja Documento HTML border Elemento HTML margin padding Contenido
- 15. <body> <div id="container"> <div id="header"> <h1>Titulo de la practica</h1> </div> <div id="content"> <p>...</p> </div> <div id="footer"> ... </div> </div> </body>
- 16. #container{ background-color: #CCCCCC; } #header{ background-color: #AAAAAA; } #content{ background-color: #336600; } #footer{ background-color: #6600FF; }
- 18. #container{ background-color: #CCCCCC; border: 3px solid #444444; padding: 15px; }
- 20. border: 3px solid #444444; Color Grosor Tipo de borde border-right: 3px solid #444444; border-left: 2px dotted #0000FF; border-bottom: 6px dashed #FF0000; border-top: 10px double #336600;
- 22. padding: 15px; padding: 15px 4px; B, T R, L padding: 15px 0 10px 2px; T R B L padding-top: 15px; padding-right: 0; padding-bottom: 10px; padding-left: 2px;
- 23. #container{ background-color: #CCCCCC; } #header{ background-color: #AAAAAA; } #content{ background-color: #336600; margin: 20px; } #footer{ background-color: #6600FF; }
- 24. #container{ background-color: #CCCCCC; } #header{ background-color: #AAAAAA; } #content{ background-color: #336600; margin: 20px; } #footer{ background-color: #6600FF; }
- 26. margin: 15px; margin: 15px 4px; B, T R, L margin: 15px 0 10px 2px; T R B L margin-top: 15px; margin-right: 0; margin-bottom: 10px; margin-left: 2px;