TextoTextoEn esta página se comentan las propiedades que se pueden aplicar al texto de una página web:
La propiedad color permite establecer el color del texto. La propiedad background-color permite establecer el color de fondo del texto.
   |
body {
background-color: aqua;
}
h2 {
background-color: gold;
color: magenta ;
}
p {
background-color: lightblue;
color: blue;
}
|
Esto es un encabezado h2Esto es un párrafo p normal y corriente. Esto es otro párrafo p. |
El color de fondo de la página se establece en la etiqueta <body>,
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).
Nota: Internet Explorer 7 representa correctamente el color de fondo de <html> y <body>. Las versiones anteriores lo hacían incorrectamente, como se comenta en la página de diferencias entre IE7 e IE6.
Volver al principio de la página
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;
}
h2 {
text-align: center;
}
h3 {
text-align: right;
}
|
Esto es un encabezado h2Esto es un encabezado h3Esto es un párrafo p normal y corriente que se muestra justificado a derecha e izquierda porque se ha establecido la propiedad en <body> y, por tanto, afecta a todos los elementos menos a los que tienen la propiedad explícitamente establecida con otro valor |
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;
}
|
|
Volver al principio de la página
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.
| |
Alineación: sub, bottom, middle, text-bottom, baseline, text-top, top, super.
Ejemplo: bq bq bq bq bq bq bq bq
|
|
|
Alineación: sub, bottom, middle, text-bottom, baseline, text-top, top, super.
Ejemplo:
|
Nota: La posición relativa de los elementos es la misma en Firefox, Internet Explorer y Chrome, 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.
Volver al principio de la página
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;
}
|
Esto es un párrafo p normal y corriente cuya primera línea tiene sangría, es decir, empieza más a la derecha que el resto de líneas del párrafo. La sangría es habitual en España (y no sólo para beberla). |
| |
p {
text-indent: -25px;
}
|
Esto es un párrafo p normal y corriente cuya primera línea tiene sangría negativa (sangría francesa), por ello la primera línea empieza más a la izquierda que el resto de líneas del párrafo. Como se sale de la celda, se ve bastante mal, pero poniendo margen al párrafo se corrige este problema (ver ejemplo siguiente). |
| |
p {
margin-left: 25px;
text-indent: -25px;
}
|
Esto es un párrafo p normal y corriente con margen izquierdo y cuya primera línea tiene sangría negativa del mismo valor que el margen (sangría francesa), por ello la primera línea empieza más a la izquierda que el resto de líneas del párrafo. |
Volver al principio de la página
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;
}
|
Esto es un párrafo normal y corriente. |
| |
p {
letter-spacing: 10px;
}
|
Esto es un párrafo normal y corriente. |
| |
p {
letter-spacing: -2px;
}
|
Esto es un párrafo normal y corriente. |
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;
}
|
Letras separadas |
| |
span {
background-color: lightblue;
letter-spacing: 10px;
}
|
Letras separadas |
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;
}
|
XX |
| |
p {
letter-spacing: 50px;
text-align: center;
}
|
XX |
Nota: Internet Explorer 8 representa correctamente el espacio final al aplicar letter-spacing a un elemento en-línea. Las versiones anteriores lo hacían incorrectamente, como se comenta en la página de diferencias entre IE8 e IE7.
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: 5px;
}
|
Esto es un párrafo normal y corriente. |
| |
p {
word-spacing: 10px;
}
|
Esto es un párrafo normal y corriente. |
| |
p {
word-spacing: -5px;
}
|
Esto es un párrafo normal y corriente. |
La propiedad word-spacing no se aplica a la última palabra.
| |
p {
text-align: center
word-spacing: 50px;
}
|
XX |
| |
span {
text-decoration: underline;
word-spacing: 10px;
}
|
Palabras separadas |
| |
span {
background-color: lightblue;
word-spacing: 10px;
}
|
Palabras separadas |
Volver al principio de la página
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 (sobrerayado), line-through (tachado) y blink (parpadeo).
Nota: Internet Explorer y Chrome no interpretan el valor blink, como se comenta en la página de diferencias entre Firefox e Internet Explorer.
| |
p {
text-decoration: underline;
}
|
Esto es un párrafo p normal y corriente. |
| |
p {
text-decoration: overline;
}
|
Esto es un párrafo p normal y corriente. |
  |
p {
text-decoration: blink;
}
|
Esto es un párrafo p normal y corriente. |
| |
p {
text-decoration: line-through;
}
|
Esto es un párrafo p normal y corriente. |
Nota: Los navegadores no muestran el valor overline de la misma manera en todos los casos. Si un párrafo tiene suprarayado y alguna palabra de ese párrafo está aumentada:
| |
<p style="text-decoration: overline;">Este es un párrafo <span style="font-size: 200%">suprarayado</span>.</p> |
Este es un párrafo suprayado. |
Volver al principio de la página
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;
}
|
Esto es un párrafo normal y corriente. |
| |
p {
text-transform: uppercase;
}
|
Esto es un párrafo normal y corriente. |
| |
p {
text-transform: lowercase;
}
|
Esto es un párrafo normal y corriente. |
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;
}
|
Este PÁRRAFO tiene una palabra en mayúsculas. |
Volver al principio de la página
La propiedad text-shadow permite establecer un sombreado (o varios) al texto. Para definir un sombreado hay que indicar el color (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 recomendación CSS 3 Text (actualmente -octubre de 2011- en fase de borrador).
Nota: Internet Explorer no interpreta esta propiedad, como se comenta en la página de diferencias entre Firefox e Internet Explorer.
| |
p {
text-shadow: grey 1px -1px
}
|
Esto es un párrafo con sombreado. |
| |
p {
text-shadow: grey 5px -5px 2px;
}
|
Esto es un párrafo con sombreado desenfocado. |
Volver al principio de la página
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 y nowrap. El comportamiento habitual de los navegadores (salvo en el caso de la etiqueta <pre>) es:
Los ejemplos siguientes muestran la diferencia entre los tres casos.
El valor normal hace que el navegador sí colapse los espacios en blanco, no haga caso de los saltos de línea y sí haga wrap (nota: para ver que el navegador hace wrap, es decir que el texto ocupa más de una línea, puede hacer falta estrechar la ventana del navegador)
| |
pre {
white-space: normal;
}
|
<pre>white-space: normal
Espacios en blanco seguidos: ( ).
Tercera línea.</pre>
|
white-space: normal
Espacios en blanco seguidos: ( ).
Tercera línea.
|
El valor pre hace que el navegador no colapse los espacios en blanco, sí haga caso de los saltos de línea y no haga wrap
| |
pre {
white-space: pre;
}
|
<pre>white-space: pre
Espacios en blanco seguidos: ( ).
Tercera línea.</pre>
|
white-space: pre
Espacios en blanco seguidos: ( ).
Tercera línea.
|
El valor nowrap hace que el navegador sí colapse los espacios en blanco, no haga caso de los saltos de línea y no haga wrap (nota: aunque se estreche la ventana del navegador, el texto no hará wrap, es decir que se mantendrá en una sola línea.
| |
pre {
white-space: nowrap;
}
|
<pre>white-space: nowrap
Espacios en blanco seguidos: ( ).
Tercera línea.</pre>
|
white-space: nowrap
Espacios en blanco seguidos: ( ).
Tercera línea.
|
Nota: Los borradores de las recomendaciones CSS 2.1 y CSS 3 Text (actualmente -octubre de 2011- en fase de borrador) incluyen también los valores pre-wrap y pre-line.
Volver al principio de la página
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).
La propiedad unicode-bidi permite establecer el algoritmo de establecimiento de direccionalidad. Los posibles valores de unicode-bidi son normal (no modifica el algoritmo establecido), embed (la dirección se puede redefinir dentro del bloque) y bidi-override (la dirección se puede redefinir dentro del bloque).
Nota: No tengo muy clara la diferencia entre embed y bidi-override, pero parece que embed sólo sirve para elementos en línea, mientras que bidi-override se puede aplicar a cualquier elemento.
| |
p {
direction: ltr;
unicode-bidi: bidi-override;
}
|
Esto es un párrafo normal y corriente. |
| |
p {
direction: rtl;
unicode-bidi: bidi-override;
}
|
Esto es un párrafo normal y corriente. |
Cuando se aplican a una tabla, esta propiedades establecen el orden de las columnas de una tabla.
| |
table {
direction: ltr;
unicode-bidi: bidi-override;
}
|
|
||||
| |
table {
direction: rtl;
unicode-bidi: bidi-override;
}
|
|
Volver al principio de la página
Esta página forma parte del curso "Páginas web HTML / XHTML y hojas de estilo CSS" disponible en http://www.mclibre.org
Esta obra está bajo una licencia de Creative
Commons Reconocimiento-CompartirIgual 3.0 España.
