Texto de CSS (Texto)

Las propiedades de texto de CSS le permiten definir varios estilos de texto de manera muy efectiva y sencilla, como color, alineación, espaciado, decoración, transformación, etc.

Formatear texto con CSS

CSS tiene varias propiedades para definir el estilo de texto. Estas propiedades le permiten controlar con precisiónCarácter,Espacio,Palabra,Párrafoy su apariencia visual.

Puede configurar las siguientes propiedades de texto del elemento:

Color de texto

El color del texto es definido por CSS colorDefinición de propiedades.Conozca más sobre color.

h1　{
　　　　color: #ff0000;
}
p　{
　　　　color: verde;
}

alineación de texto

Estetexto-alineaciónLa propiedad se utiliza para establecer la alineación horizontal del texto.

Los valores posibles de esta propiedad son: izquierda, derecha, centrado, justificar y inherit.

h1　{
　　　　texto-align: centrado;
}
p　{
　　　　texto-alineación: alinear;
}

decoración de texto

Estetexto-decoraciónLa propiedad se utiliza para establecer o eliminar la decoración del texto.

Los valores posibles de esta propiedad son: none, subrayado, sobrelineado, línea-a través, blink e inherit. Debería evitar usar este valor en texto subrayado no enlaces, de lo contrario puede confundir al visitante.

h1　{
　　　　texto-decoración: sobrelineado;
}
h2　{
　　　　texto-decoración: línea;-a través;
}
h3　{
　　　　texto-decoración: subrayado;
}

eliminar el subrayado predeterminado de los enlaces

El texto-La propiedad decoration se utiliza generalmente para eliminar el subrayado predeterminado de los enlaces. Eliminar completamente el subrayado puede confundir al visitante. A menos que proporcione otras señales visuales para que se destaque, al mismo tiempo que diseñe el estilo del enlace.

Por ejemplo, se puede usar punto en lugar de línea continua en el subrayado del enlace.

a {
　　　　texto-decoración: none;
　　　　borde-abajo:　1px dotted;
}

transformación de texto

El texto-La propiedad transform se utiliza para establecer la capitalización del texto.

Se puede usar para establecer el contenido del texto del elemento en mayúsculas o minúsculas, o para capitalizar la primera letra de cada palabra. Para los valores posibles text-La propiedad transform tiene: none, capitalize, uppercase, lowercase e inherit.

p.up {
　　　　texto-transform: uppercase;
}
p.cap {
　　　　texto-transform: lowercase;
}
p.low {
　　　　texto-transform: lowercase;
}

sangrado de texto

El texto-La propiedad indent se utiliza para establecer el sangrado del primer texto del elemento. El texto-Los valores posibles de la propiedad indent son:Porcentaje（%），Longitudo inherit.

El siguiente ejemplo muestra cómo sangrar la primera línea del párrafo.

p　{
　　　　texto-indent:　100px;
}

La propiedad espaciado se utiliza para establecer el espacio entre palabras.

palabra-espaciado

• El espaciado de caracteres puede verse afectado por el alineamiento del texto. Vertexto-alineaciónPropiedades.

• Mantener los espacios en blanco, todos los caracteres de espacio están sujetos al espacio entre palabras. Consulte CSS blanco-espacioPropiedades.

Este-Los valores posibles de la propiedad espaciado son:longitud（especificar el espacio entre palabras que se debe insertar）normal y inherit.

p.uno　{
　　　　palabra-espaciado:　20px;
}
p.dos　{
　　　　palabra-espaciado:　20px;
　　　　texto-alineación: alinear;
}
p.tres　{
　　　　palabra-espaciado:　20px;
　　　　blanco-espacio: pre;
}

Espaciado de caracteres

Esteletra-espaciadoLa propiedad se utiliza para establecer el espacio adicional entre caracteres de texto.

Los valores posibles de esta propiedad son:longitud（especificar el espacio entre caracteres predeterminado normal y el espacio adicional entre caracteres que se debe insertar）y inherit.

h1　{
　　　　letra-espaciado:　-3px;
}
p　{
　　　　letra-espaciado:　10px;
}

Interlineado

Estelínea-altoLa propiedad define la altura de una línea de texto (también conocida comoLead)

Los valores posibles de esta propiedad son:)Porcentaje（%），Longitud,Cantidad，normal y inherit.

p　{
　　　　línea-alto:　1.2;
}

Cuando el valor es un número, se calcula la altura de la línea multiplicando el tamaño de la fuente del elemento por el número. Mientras que los porcentajes son relativos al tamaño de la fuente del elemento.

si línea-el valor de la propiedad alto es mayor quefuente-tamañoel valor del elemento, esta diferencia (llamada“avanzada”）se corta en dos mitades (llamadas“media avanzada”），y distribuidos uniformemente en la parte superior e inferior de los rectángulos de línea de in.

p　{
　　　　fuente-tamaño:　14px;
　　　　línea-alto:　20px;
　　　　fondo-color: #f0e68c;
}

Para obtener más información sobre el estilo de texto, consulteFuentesYRelativo al textoPropiedades.