formato de texto
Este texto es de estilo con algunas de las propiedades de formato de texto. El título utiliza el text-align, text-transform , y color propiedades. El párrafo tiene sangría, alineados, y se especifica el espacio entre caracteres. El subrayado se eliminará de este color "Inténtelo usted" enlace.
Color de texto
El color propiedad se utiliza para establecer el color del texto.
Con CSS, un color más a menudo se especifica por:
- un nombre de color - como "red"
- un valor HEX - como "#ff0000"
- un valor RGB - como "rgb(255,0,0)"
Mira valores de color CSS para obtener una lista completa de los posibles valores de color.
El color del texto por defecto para una página se define en el selector cuerpo.
 | Nota: Para CSS compatibles con el W3C: Si define el color la propiedad, también debe definir el background-color propiedad. |
|---|
Alineación del texto
El text-align propiedad se utiliza para establecer la alineación horizontal de un texto.
Un texto puede ser alineado a izquierda o derecha, centrado o justificado.
El siguiente ejemplo muestra el centro alineado, y se fue y el texto alineado a la derecha (la izquierda es la alineación por defecto si la dirección del texto es de izquierda a derecha, y la alineación a la derecha es por defecto si la dirección del texto es de derecha a izquierda):
Ejemplo
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
} Inténtalo tú mismo " Cuando el text-align propiedad se establece en "justify" , cada línea se estira de manera que cada línea tiene la misma anchura, y los márgenes izquierdo y derecho son rectas (como en revistas y periódicos):
Decoración de texto
El text-decoration propiedad se utiliza para establecer o eliminar las decoraciones de texto.
El valor text-decoration: none; a menudo se utiliza para eliminar los subrayados de enlaces:
Los otros text-decoration valores se utilizan para decorar el texto:
Ejemplo
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
} Inténtalo tú mismo " | Nota: No se recomienda para subrayar el texto que no es un enlace, ya que a menudo confunde al lector. |
|---|
Transformación de texto
El text-transform propiedad se utiliza para especificar letras mayúsculas y minúsculas en un texto.
Se puede utilizar para convertir todo en letras mayúsculas o minúsculas, o en mayúscula la primera letra de cada palabra:
Ejemplo
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
} Inténtalo tú mismo " La sangría de texto
El text-indent propiedad se utiliza para especificar la sangría de la primera línea de un texto:
Espaciado de letras
La letter-spacing propiedad se utiliza para especificar el espacio entre los caracteres de un texto.
El siguiente ejemplo muestra cómo aumentar o disminuir el espacio entre caracteres:
Altura de la línea
El line-height propiedad se utiliza para especificar el espacio entre líneas:
Dirección del texto
La direction la propiedad se utiliza para cambiar la dirección del texto de un elemento:
Espacio entre palabras
La word-spacing propiedad se utiliza para especificar el espacio entre las palabras de un texto.
El siguiente ejemplo muestra cómo aumentar o disminuir el espacio entre las palabras:
Más ejemplos
Desactivar el ajuste de texto dentro de un elemento
Este ejemplo demuestra cómo deshabilitar ajuste de texto dentro de un elemento.
La alineación vertical de una imagen
Este ejemplo muestra cómo establecer la alineación vertical de una imagen en un texto.
Añadir sombra al texto
Este ejemplo muestra cómo agregar sombra al texto.
Ponte a prueba con los ejercicios!
Ejercicio 1 » Ejercicio 2» Ejercicio 3 » Ejercicio 4» Ejercicio 5 »
Todas las propiedades CSS de texto
| Propiedad | Descripción |
|---|---|
| color | Establece el color del texto |
| direction | Especifica la dirección del texto / dirección de escritura |
| letter-spacing | Aumenta o disminuye el espacio entre caracteres en un texto |
| line-height | Establece la altura de la línea |
| text-align | Especifica la alineación horizontal del texto |
| text-decoration | Especifica la decoración añadida al texto |
| text-indent | Especifica la sangría de la primera línea de un bloque de texto |
| text-shadow | Especifica el efecto de sombra añadido al texto |
| text-transform | Controla la capitalización de texto |
| unicode-bidi | Se utiliza junto con la dirección del inmueble para establecer o devolver si el texto debe ser anulado para soportar múltiples idiomas en el mismo documento |
| vertical-align | Establece la alineación vertical de un elemento |
| white-space | Especifica cómo se maneja un espacio en blanco dentro de un elemento |
| word-spacing | Aumenta o disminuye el espacio entre las palabras de un texto |