CSS: definir el estilo del texto (3)

Un nuevo vídeo de iDESWEB que se ofrecerá a través de la iniciativa Actívate patrocinada por Google.

[kml_flashembed movie=”http://www.youtube.com/v/sui6ru74PT8″ width=”560″ height=”315″ wmode=”transparent” /]

Transcripción:

Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo que forma parte del curso “Introducción al desarrollo web”, te voy a explicar las principales propiedades de CSS que se existen para definir el estilo del texto.

En la primera parte de este vídeo, vimos la principales propiedades que comienzan con el prefijo font: font-family, font-size, font-weight, font-style y font-variant.

En la segunda parte de este vídeo, vimos las propiedades que comienzan con el prefijo text: text-aling, text-indent, text-decoration y text-transform.

En este vídeo vamos a ver cuatro propiedades que se emplean para configurar la presentación del texto: letter-spacing, word-spacing, line-height y white-space.

La propiedad letter-spacing define la distancia de separación entre los caracteres de un texto.

El espacio se puede indicar utilizando las unidades de medida que se emplean para indicar el tamaño del texto con la propiedad font-size.

Esta propiedad puede tomar un valor negativo, tal como se muestra en este ejemplo.

Hay que llevar mucho cuidado con su uso, ya que los resultados pueden ser desastrosos, tal como se puede ver en este ejemplo.

La propiedad word-spacing es similar a letter-spacing, pero define el espacio entre las palabras.

Al igual que letter-spacing, la distancia de separación se puede indicar utilizando las unidades de medida que se emplean para indicar el tamaño del texto con la propiedad font-size.

Esta propiedad también puede tomar valores negativos y los resultados también pueden ser desastrosos, así que se tiene que usar con mucho cuidado.

La propiedad line-height especifica la altura mínima entre las líneas de texto en un elemento como puede ser un párrafo.

Otra vez, la altura de la línea se puede indicar utilizando las unidades de medida que se emplean para indicar el tamaño del texto con la propiedad font-size.

En este ejemplo, el primer párrafo se visualiza con la altura por defecto, en el segundo párrafo se ha aumentado a 1.5em o un 150%, y en el último párrafo a 2em o un 200%.

Y ya por último la propiedad white-space que define cómo se comportan los espacios en blanco dentro de un elemento.

En HTML, los espacios en blanco y los saltos de línea no son significativos.

Este párrafo se representa de esta forma en un navegador web: entre las palabras “uno”, “dos”, “tres”, “cuatro”, “cinco” y “seis” sólo se visualiza un espacio en blanco, aunque en el código haya más espacios. Y la frase “Y esto está en otra línea” no aparece en otra línea, aparece en la primera línea.

Este comportamiento se puede modificar con la propiedad white-space, que puede tomar los valores normal, pre, nowrap, pre-wrap y pre-line.

En este ejemplo, al párrafo del ejemplo anterior se le aplica la propiedad “white-space: pre”, que produce que los espacios en blanco y los saltos de línea se respeten. Es equivalente a la etiqueta <pre> de HTML para definir texto preformateado.

El segundo párrafo es la forma normal de visualizar un párrafo: si el texto del párrafo no cabe en el ancho disponible, el navegador introduce un salto de línea para que el texto continúe en la línea siguiente.

Sin embargo, la propiedad “white-space: nowrap” anula este comportamiento y la línea no se corta, continúa más allá del ancho de la ventana del navegador y se tiene que mostrar la barra de desplazamiento horizontal.

Ya para terminar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico sergio.lujan@ua.es y a través de mi cuenta en Twitter @sergiolujanmora.

Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es.

Muchas gracias por tu atención.

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *