Propiedades de Formato de Elementos de Bloque

En esta sección se exponen las opciones de formato de los elementos de bloque. Los elementos de bloque comienzan en una nueva línea. Por ejemplo, <h1> y <p> son elementos de bloque, pero <em> no lo es. Comenzaremos presentando unos ejemplos que muestren las posibilidades de formato de los elementos de bloque. Después se discutirá cada opción de formato en detalle. Para finalizar se echará un vistazo a su comportamiento respecto a la herencia de propiedades.

Formato de Bloques: Introducción y Ejemplos

Las hojas de estilo tratan a cada elemento de bloque como si estuviera rodeado de una caja. Cada caja puede tener características de estilo propias tales como márgenes, bordes, separadores y una imagen o color de fondo. Los márgenes indican la separación entre el borde de la caja y el borde del documento. Estos bordes pueden tener apariencia plana o tridimensional. Los separadores ("padding") indican la separación entre el borde de los elementos y el contenido de los mismos. También se puede fijar la anchura de los elementos de bloque, bien mediante un valor específico, o bien mediante un porcentaje de la anchura total del documento.

En este caso es redundante fijar los márgenes derecho o izquierdo y la anchura. Si se especifican la anchura y los dos márgenes, el valor del margen izquierdo tiene prioridad sobre los demás valores en caso de conflicto. En este caso el valor del margen derecho especifica la distancia máxima desde el borde derecho de elemento que lo contiene. El valor de anchura es utilizado sólo si no sobrepasa los límites de anchura del elemento que lo contiene. El alineamiento horizontal puede ser a la izquierda, derecha o centrado. Esto se consigue usando la propiedad float en CSS o la propiedad align en JavaScript. En los siguientes ejemplos se muestra el uso de márgenes, separadores, bordes, fondos y alineamiento.

Sintaxis CSS

<style type="text/css">

p {

color: #ffffff; /* blanco */

/* márgenes */

margin-left: 20%; margin-right: 20%;

/* anchura del borde */

border-top-width: 10pt; borde-bottom-width: 10pt;

border-right-width: 5pt; border-left-width: 5pt;

/* estilo y color del borde */

border-style: outset; border-color: blue;

/* separadores */

padding-top: 10pt; padding-bottom: 10pt;

padding-right: 20pt; padding-left: 20pt;

}

h3 {

/* tamaño y peso de la fuente*/

font-size: 14pt; font-weight: bold;

background-image: url("papel.jpg");

/* centra el titulo y le da una anchura del 90% */

width: 90%; float: center;

borde-color: green; borde-style: solid;

/* todas las partes del borde tienen la misma anchura */

borde-width: 10pt;

/* todos los separadores del borde son igual de anchos */

padding: 5%;

}

</style>

Sintaxis JavaScript

<style type="text/javascript">

with (tags.p) {

/* márgenes */

marginLeft="20%"; marginRight="20%";

/* anchura del borde */

borderTopWidth="10pt"; borderBottomWidth="10pt";

borderRightWidth="5pt"; borderLeftWidth="5pt";

/* estilo y color del borde */

borderStyle="outset"; borderColor="blue";

/* separadores */

paddingTop="10pt"; paddingBottom="10pt";

paddingRight="20pt"; paddingLeft="20pt";

}

with(tags.h3) {

/* tamaño y peso de la fuente*/

fontSize="14pt"; fontWeight="bold";

backgroundImage="papel.jpg";

/* centra el titulo y le da una anchura del 90% */

width="90%"; float="center";

bordeColor="green"; bordeStyle="solid";

/* todas las partes del borde tienen la misma anchura */

bordeWidths("10pt");

/* todos los separadores del borde son igual de anchos */

paddings("5%");

}

</style>

Uso de la hoja de estilo

<h3>Titulo h3 con borde sólido y fondo</h3>

<p>Los bordes se usan muy a menudo. Por ejemplo, si un bloque tiene borde resalta mucho más que si no lo tiene.</p>

<p>Este es otro párrafo con borde. Ten cuidado con los bordes, no los hagas demasiado anchos, pues de lo contrario ocuparán

demasiado espacio.</p>

Resultado del ejemplo

Titulo h3 con borde sólido y fondo

	Los bordes se usan muy a menudo. Por ejemplo, si un bloque tiene borde resalta mucho más que si no lo tiene.
	Este es otro párrafo con borde. Ten cuidado con los bordes, no los hagas demasiado anchos, pues de lo contrario ocuparán demasiado espacio.