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 6 no representaba correctamente el color de fondo de html y body, como se explica en la página de diferencias entre IE6 e IE7.
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;
}
|
|
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:
|
Estos ejemplos no sirven para ver qué hace exactamente cada valor. Además, los ejemplos no se ven igual en IE y en FF.
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. |
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, lo que puede causar efectos no deseados. Ver bug 125.390 (letter-spacing se aplica a última letra) en la página de bugs de Firefox .
| |
p {
letter-spacing: 50px;
text-align: center;
}
|
XX |
| |
p {
letter-spacing: 50px;
text-align: center;
}
|
XX |
| |
span {
letter-spacing: 10px;
text-decoration: underline;
}
|
Letras separadas |
| |
span {
background-color: lightblue;
letter-spacing: 10px;
}
|
Letras separadas |
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 |
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). Internet Explorer no reconoce el valor blink.
| |
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. |
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úsuclas o mayúsculas).
| |
p {
text-transform: capitalize;
}
|
Este PÁRRAFO tiene una palabra en mayúsculas. |
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.
 |
p {
text-shadow: red 3px 3px;
}
|
Esto es un párrafo con sombreado. |
| |
p {
text-shadow: -3px 3px 2px;
}
|
Esto es un párrafo con sombreado. |
Ni Firefox ni Internet Explorer son capaces de interpretar esta propiedad, aunque parece ser que actualmente (octubre de 2007) los navegadores Webkit, Konkeror o iCab sí pueden y el navegador Opera lo podrá en la futura versión 10. En cualquier caso, esta propiedad no está incluida en la recomendación CSS 2.1 (actualmente -octubre de 2008- en fase de borrador)
El bug 10.713 (implementar text-shadow) de la página de bugs de Firefox permite conocer el estado de desarrollo de esta propiedad en Firefox. parece que estará disponible en Firefox 3.1 (actualmente -octubre de 2008- en desarrollo).
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: El borrador CSS 2.1 (actualmente -octubre de 2008- en fase de borrador) incluye también los valores pre-wrap y pre-line.
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;
}
|
|
