Texto. CSS 2. Páginas web HTML y hojas de estilo CSS. Bartolomé Sintes Marco

CSS 2: Texto

En esta página se comentan las propiedades que se pueden aplicar al texto de una página web:

Color del texto: color

La propiedad color permite establecer el color del texto. Las formas de expresar colores se comentan en la lección CSS: Colores.

h1 {
  color: magenta ;
}

p {
  color: blue;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Color de fondo: background-color

La propiedad background-color permite establecer el color de fondo del elemento.

body {
  background-color: aqua;
}

h1 {
  background-color: gold;
}

p {
  background-color: lightblue;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

El color de fondo de la página se establece en la etiqueta <body> (o en <html>

El color de fondo de una etiqueta no se aplica solamente al texto, sino a la caja que contiene el texto (por eso el color de fondo se extiende hasta el extremo derecho de la línea).

Alineación horizontal: text-align

La propiedad text-align permite establecer la alineación horizontal de un bloque de texto. Los posibles valores de text-align son left (izquierda), right (derecha), center (centro) y justify (justificado a derecha e izquierda).

body {
  text-align: justify;
}

h1 {
  text-align: center;
}

h2 {
  text-align: right;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Para centrar una imagen, el elemento que contiene la imagen tiene que tener su contenido centrado. Por ejemplo, si la imagen está en un párrafo, se puede definir la clase "p.centrado" con el atributo text-align establecido con el valor center y después dar al párrafo que contiene la imagen la clase "centrado". Lógicamente, si se añade texto al párrafo, el texto también se centrará.

p.centrado {
  text-align: center;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Alineación vertical: vertical-align

La propiedad vertical-align permite establecer la alineación vertical de un elemento respecto al elemento que lo contiene. Los posibles valores de vertical-align son baseline, sub, super, top, text-top, middle, bottom y text-bottom.

ERROR (no puede mostrarse el objeto)
Enlace externo
ERROR (no puede mostrarse el objeto)
Enlace externo

Nota: La posición relativa de los elementos es la misma en Chrome, Firefox y Edge, aunque las líneas horizontales que se han añadido a los ejemplos para facilitar la comparación no se muestran de la misma manera en los tres navegadores, como se explica en el apartado dedicado a la propiedad text-decoration.

Sangría: text-indent

La propiedad text-indent permite establecer la sangría de un bloque de texto. Su valor se puede establecer como cualquier otra longitud.

p { 
  text-indent: 25px;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p { 
  text-indent: -25px;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p { 
  margin-left: 25px;
  text-indent: -25px;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Espaciado de letras: letter-spacing

La propiedad letter-spacing permite establecer un espaciado entre cada una de las letras de un bloque de texto. Estos valores, positivos o negativos, se establecen como cualquier otra longitud y se añaden al espaciado normal.

p {
  letter-spacing: 5px;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  letter-spacing: 10px;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  letter-spacing: -2px;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

La propiedad letter-spacing se aplica a todas las letras, incluida la última, como muestran los ejemplos siguientes en los que se añade un espacio final:

span {
  letter-spacing: 10px;
  text-decoration: underline;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
span {
  background-color: lightblue;
  letter-spacing: 10px;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Este espacio final puede producir efectos no deseados, como en los ejemplos siguientes en que el texto parece no estar centrado (al poner color de fondo al texto se ve que el texto sí que está centrado, pero el espacio final hace que parezca que no).

p {
  letter-spacing: 50px;
  text-align: center;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  letter-spacing: 50px;
  text-align: center;
}

span {
  background-color: lightblue;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Espaciado de palabras: word-spacing

La propiedad word-spacing permite establecer un espaciado entre cada una de las palabras de un bloque de texto. Estos valores, positivos o negativos, se establecen como cualquier otra longitud y se añaden al espaciado normal.

p {
  word-spacing: 10px;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  word-spacing: 20px;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  word-spacing: -5px;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

La propiedad word-spacing no se aplica a la última palabra.

p {
  text-align: center;
  word-spacing: 50px;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  text-align: center;
  word-spacing: 50px;
}
span {
  background-color: lightblue;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Decoración: text-decoration

La propiedad text-decoration permite añadir a un bloque de texto distintos tipos de rayado. Los posibles valores de text-decoration son none (ninguno), underline (subrayado), overline (sobrerrayado) y line-through (tachado).

p {
  text-decoration: none;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  text-decoration: underline;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  text-decoration: overline;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  text-decoration: line-through;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Nota: Los navegadores no muestran el valor overline de la misma manera, como se comenta en la página de diferencias entre navegadores).


El color de la línea es el mismo que el del texto.

p {
  color: red;
  text-decoration: line-through;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Mayúsculas / minúsculas: text-transform

La propiedad text-transform permite cambiar el texto a minúsculas o mayúsculas. Los posibles valores de text-transform son none (ninguno), capitalize (la primera letra de cada palabra en mayúsculas), uppercase (todas las letras en mayúsculas) y lowercase (todas las letras en minúsculas).

p {
  text-transform: capitalize;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  text-transform: uppercase;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  text-transform: lowercase;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

El valor capitalize únicamente transforma la primera letra de cada palabra, el resto de letras se mantienen como estén (minúsculas o mayúsculas).

p {
  text-transform: capitalize;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Sombreado: text-shadow

La propiedad text-shadow permite añadir una o varias sombras al texto. Para definir cada sombra hay que indicar el color de la sombra (si se omite, se utiliza el color del texto), la distancia horizontal (positiva o negativa), la distancia vertical (positiva o negativa) y el diámetro de desenfoque.

Esta propiedad estaba incluida en la recomendación CSS 2 y no está incluida en la recomendación CSS 2.1, pero está incluida en la futura recomendación CSS 3: Text decoration (actualmente -noviembre de 2017- en elaboración).


Si se escriben dos distancias, la primera distancia es la distancia horizontal y la segunda la distancia vertical de la sombra con respecto al texto:

p {
  font-size: 200%;
  font-weight: bold;
  letter-spacing: 10px;
  text-align: center;
  text-shadow: gray 6px 0;
  text-transform: uppercase;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  font-size: 200%;
  font-weight: bold;
  letter-spacing: 10px;
  text-align: center;
  text-shadow: gray -6px 0;
  text-transform: uppercase;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  font-size: 200%;
  font-weight: bold;
  letter-spacing: 10px;
  text-align: center;
  text-shadow: gray 0 6px;
  text-transform: uppercase;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  font-size: 200%;
  font-weight: bold;
  letter-spacing: 10px;
  text-align: center;
  text-shadow: gray 0 -6px;
  text-transform: uppercase;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  font-size: 200%;
  font-weight: bold;
  letter-spacing: 10px;
  text-align: center;
  text-shadow: gray 6px 6px;
  text-transform: uppercase;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Si se escriben tres distancias, la tercera distancia indica el tamaño del difuminado de la sombra.

p {
  font-size: 200%;
  font-weight: bold;
  letter-spacing: 10px;
  text-align: center;
  text-shadow: black 6px 6px 2px;
  text-transform: uppercase;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  font-size: 200%;
  font-weight: bold;
  letter-spacing: 10px;
  text-align: center;
  text-shadow: black 6px 6px 4px;
  text-transform: uppercase;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  font-size: 200%;
  font-weight: bold;
  letter-spacing: 10px;
  text-align: center;
  text-shadow: black 6px 6px 6px;
  text-transform: uppercase;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  font-size: 200%;
  font-weight: bold;
  letter-spacing: 10px;
  text-align: center;
  text-shadow: black 6px 6px 8px;
  text-transform: uppercase;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Se pueden definir varias sombras simultáneamente, escribiéndolas separadas por comas (,).

p {
  font-size: 200%;
  font-weight: bold;
  letter-spacing: 10px;
  text-align: center;
  text-shadow: gray 8px 8px, gray -8px -8px;
  text-transform: uppercase;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Nota:

Espacios en blanco: white-space

La propiedad white-space permite establecer el comportamiento del navegador con respecto a los espacios en blanco repetidos o con los saltos de línea del código fuente. Los posibles valores de white-space son normal, pre, nowrap, pre-wrap y pre-line.

El comportamiento habitual de los navegadores (salvo en el caso de la etiqueta <pre>, en la que hace todo lo contrario) es:

La tabla siguiente resume el comportamiento de cada uno de los valores de white-space

  normal     pre     nowrap     pre-wrap     pre-line  
colapsar espacios en blanco
colapsar saltos de línea
hacer ajuste de línea

Los ejemplos siguientes muestran la diferencia entre los cinco valores. Los ejemplos se aplican al siguiente elemento <pre>:

<pre>Primera línea.
Segunda línea, seguida de una línea en blanco.

Cuarta línea, con cinco espacios en blanco entre paréntesis: (     ).
Quinta línea. Esta línea es muy larga para ver si el navegador mantiene todo en la misma línea o si lo muestra en varías líneas, de acuerdo con el espacio disponible.
</pre>

Dirección: direction

La propiedad direction permite establecer la dirección de escritura. Los posibles valores de direction son ltr (de izquierda a derecha) y rtl (de derecha a izquierda).

p {
  direction: ltr;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  direction: rtl;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Para que la propiedad direction se imponga al algoritmo de dirección de escritura del navegador, es necesario utilizar también la propiedad unicode-bidi.

p {
  direction: rtl;
  unicode-bidi: bidi-override;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Cuando se aplica a una tabla, la propiedad direction establece el orden de las columnas de la tabla.

table {
  border: black 1px solid;
  direction: ltr;
}
td {
  border: black 1px solid;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
table {
  border: black 1px solid;
  direction: rtl;
}
td {
  border: black 1px solid;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Dirección: unicode-bidi

La propiedad unicode-bidi permite establecer el algoritmo de establecimiento de direccionalidad. Los posibles valores de unicode-bidi son normal (no modifica el algoritmo utilizado por el navegador), embed (para elementos en-línea, la dirección se puede redefinir en ellos) y bidi-override (para elementos en-línea y bloques, la dirección se puede redefinir en cualquier elemento y sub-elemento del bloque).

Nota: No tengo muy clara la diferencia entre embed y bidi-override.

p {
  unicode-bidi: bidi-override;
  direction: rtl;
}

strong {
  direction: ltr;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  unicode-bidi: bidi-override;
  direction: rtl;
}

strong {
  unicode-bidi: bidi-override;
  direction: ltr;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  unicode-bidi: bidi-override;
  direction: rtl;
}

strong {
  unicode-bidi: embed;
  direction: ltr;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  unicode-bidi:embed;
  direction: rtl;
}

strong {
  direction: ltr;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  unicode-bidi:embed;
  direction: rtl;
}

strong {
  unicode-bidi: bidi-override;
  direction: ltr;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  unicode-bidi:embed;
  direction: rtl;
}

strong {
  unicode-bidi: embed;
  direction: ltr;
}
ERROR (no puede mostrarse el objeto)
Enlace externo