El color de la fuente puede definirse mediante color. Se espera un valor de color.
p { color: rojo; }Puede especificar palabras de color o un valor de color hexadecimal como valor.
Especificar la dirección de escritura
La propiedad direction puede utilizarse para forzar la dirección de escritura de los elementos. La dirección de escritura inversa es interesante en relación con los idiomas en los que se escribe de derecha a izquierda.
También se puede utilizar para determinar en qué lado se corta el contenido sobredimensionado con desbordamiento.
- ltr - de izquierda a derecha
- rlt - de derecha a izquierda
El siguiente ejemplo muestra cómo puede utilizarse esta propiedad.
.normal {direction:ltr;} .rueckwaerts {direction:rtl;}
Aquí se han definido dos clases.
<p class="normal">Texto que se escribe de izquierda a derecha. 1 2 3 4 5 6 7 8 9 0</p> <p class="rueckwaerts">Texto que se escribe de derecha a izquierda. 1 2 3 4 5 6 7 8 9 0</p>
El resultado se ve así en el navegador:
La alineación horizontal de los textos
La alineación horizontal de los párrafos de texto y otros textos continuos o elementos en línea contenidos en elementos de bloque se define mediante la propiedad text-align. Por cierto, el ajuste por defecto es la alineación a la izquierda.
- left - alineación a la izquierda
- right - alineación a la derecha
- center - centrado
- justify - alinear como justificación
Un ejemplo:
<p style="text-align:right;"> Bienvenido </p>
El resultado es el siguiente:
La alineación vertical
La propiedad vertical-align se utiliza para determinar la alineación vertical del texto dentro de una línea en relación con la altura de la línea. La especificación siempre se refiere al elemento padre, que debe ser un elemento en línea. El texto también puede alinearse dentro de tablas.
Los valores disponibles son los siguientes
- sub - subíndice
- super - superíndice
- baseline - alineado con la línea de base
- top - alineado con el borde superior del elemento padre
- bottom - alineado con el borde inferior del elemento padre
- middle - alineado en el centro entre los bordes superior e inferior del elemento padre
- text-top - en el margen superior del texto
- text-bottom - en la parte inferior del texto
- Especificación de longitud - un valor positivo o negativo mueve el elemento por encima o por debajo de la línea de base.
- Porcentaje - un valor positivo o negativo desplaza el elemento por encima o por debajo de la línea de base.
Ejemplo:
.baseline { alineación vertical: línea de base; }
Tenga en cuenta que, lamentablemente, los valores de alineación vertical son interpretados de forma muy desigual por los distintos navegadores. Por lo tanto, debería probar los resultados antes de poner las páginas en línea.
Determinar la decoración del texto
text-decoration se utiliza para asignar propiedades adicionales a los textos o hipervínculos.
- ninguno - sin decoración de texto
- subrayado - subrayado
- overline - subrayado
- tachado - tachado
- blink - parpadeo
He aquí otro ejemplo:
a:link { text-decoration: none; }
Esto significa que los hipervínculos de la página ya no tienen subrayado.
También se puede definir explícitamente el espaciado entre las distintas palabras.
<span style="word-spacing:0.5em">¡Bienvenido a PSD-Tutorials.de!</span><br /> <span style="word-spacing:1em">¡Bienvenido a PSD-Tutorials.de!</span>.
Se espera un valor numérico. Los valores porcentuales no son posibles.
Por cierto, el espaciado entre letras es similar al espaciado entre palabras. Sin embargo, el espaciado entre letras se utiliza para determinar el espacio entre las letras individuales de un texto. Aquí también se permiten valores numéricos, pero no porcentajes.
<span style="letter-spacing:0.1em">Texto de ejemplo con espaciado entre caracteres 0.1em</span><br> <span style="letter-spacing:0.3em">Texto de ejemplo con espaciado entre caracteres 0.3em</span><br>
Puede utilizar la propiedad text-transform para especificar si el texto se escribe en mayúsculas o no. Esto es independiente de la notación real en el texto de origen. También se pueden aplicar las minúsculas.
- minúsculas - minúsculas
- uppercase - mayúsculas
- capitalise - inicio de palabra en mayúsculas
- none - sin transformación de texto
Ejemplo:
.small { transformación de texto: minúsculas; }El resultado es el siguiente en el navegador:
Espacios y saltos de carácter
La propiedad white-space se utiliza para especificar cómo deben mostrarse en el navegador los espacios y saltos de línea en el texto fuente.
- normal - se inserta un salto de línea automático. Además, varios espacios se combinan en uno.
- pre - los saltos de línea se muestran tal y como aparecen en el texto fuente.
- nowrap - no hay salto de línea automático.
- pre-line - se combinan varios espacios en uno. También se produce un salto de línea si la caja no es lo suficientemente grande para mostrarse.
- pre-wrap - se produce un salto de línea si la caja no es lo suficientemente grande para la visualización.
He aquí otro ejemplo:
<pre class="brush:xml;"><!DOCTYPE html> <html lang="de"> <head> <title>PSD-Tutoriales.de</title> <meta charset="UTF-8" /> <style> body>p { font-family:"Courier New", Courier, monospace; font-size: 200%; } body p { color:#0066FF; } </style> </head> <body> <p>párrafo 1</p> <p>párrafo 2</p> <p>.gt;Párrafo 3</p> <div> <p>Párrafo 4</p> </div> </body> </html></pre>En el navegador se ve así
Implementar sombra
Puedes usar la propiedad text-shadow para forzar una sombra para los textos. Tenga en cuenta que esta propiedad sólo está soportada en navegadores relativamente actuales. Los navegadores que no puedan interpretar text-shadow mostrarán la fuente sin sombra.text-shadow se utiliza del siguiente modo
text-shadow: hV vV blur #xxxxxx;
Y esto es lo que significan los valores
- hV - Desplazamiento horizontal
- vV - Desplazamiento vertical
- blur - Desenfoque
- #xxxxxx - El color de la sombra
El siguiente ejemplo muestra una aplicación típica para text-shadow.
.shadow { color: #444; font-size: 34px; text-shadow: 2px 2px 3px #333; }
A continuación, la clase definida se aplica a un encabezado de primer orden.
<h1 class="shadow">PSD-Tutoriales.de</h1>
Y aquí se ve el resultado:
Como ya se ha descrito, se puede utilizar text-shadow sin problemas, ya que la no interpretación por parte de los navegadores no tiene efectos negativos. El texto se muestra entonces simplemente sin sombra.
