Propiedad de transformación de texto en CSS

Propiedad de transformación de texto en CSS

El texto es una de las partes más importantes de cualquier página web. Cada sitio web tiene texto en cualquier formulario I.mi. Puede ser un párrafo, encabezados, etc. Por lo tanto, CSS proporciona una amplia gama de propiedades de texto para el estilo y el formateo del texto, como el texto de texto, el color de texto, la transformación de texto, etc.

Todas estas propiedades realizan diferentes funcionalidades, por ejemplo, Text-Align determina la alineación del texto i.mi. centro, derecha, izquierda, etc. La propiedad de color de texto establece el color del texto i.mi. rojo, verde, etc., etcétera. Sin embargo, este artículo se centrará en la propiedad de transformación de texto.

Este artículo presenta una descripción detallada de la propiedad de transformación de texto junto con algunos ejemplos.

propiedad de transformación de texto

Una propiedad CSS más utilizada que determina la apariencia del texto en términos de texto del caso I.mi. si el texto estará en minúsculas o en mayúsculas. Además, también se puede usar para capitalizar el carácter inicial de cada palabra.

El funcionamiento de los siguientes valores se discutirá en este artículo con la ayuda de ejemplos:

  • mayúscula: Convierte todos los caracteres del texto en mayúsculas.
  • minúscula: Convierte todos los caracteres del texto en minúsculas.
  • capitalizar: Convierte el carácter inicial de cada palabra en una letra mayúscula.
  • ninguno: Muestra el comportamiento predeterminado de la propiedad de transformación de texto I.mi. El texto se mostrará de la misma manera que está escrito.

Cómo usar el valor en mayúsculas para la propiedad de transformación de texto

El valor en mayúsculas transforma todos los caracteres en mayúsculas

Ejemplo
En este ejemplo, el texto es una mezcla de letras mayúsculas y minúsculas. Sin embargo, la asignación de valor en mayúsculas a la propiedad de transformación de texto transformará cada letra en mayúsculas:

Html

Propiedad de transformación de texto


Este es el primer párrafo


Este es el segundo párrafo


Este es el tercer párrafo

CSS

P, H2
Texto-transformación: upcase;

Obtendremos la siguiente salida:

Cada carta se transforma en la letra mayúscula.

Cómo usar el valor minúscula para la propiedad de transformación de texto

Convertirá cada carácter del texto en minúsculas.

Ejemplo

En el código dado a continuación, la primera letra de cada palabra es una letra mayúscula, sin embargo, asignar un valor minúscula a la propiedad de transformación de texto transformará todo el texto en minúsculas:

Html

Propiedad de transformación de texto


Este es el primer párrafo


Este es el segundo párrafo


Este es el tercer párrafo

CSS

P, H2
Texto-transformación: minúsculas;

El código anterior genera la siguiente salida:

Cada letra se transforma en la letra minúscula.

Cómo usar el valor de capitalización para la propiedad de transformación de texto

Como sugiere el nombre en sí, capitalizó la primera letra de cada palabra. El siguiente ejemplo mostrará el funcionamiento del valor de capitalización.

Ejemplo

En el siguiente script, cada letra del documento está en minúsculas y el valor de Capitaize se utiliza para el elemento H2, por lo que convertirá la primera letra de cada palabra en capital:

Html

Propiedad de transformación de texto


Este es el primer párrafo


Este es el segundo párrafo


Este es el tercer párrafo

CSS

H2
Texto-transformación: capitalizar;

El código anterior genera la siguiente salida:

La primera letra de cada palabra se transforma en una letra mayúscula.

Cómo usar Ninguno Valor para la propiedad de transformación de texto

El ninguno El valor evita todo el texto de la transformación del texto I.mi. hace que todos los personajes. El siguiente ejemplo le permitirá comprender cómo usar "ninguno"Valor para la propiedad de transformación de texto.

Ejemplo

La siguiente pieza de código implementa la propiedad de transformación de texto en un elemento P, H2:

Html

Propiedad de transformación de texto


Este es el primer párrafo


Este es el segundo párrafo


Este es el tercer párrafo

CSS

P, H2
Texto-transformación: ninguno;

El código anterior no cambiaría la apariencia del texto:

Todo el texto permanece sin cambios.

Conclusión

CSS proporciona una propiedad de transformación de texto para controlar la transformación del texto I.mi. En minúsculas y mayúsculas convierten todas las letras en minúsculas y mayúsculas, respectivamente, y el valor de ninguno presenta el texto en el caso predeterminado. La propiedad de capitalización hace que el primer carácter de cada palabra sea en mayúscula.

Este artículo explica cómo usar la propiedad de transformación de texto. ¿Cuáles son los valores que se pueden usar para la propiedad de transformación de texto y cómo afectan estos valores la apariencia del texto??