Tema 9 - Estructura con css
26
ESTRUCTURAS CON HTML Y CSS
-
Upload
pamela-rodriguez -
Category
Documents
-
view
889 -
download
0
Transcript of Tema 9 - Estructura con css
ESTRUCTURAS CON HTML Y CSS
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.
Recordando terminología CSS
h1 { font-size: 20px;
}
1
3
2
Recordando terminología CSS
¿Cuáles son las cinco maneras de manejar
objetos CSS?
El elemento <DIV>
• Es el elemento más útil de HTML
• Se emplea con fines estructurales
• Plantea una sub-estructura en un documento HTML
<!DOCTYPE html> <html lang="es">
<head> <link href="styles/style.css" type="text/css" rel="stylesheet" />
</head> <body> </body>
</html>
<body> <div id="container">
<div id="header">
</div> <div id="content">
</div> <div id="footer">
</div> </div>
</body>
Container
Header
Footer
Content
<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>
El modelo de caja
Contenido
Documento HTML
Elemento HTML
El modelo de caja
Contenido
Documento HTML
Elemento HTMLmargin
padding
border
<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>
#container{ background-color: #CCCCCC;
} #header{
background-color: #AAAAAA; } #content{
background-color: #336600; } #footer{
background-color: #6600FF; }
#container{ background-color: #CCCCCC; border: 3px solid #444444; padding: 15px;
}
border: 3px solid #444444;
Grosor Tipo de borde
Color
border-right: 3px solid #444444; border-left: 2px dotted #0000FF; border-bottom: 6px dashed #FF0000; border-top: 10px double #336600;
padding: 15px;
padding: 15px 4px;
padding: 15px 0 10px 2px;
padding-top: 15px; padding-right: 0; padding-bottom: 10px; padding-left: 2px;
B, T R, L
T R B L
#container{ background-color: #CCCCCC;
} #header{
background-color: #AAAAAA; } #content{
background-color: #336600; margin: 20px;
} #footer{
background-color: #6600FF; }
#container{ background-color: #CCCCCC;
} #header{
background-color: #AAAAAA; } #content{
background-color: #336600; margin: 20px;
} #footer{
background-color: #6600FF; }
margin: 15px;
margin: 15px 4px;
margin: 15px 0 10px 2px;
margin-top: 15px; margin-right: 0; margin-bottom: 10px; margin-left: 2px;
B, T R, L
T R B L
