-
Tutorial para el modelo HTML y CSS Box
-
El modelo de caja permite a los desarrolladores crear sitios web en los que el área ocupada por los elementos HTML está bien definido. Cada elemento en un documento HTML puede tener CSS (Cascading Style Sheet) propiedades declaradas, la determinación de anchura, altura de relleno, márgenes y fronteras. El código HTML para una página Web determina el contenido y la estructura de la página, como texto e imágenes, mientras que el CSS determina la forma en la página debe ser presentado dentro del navegador del usuario. HTML y CSS utilizan el modelo de caja para implementar diseños de página web.Instrucciones
1 Crear la página HTML. Abra un nuevo archivo en un editor de texto y guardarlo "pagina.html" o cualquier otro nombre que desee, siempre y cuando se utiliza ".html" como la extensión. Inserte el siguiente esquema:
<Html>
<Head>
<Link rel = "stylesheet" type = "text / css" href = "pagestyle.css" />
</ Head>
<Body>
<Div id = "contenido">
<Div class = "style1"> Aquí está algo de contenido </ div>
<Div class = "style2"> Aquí es más contenido </ div>
</ Div>
</ Body>
</ Html>
La sección de cuerpo puede incluir cualquier contenido que necesita en su página, este sencillo ejemplo es sólo para demostración.
2 Cree el documento CSS. Abra un nuevo archivo en un editor de texto y guardarlo con el nombre de "pagestyle.css" para que coincida con el atributo "href" en su sección de cabecera HTML. Escriba el siguiente código:
contenido {
background-color: # FFFF00;}div.style1 {
Anchura: 100px;
altura: 100px;
background-color: # FF0000;}
div.style1 {
Anchura: 200px;
altura: 200px;
background-color: # 0000FF;}
Los colores de fondo se incluyen de manera que se puede ver de un vistazo qué partes de la página están ocupadas por los elementos. Guarde el archivo en el mismo directorio que la página HTML y abra la página en un navegador Web. Debería ver los elementos que se muestran con colores de fondo.
3 Agregar relleno a sus elementos. Agregue la propiedad de relleno para las declaraciones CSS para cada una de las dos clases de elemento "div" en su página de la siguiente manera:
div.style1 {
Anchura: 100px;
altura: 100px;
background-color: # FF0000;
padding: 10%;}
div.style1 {
Anchura: 200px;
altura: 200px;
background-color: # 0000FF;
padding: 5px 10px 15px 20px;}
La primera estilo tiene la misma cantidad de relleno en cada uno de sus cuatro lados, representado como un porcentaje de la anchura del elemento. El segundo estilo utiliza una medición fijo en píxeles y tiene diferentes cantidades por cada lado, empezando por la parte superior y que se mueven alrededor en una dirección hacia la derecha. Guarde el archivo CSS y actualiza la página en su navegador para ver la diferencia.
4 Añadir bordes a sus elementos. Añadir una propiedad frontera a sus declaraciones CSS de la siguiente manera:
div.style1 {
Anchura: 100px;
altura: 100px;
background-color: # FF0000;
padding: 10%;
frontera: 1px solid # 00FF00;}
div.style1 {
Anchura: 200px;
altura: 200px;
background-color: # 0000FF;
padding: 5px 10px 15px 20px;
frontera: 5px doble # 000000;}
Hay muchas configuraciones diferentes para las fronteras en HTML. Guarde el archivo CSS y actualiza la página en el navegador para ver el borde aparece alrededor de cada elemento. La frontera se encuentra fuera del elemento y su relleno.
5 Añadir márgenes a sus elementos. Añadir propiedades de margen a sus reglas CSS de la siguiente manera:
div.style1 {
Anchura: 100px;
altura: 100px;
background-color: # FF0000;
padding: 10%;
frontera: 1px solid # 00FF00;
margen: 5%;}
div.style1 {
Anchura: 200px;
altura: 200px;
background-color: # 0000FF;
padding: 5px 10px 15px 20px;
frontera: 5px doble # 000000;
margen: 5px 10px;}
La primera estilo utiliza la misma anchura de margen en cada lado, pero el segundo estilo utiliza dos anchos diferentes. Cuando se suministran dos valores, el primero dicta anchura del margen para la parte superior e inferior del elemento, el segundo para los lados izquierdo y derecho. Guarde el archivo y ver la página en su navegador. Debería ver los huecos que aparecen fuera de las fronteras de cada elemento.
Consejos y advertencias
- El uso de colores de fondo es particularmente útil mientras está desarrollando una página. Si no desea que se muestren de forma permanente puede eliminarlos una vez que se han creado los diseños.
- No desarrollen en un navegador Web y dejar de una vez que su página tenga el aspecto que desea. Es casi seguro que aparece de forma diferente en otros navegadores, por lo que la prueba es de vital importancia.
