Unidad 12. Hojas de estilo (II)


Las propiedades

 

Vamos a ver algunas propiedades que pueden especificarse en los estilos, así como los valores que pueden tomar.

 

Familia de la fuente:

La propiedad es font-family.

Puede tomar como valor varios nombres de fuentes, separados por comas, como pueden ser arial, helvetica, etc. La ventana de definir una familia de fuentes es que si el ordenador del visitante no tiene instalada la primera fuente, entonces se aplicará la segunda, así sucesivamente hasta encontrar una de las fuentes.

 

Grosor del texto:

La propiedad es font-weight.

Sus valores pueden ser: bold (negrita), bolder (mas negrita), lighter (ligera) o
un número del 100 al 900.

 

Tamaño de la fuente:

La propiedad es font-size.

Puede tomar como valor un número.

 

Espacio entre líneas:

La propiedad es line-height.

Puede tomar como valor un número.

 

Espacio entre caracteres:

La propiedad es letter-spacing.

Puede tomar como valor un número.

 

Estilo de la fuente:

La propiedad es font-style.

Puede tomar como valor italic, cuando se desee que el texto aparezca en cursiva.

 

Decoración de la fuente:

La propiedad es text-decoration.

Puede tomar como valor none (ninguno), underline (subrayado), line-through (una línea encima), overline (tachado) o blink (parpadeo).

Si se aplica none a los hiperenlaces, puede evitarse que aparezcan subrayados.

 

Transformar el texto:

La propiedad es text-transform.

Puede tomar como valor capitalize (la inicial de cada palabra aparecerá en mayúsculas), uppercase (todo en mayúsculas) o lowercase (todo en minúsculas).

 

Alineación del texto:

La propiedad es text-align.

Puede tomar como valor center (centrado), left (izquierda), right (derecha) o justify (justificado).

 

Sangrado del texto:

La propiedad es text-indent.

Puede tomar como valor un número.

 

Color:

La propiedad es color.

Puede tomar como valor un número en hexadecimal.

Si se aplica esta propiedad a los hiperenlaces, serán de este color, en lugar de los indicados por los atributos link (vínculo), vlink (vínculo activo), y alink (vínculo visitado) de la etiqueta <body>.

 

Color de fondo:

La propiedad es background-color.

Puede tomar como valor un número en hexadecimal.

 

Imagen de fondo:

La propiedad es background-image.

La ruta y el nombre de la imagen han de aparecer entre paréntesis, después de la palabra url.

 

Márgenes:

Las propiedades son margin-top (margen superior), margin-right (margen derecho), margin-bottom (margen inferior), margin-left (margen izquierdo), o margin (los valores de los márgenes superior, derecho, inferior e izquierdo, separados por espacios).

Pueden tomar como valor un número (cuatro números separados por espacios en el caso de margin).

 

Ancho de bordes:

La propiedad es border-width.

Puede tomar como valor un número.

 

Color del borde:

La propiedad es border-color.

Puede tomar como valor un número en hexadecimal.

 

No hay que olvidar, en el caso de los valores numéricos, especificar la unidad de medida a utilizar: cm (centímetros), pt (puntos), px (píxeles), o % (porcentaje).

Existen muchas otras propiedades además de éstas. En el tema de capas puedes consultar las propiedades que se pueden definir sobre ellas en las hojas de estilo (z-index, visibility, etc.).

 

Para practicar los distintos aspectos explicados en el tema puedes realizar el Ejercicio paso a paso Crear hoja de estilos.

  Ejercicios del Tema 12.

  Prueba evaluativa del Tema 12.

Atrás  Inicio  Adelante


.