Página inicial

Unidad 17. Estilos CSS Avanzado (VI)


Espaciado

 

Continuando con los controles de texto tenemos la propiedad word-spacing que establece la separación entre las palabras de un texto.

Este texto tiene una separación de 18 píxeles entre sus palabras.

Este, sin embargo, tiene una separación de -5 píxeles.

 

También podemos utilizar la propiedad letter-spacing para establecer la distancia aplicada entre los caracteres del texto:

Este texto tiene una separación de 5 píxeles entre sus palabras.

Este, sin embargo, tiene una separación de -2 píxeles.

 

vertical-align establece la alineación vertical del texto. Puede tomar los valores baseline, sub, super, top, text-top, middle, bottom, text-botom.

baseline, sub, super, top, text-top, middle, bottom, text-bottom

Observa como los valores sub, super, text-bottom y text-top toman como referencia el tamaño del texto, mientras que top, middle y bottom toman como referencia el alto del párrafo completo (en este caso lo marca la imagen de aulaClic).

 

line-height indica el alto de línea del texto, igual que el resto de propiedades puedes establecer esta altura en píxeles, ems o puntos.

Este texto tiene un alto de línea de 30 píxeles. Puedes ver que la separación entres estas líneas es mayor que la definida por defecto.

Este texto tiene un alto de línea de 10 píxeles. Puedes ver que la separación entres estas líneas es menor que la definida por defecto.

Si estableces simplemente valores numéricos podrás indicar el alto respecto a su tamaño normal. Por ejemplo:

p { line-height: 2; }

Esta línea muestra el texto con un interlineado doble. Si hubiesemos escrito 1.5 el interlineado sería un 50% más alto de lo normal.

 

 

text-align establece la alineación horizontal del texto. Sus valores ya te deben ser familiares: left, right, center y justify.

Este texto está alineado a la izquierda con left.

Este texto está alineado a la derecha con right.

Este texto está alineado al centro con center.

Este texto está justificado, ambos márgenes del texto tocarán los bordes. Si es necesario estirar las líneas se hará.

 

text-indent indica el tamaño de identación (o sangría) del texto. Tomará valores en puntos, píxeles o ems, como prefieras.

Texto identado 24px

Texto identado 48px

Texto identado 72px

 

white-space, esta propiedad es muy útil para evitar que el ancho del navegador modifique el ancho de las líneas del texto.

Puede tomar el valor nowrap para que el texto se muestre en una sóla línea sin insertar saltos no deseados:

Este texto no tiene saltos de línea, así que se mostrará en toda su anchura aunque el navegador sea más estrecho. Haz más pequeña la ventana para probarlo.

 

También puedes establecer esta propiedad al valor pre. En este caso todos los espacios insertados en el texto se mostrarán y no se convertirán en uno sólo como ocurre normalmente:

En este texto podemos introducir tantos espacios como queramos. Da igual si son más de uno, se mostrarán igualmente.

Este último valor no funciona correctamente en Internet Explorer así que es recomendable utilizar la entidad HTML ( ) para mostrar más de un espacio.

 




  Ir a la página anterior Índice del curso  Ir a la siguiente página  

Pág. 17.6

© aulaClic. Todos los derechos reservados. Free Computer tutorials. Prohibida la reproducción por cualquier medio.
Agosto - 2006.