Aunque ya no es muy frecuente que se hable específicamente de capas en el diseño HTML, quiero hacer mención de esta poderosa herramienta para el diseño web y empezare por mencionar que HTML solamente proporcionará la estructura, pero, la forma y el estilo lo aportará CSS.
Una capa puede ser algo tan sencillo como definir una división en la página web, por ejemplo: yo quiero una división en este blog con color corinto, fuente arial y tamaño 32px y color de texto blanco, como este:
El código que use es este:
<div style="background: #990000; color: white; font-family: arial; font-size: 32px;">
Ejemplo de capa sencilla
</div>
Pero si queremos algo más estructurado tenemos que esforzarnos un poco más.
Por ejemplo:
El código que use para esto es el siguiente:
<style>
#contenedor {
height: 500px;
margin:auto;
width:500px;
}
#encabezado {
color:#FFF;
font-size:32px;
background: #990000;
height:100px;
line-height:100px;
position:absolute;
text-align:center;
width:500px;
}
#nav{
color:#FFF;
font-size:18px;
background: #F60;
height:50px;
line-height: 50px;
margin-top:100px;
position:absolute;
text-align:center;
width:500px;
}
#contenido{
color:#FFF;
font-size:18px;
background: #212121;
height:250px;
margin-top:150px;
position:absolute;
text-align:center;
width:500px;
}
#pie{
color:#FFF;
font-size:32px;
background: #60F;
height:100px;
line-height:100px;
margin-top: 400px;
position:absolute;
text-align:center;
width:500px;
}
</style>
Este código esta escrito en el mismo documento, específicamente entre las etiquetas <head> y </head>, para que funcione se utiliza la etiqueta <style> y se cierra con </style>.
La primera parte de este código (#contenedor) configura la primera capa y principal de nuestra página, la cual contendra el resto de las capas, se configuro con una altura de 500px (height: 500px;), una anchura de 500px (width: 500px;) y centrada (margin: auto).
La segunda parte corresponde #encabezado y se configuró de la siguiente manera:
color:#FFF; - color de texto blanco
font-size:32px; - tamaño de fuente 32px
background: #990000; - color de fondo corinto
height:100px; - altura 100px
line-height:100px; - espaciado interlineal 100px (esto practicamente centrará el texto de forma vertical)
position:absolute; - posición dentro de la capa contenedor absoluta (esto es porque va dentro de otra capa)
text-align:center; - alinación del texto al centro
width:500px; - anchura 500px
La tercera parte corresponde #nav y se configuró de forma similar a la anterior, la única variación que hay es en estos atributos:
font-size:18px; - se modificó el tamaño de fuente a 18px
background: #F60; - el color de fondo es anaranjado
height:50px; - la altura es de 50px
line-height: 50px; el espaciado interlineal es de 50px
margin-top:100px; - el margen superior indica el espacio que habrá desde el inicio de la capa contenedor hasta donde debe empezar la capa nav, en éste caso es de 100px.
Los cambios en la capa #contenido son:
background: #212121; - color de fondo negro (un poco mas suave)
height:250px; - altura 250px
margin-top:150px; - en este caso se incrementa el alto de la capa nav más el alto de la capa encabezado, dando como resultado 150px.
Y por último vemos la capa #pie que es similar en este caso a la capa encabezado, el único cambio que haremos será en el fondo, de esta manera:
background: #60F;
Este es el código HTML que configuramos.
<div id="contenedor">
<div id="encabezado">
Encabezado
</div>
<div id="nav">
Navegación
</div>
<div id="contenido">
Contenido
</div>
<div id="pie">
Pie de página
</div>
</div>
Este código debe ser escrito entre las etiquetas <body> y </body> y para colocar cada capa es necesario utilizar la etiqueta <div> de la siguiente forma:
<div id="nombre_de_la_capa"> Contenido de la capa </div>
Bueno espero que esto les ayude a comprender un poquito más el tema de las capas, para ver un ejemplo completo y mas efectos sobre las capas con CSS pueden ver la segunda y tercera entrada de este blog.
Una capa puede ser algo tan sencillo como definir una división en la página web, por ejemplo: yo quiero una división en este blog con color corinto, fuente arial y tamaño 32px y color de texto blanco, como este:
Ejemplo de capa sencilla
El código que use es este:
<div style="background: #990000; color: white; font-family: arial; font-size: 32px;">
Ejemplo de capa sencilla
</div>
Pero si queremos algo más estructurado tenemos que esforzarnos un poco más.
Por ejemplo:
Encabezado
Contenido
Pie de página
El código que use para esto es el siguiente:
<style>
#contenedor {
height: 500px;
margin:auto;
width:500px;
}
#encabezado {
color:#FFF;
font-size:32px;
background: #990000;
height:100px;
line-height:100px;
position:absolute;
text-align:center;
width:500px;
}
#nav{
color:#FFF;
font-size:18px;
background: #F60;
height:50px;
line-height: 50px;
margin-top:100px;
position:absolute;
text-align:center;
width:500px;
}
#contenido{
color:#FFF;
font-size:18px;
background: #212121;
height:250px;
margin-top:150px;
position:absolute;
text-align:center;
width:500px;
}
#pie{
color:#FFF;
font-size:32px;
background: #60F;
height:100px;
line-height:100px;
margin-top: 400px;
position:absolute;
text-align:center;
width:500px;
}
</style>
Este código esta escrito en el mismo documento, específicamente entre las etiquetas <head> y </head>, para que funcione se utiliza la etiqueta <style> y se cierra con </style>.
La primera parte de este código (#contenedor) configura la primera capa y principal de nuestra página, la cual contendra el resto de las capas, se configuro con una altura de 500px (height: 500px;), una anchura de 500px (width: 500px;) y centrada (margin: auto).
La segunda parte corresponde #encabezado y se configuró de la siguiente manera:
color:#FFF; - color de texto blanco
font-size:32px; - tamaño de fuente 32px
background: #990000; - color de fondo corinto
height:100px; - altura 100px
line-height:100px; - espaciado interlineal 100px (esto practicamente centrará el texto de forma vertical)
position:absolute; - posición dentro de la capa contenedor absoluta (esto es porque va dentro de otra capa)
text-align:center; - alinación del texto al centro
width:500px; - anchura 500px
La tercera parte corresponde #nav y se configuró de forma similar a la anterior, la única variación que hay es en estos atributos:
font-size:18px; - se modificó el tamaño de fuente a 18px
background: #F60; - el color de fondo es anaranjado
height:50px; - la altura es de 50px
line-height: 50px; el espaciado interlineal es de 50px
margin-top:100px; - el margen superior indica el espacio que habrá desde el inicio de la capa contenedor hasta donde debe empezar la capa nav, en éste caso es de 100px.
Los cambios en la capa #contenido son:
background: #212121; - color de fondo negro (un poco mas suave)
height:250px; - altura 250px
margin-top:150px; - en este caso se incrementa el alto de la capa nav más el alto de la capa encabezado, dando como resultado 150px.
Y por último vemos la capa #pie que es similar en este caso a la capa encabezado, el único cambio que haremos será en el fondo, de esta manera:
background: #60F;
Este es el código HTML que configuramos.
<div id="contenedor">
<div id="encabezado">
Encabezado
</div>
<div id="nav">
Navegación
</div>
<div id="contenido">
Contenido
</div>
<div id="pie">
Pie de página
</div>
</div>
Este código debe ser escrito entre las etiquetas <body> y </body> y para colocar cada capa es necesario utilizar la etiqueta <div> de la siguiente forma:
<div id="nombre_de_la_capa"> Contenido de la capa </div>
Bueno espero que esto les ayude a comprender un poquito más el tema de las capas, para ver un ejemplo completo y mas efectos sobre las capas con CSS pueden ver la segunda y tercera entrada de este blog.
No hay comentarios:
Publicar un comentario