Las propiedades CSS (textos 3ª parte)

Puff, hay que terminar con esto de una vez. Las propiedades CSS que permiten controlar los textos parecen infinitos pero esta es la última parte.

La propiedad letter-spacing establece la cantidad de espacio adicional entre los caracteres.

sintaxis en HTML
elemento {letter-spacing: valor;}
por ejemplo: p {letter-spacing: -2px;}

sintaxis en JAVASCRIPT
elemento.style.letterSpacing='valor';
por ejemplo: this.style.letterSpacing='-2px';

Los posibles valores son: normal (el valor por defecto) o una medida expresada como cm, mm, in, pt, pc, px, em o ex.

La propiedad word-spacing es similar a la anterior excepto que establece la cantidad de espacio adicional entre palabras.

sintaxis en HTML
elemento {word-spacing: valor;}
por ejemplo: p {word-spacing: 10px;}

sintaxis en JAVASCRIPT
elemento.style.wordSpacing='valor';
por ejemplo: this.style.wordSpacing='10px';

Y los posibles valores admitidos son los mismos: normal (el valor por defecto) o una medida expresada como cm, mm, in, pt, pc, px, em o ex.

Tanto letter-spacing como word-spacing añaden espacio al espacio por defecto de las fuentes que utilizamos por lo tanto, se pueden usar valores positivos (para aumentarlo) como negativos (para disminuirlo):

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

La propiedad line-heigh establece la distancia entre las "líneas bases" de un texto.

sintaxis en HTML
elemento {line-height: valor;}
por ejemplo: p {line-height: 20px;}

sintaxis en JAVASCRIPT
elemento.style.lineHeight='valor';
por ejemplo: this.style.lineHeight='20px';

Los valores posibles son los mismo que para las otras propiedades: cm, mm, in, pt, pc, px, em o ex o un porcentaje.

Esta propiedad, por ejemplo, nos permite centrar verticalmente los textos dentro de un bloque sin distorsionar la fuente ya que no "alarga" los caracteres sino el espacio que ocupan.

En este ejemplo, el DIV (fondo rojo) tiene una altura de 50 pixeles:

Por defecto, el texto no se centra verticalmente:

Ut wisi enim ad minim veniam.

Intentamos utilizar la propiedad vertical-align pero tampoco funciona:

Ut wisi enim ad minim veniam.

Pero, si añadimos la propiedad line-height con un valor igual a la altura del bloque, todo se resuelve:

Ut wisi enim ad minim veniam.

La propiedad white-space se utiliza para indicar si las líneas de texto se "cortan" o no y cómo deben ser mostrados los espacios en blanco .

sintaxis en HTML
elemento {white-space: valor;}
por ejemplo: p {white-space: nowrap;}

sintaxis en JAVASCRIPT
elemento.style.whiteSpace='valor';
por ejemplo: this.style.whiteSpace='nowrap';

Podemos usar tres valores distintos:

normal si el texto excede el espacio del contenedor, las líneas se cortan automáticamente y el texto continúa en otra línea (es el valor por defecto)
nowrap el texto se escribe en una sola línea.
pre se utiliza para preservar los saltos de línea y los espacios extras

Por defecto, los saltos de línea, los espacios extras (más de uno separando palabras) y las tabulaciones no tienen ningún efecto en una página web. Si escribimos:
dos palabras
veremos:
dos palabras
los espacios extras no se tendrán en cuenta.

Si queremos agregar espacios extras, debemos utilizar un código especial (nonbreaking space entity) y escribir   a menos que establezcamos la propiedad white-space como pre.

En Blogger, si escribimos:

un párrafo



otro párrafo

lo veremos ya que, normalmente, está marcada la opción:

Convertir saltos de línea Sí No
Si se ha seleccionado “Sí”, los retornos forzados únicos introducidos en el “Editor de entradas” se sustituirán por códigos únicos <br /> y los retornos forzados dobles se sustituirán por dos códigos ( <br /><br /> ).

Es una facilidad del editor pero no es lo normal. En una página web, debemos usas la etiqueta <br/> para separar una línea de otra. Incluso en Blogger hay que hacerlo cuando trabajamos con la plantilla o con los elementos de la sidebar.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

En Internet Explorer hay una propiedad especial llamada word-wrap que permite establecer la forma en que se manejan los saltos de línea y tiene dos valores posibles: normal y break-word.

sintaxis en HTML
elemento {word-wrap: valor;}
por ejemplo: p {word-wrap: normal;}

sintaxis en JAVASCRIPT
elemento.style.wordWrap='valor';
por ejemplo: this.style.wordWrap='normal';

color establece el color de los textos.

sintaxis en HTML
elemento {color: valor;}
por ejemplo: p {color: #FF0000;}

sintaxis en JAVASCRIPT
elemento.style.color='valor';
por ejemplo: this.style.color='#FF0000';

Los colores pueden ser escritos on diferentes formatos:

EM { color: red; } /* con su numbre */
EM { color: #F00; } /* #RGB */
EM { color: #FF0000; } /* #RRGGBB */
EM { color: rgb(255,0,0); } /* rgb() */

Otra propiedad exclusiva de Internet Explorer es writing-mode que establece la dirección del texto:

sintaxis en HTML
elemento {writing-mode: valor;}
por ejemplo: div {writing-mode: tb-rl;}

sintaxis en JAVASCRIPT
elemento.style.writingMode='valor';
por ejemplo: this.style.writingMode='tb-rl';

Tiene dos valores posibles:

lr-tb es el valor por defecto, el texto se escribe de manera horizontal de izquierda a derecha y de arriba hacia abajo.
tb-rl el texto se escribe de manera vertical, de arriba hacia abajo y de derecha a izquierda.

Este ejemplo sólo es visible en Internet Explorer (Ver/Ocultar) [+]

Ut wisi enim ad minim veniam

Ut wisi enim ad minim veniam

SUMARIO:

Las propiedades CSS (background)

Las propiedades CSS (border)

Las propiedades CSS (margin, padding y outline)

Las propiedades CSS (textos 1ª parte)

Las propiedades CSS (textos 2ª parte)