EL MARGEN - MARGIN

La propiedad margin se utiliza para definir el ancho del espacio que se encuentra entre el borde de un elemento y el elemento cercano a él.

Esta propiedad define el ancho del margen para los cuatro lados de la caja.

Margin-Top: Define el ancho del margen superior.

Margin-Right: Define el ancho del margen derecho.

Margin-Bottom: Define el ancho del margen inferior.

Margin-Left: Define el ancho del margen izquierdo.

EJEMPLO:

Vamos a definir el ancho de cada lado por separado.

FAMILIA DE FUENTES - FONT-FAMILY

Para definir el tipo de fuente usamos la propiedad font-family.

Es recomendable usar un tipo de fuente común, que todos los navegadores reconozcan (EJEMPLO.: Arial, Verdana, Helvetica, sans serif, etc.).

Nota: debemos utilizar comas entre los valores.

Los posibles valores para definir las familias de fuentes las más comunes son:

•  Serif
• ·sans-serif
• cursive
• fantasy
• monospace

Los posibles valores para definir las familias de fuentes genérico son:

• serif
• sans-serif
• cursive
• fantasy
• monospace

EJEMPLO:

Vamos a definir una familia para una fuente.

INTENSIDAD DE LAS FUENTES - FONT-WEIGHT

Una característica muy útil es el control de la intensidad de las fuentes. Para ello utilizamos la propiedad Font-Weight.

Los posibles valores para definir los fondos:

• Normal
• Bold.
• Bolder.
• Lighter.

EJEMPLO:

Vamos a aplicar intensidad a la fuentes del elemento h2 de esta pagina.

ESTILOS DE LAS FUENTES

La propiedad Font-style nos sirve para definir un estilo normal, oblicuo o italic.

Los posibles valores para definir los estilos:

• Normal
• italic
• oblique

EJEMPLO:

Vamos a definir el estilo del elemento h3 de este ejemplo.

TAMAÑO DE LAS FUENTES - FONT-SIZE

Controlar el tamaño de las fuentes suele ser de mucha utilidad. La propiedad encargada de eso es font-size.

Los posibles valores para definir el tamaño de las fuentes:

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large
• larger
• smaller
• tamaño
• %

EJEMPLO:

Vamos a ver como se comporta cada uno de los valores de la propiedad font-size.

PROPIEDAD TEXT-ALIGN

Establece la alineación del contenido de un elemento de bloque

Uno y sólo uno de los siguientes valores:

• left
• right
• center
• justify
• inherit

Nota: A pesar de su nombre, la propiedad text-align no sólo controla la alineación del texto. En realidad, esta propiedad establece la alineación de los contenidos (texto, imágenes) que se encuentran dentro de un elemento de bloque.

EJEMPLO APLICADO UN DIV:

<div style="text-align:left">Alinear izquierda</div>

<div style="text-align:right">Alinear derecha</div>

<div style="text-align:center">Centrar</div>

Usando un archivo de hoja de estilo y class:

En la hoja de estilo podemos crear las siguientes clases:

.centrar { text-align:center; }

.izquierda { text-align:left; }

.derecha { text-align:right; }

EJEMPLO:

RELLENO CON CSS

El relleno se comporta exactamente igual que los márgenes con la excepción que deja el espacio blanco entre el elemento y los bordes, o en caso que no posea bordes, con el margen.

La propiedad padding.- se utiliza para definir el ancho del espacio que se encuentra entre el elemento y el borde del mismo.

El relleno de cada lado:

• padding-top
• padding-right
• padding-bottom
• padding-left

Estas propiedades se utilizan para definir los anchos de los rellenos de cada uno de los bordes por separado, se puedes definir los 4 lados o solo aquellos que necesites.

ANEXOS DE LOS EJERCICIOS REALIZADOS