En esta lección se comentan propiedades CSS definidas en la recomendación CSS 2.1, publicada en junio de 2011.
Estas propiedades se aplican al texto de una página web.
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).
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 class="centrado">
<img src="gnu-head-sm.jpg" alt="Logotipo de GNU" width="129" height="122">
</p>
p.centrado {
text-align: center;
}
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.
Esta propiedad se necesita cuando un elemento contiene fragmentos de texto o imágenes de diferentes tamaños o tipos de letra, para obtener la alineación más adecuada. La propiedad se debe aplicar a los fragmentos de texto o imágenes, no al bloque de texto que contiene los fragmentos o imágenes.
Por ejemplo, si insertamos una imagen en un párrafo, la imagen se coloca como un carácter más del texto (la parte inferior de la imagen está a la misma altura que la línea base del texto).
<p>El logotipo de la Free Software Foundation y del proyecto GNU es una cabeza de ñu, un tipo de antílope africano: <img src="../gnu-head-heckert.svg" alt="Logotipo de GNU" title="Logotipo de GNU" height="75">. La versión actual del logotipo fue dibujada por Aurelio Heckert en 2003.</p>
Con vertical-align podemos cambiar esa alineación. Por ejemplo, centrando la imagen en vertical.
<p>El logotipo de la Free Software Foundation y del proyecto GNU es una cabeza de ñu, un tipo de antílope africano: <img src="../gnu-head-heckert.svg" alt="Logotipo de GNU" title="Logotipo de GNU" height="75" class="v-centrado">. La versión actual del logotipo fue dibujada por Aurelio Heckert en 2003.</p>
.v-centrado {
vertical-align: middle;
}
Por ejemplo, si insertamos un emoji en un párrafo, el tamaño del emoji es el del texto (ya que una entidad numérica se trata como un carácter). Ese tamaño a veces resulta demasiado pequeño.
<p>El 🌞 y la 🌛.</p>
Podemos aumentar el tamaño del emoji añadiendo una etiqueta span con clase. Como los caracteres se alinean por su línea base, las imágenes dejan de estar centradas en vertical con respecto al texto.
<p>El <span class="grande">🌞</span> y la <span class="grande">🌛</span>.</p>
.grande {
font-size: 400%;
}
Si queremos que los emojis se vean centrados verticamente con respecto al texto, podemos aplicarles la propiedad vertical-align con el valor middle.
<p>El <span class="grande">🌞</span> y la <span class="grande">🌛</span>.</p>
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;
}
p {
text-indent: -25px;
}
p {
margin-left: 25px;
text-indent: -25px;
}
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;
}
p {
letter-spacing: 10px;
}
p {
letter-spacing: -2px;
}
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:
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).
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;
}
p {
word-spacing: 20px;
}
p {
word-spacing: -5px;
}
La propiedad word-spacing no se aplica a la última palabra.
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;
}
p {
text-decoration: underline;
}
p {
text-decoration: overline;
}
p {
text-decoration: line-through;
}
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;
}
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;
}
p {
text-transform: uppercase;
}
p {
text-transform: lowercase;
}
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;
}
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 Text Decoration Module Level 3, actualmente (octubre de 2022) 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:
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:
colapsar los espacios en blanco, es decir, mostrar un único espacio en blanco cuando en el código fuente hay varios espacios en blanco seguidos
colapsar los saltos de línea, es decir, no hacer caso de los saltos de línea que haya en el código fuente
hacer ajuste de líneas (wrap), es decir, pasar el texto a la línea siguiente si el texto no cabe en una sola línea en el espacio disponible.
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 varias líneas, de acuerdo con el espacio disponible.
</pre>
El valor normal hace que el navegador colapse los espacios en blanco, colapse los saltos de línea y haga ajuste de línea (nota: para ver que el navegador hace ajuste de línea, puede hacer falta estrechar la ventana del navegador):
pre {
white-space: normal;
}
El valor pre hace que el navegador no colapse los espacios en blanco, no colapse los saltos de línea y no haga ajuste de línea:
pre {
white-space: pre;
}
El valor nowrap hace que el navegador colapse los espacios en blanco, colapse los saltos de línea y no haga ajuste de línea:
pre {
white-space: nowrap;
}
El valor pre-wrap hace que el navegador no colapse los espacios en blanco, no colapse los saltos de línea y haga ajuste de línea (nota: para ver que el navegador hace ajuste de línea, puede hacer falta estrechar la ventana del navegador):
pre {
white-space: pre-wrap;
}
El valor pre-line hace que el navegador colapse los espacios en blanco, no colapse los saltos de línea y haga ajuste de línea (nota: para ver que el navegador hace ajuste de línea, puede hacer falta estrechar la ventana del navegador):
