Mientras escribimos cualquier artículo o documento, a menudo necesitamos que algunos caracteres estén en casos específicos. En una página web, el elemento HTML cuyo texto requiere ser transformado se aplica con la propiedad CSS “ transformación de texto ”. Esta propiedad también ahorra tiempo de tal manera que después de agregar todos los caracteres, su caso se puede transformar a la vez.

Esta publicación le enseñará cómo podemos cambiar los casos de texto con CSS. Entonces, ¡comencemos!

¿Cómo poner texto en mayúsculas y minúsculas usando CSS?

En CSS, el “ transformación de texto La propiedad ” controla las mayúsculas del texto. También se utiliza para convertir texto en mayúsculas o minúsculas.

valores de propiedad de transformación de texto

Los posibles valores de la propiedad de transformación de texto CSS se enumeran a continuación:

• • “ mayúscula ”: este valor hace que todos los caracteres del texto del elemento estén en mayúscula.
  • “ minúsculas ”: este valor cambia el texto del elemento a minúsculas.
  • “ capitalizar ”: Este valor altera la primera letra de cada palabra en mayúscula.
  • “ ninguno ”: Este valor restringe el texto del elemento para su modificación.
  • “ inicial ”: este valor establece el valor predeterminado.
  • “ tu heredas ”: este valor establece su valor a partir de su elemento principal.

¡Analice el siguiente ejemplo!

Ejemplo: transformar texto en mayúsculas y minúsculas

Primero, agregue un elemento div con el nombre de clase ' caja ”. Dentro del cuerpo, agregue tres etiquetas de encabezado

,

y

, donde el texto del encabezado

está todo en mayúsculas,

está en minúsculas y el tercero también está en minúsculas.

A continuación se muestra el código HTML:

< división clase = 'caja' >
    < h1 > minúsculas: BIENVENIDO A LINUXHINT h1 >
    < h2 > mayúscula: bienvenido a linuxhint h2 >
    < h3 > mayúsculas: bienvenido a linuxhint h3 >
división >

 
caja de estilo div

.caja {
altura: 200px;
ancho: 80 % ;
borde: 4px sólido #e4cfcf;
color de fondo: azul cadete;
margen: 1px automático;
relleno: 10px;
}

 
El div creado en el archivo HTML anterior ahora tiene un estilo con propiedades CSS que se explican a continuación:

• • “ altura ” se utiliza para establecer la altura del div.
  • “ ancho ” se utiliza para establecer el ancho del div.
  • “ frontera ” se utiliza para aplicar el borde alrededor del elemento, que tiene un ancho de 4px, tipo de línea continua y color #e4cfcf.
  • “ color de fondo ” especifica el color de fondo del elemento.
  • “ margen La propiedad ” ajusta el espacio en cada lado del elemento.
  • “ relleno La propiedad ” se utiliza para producir espacio alrededor del contenido del elemento div o dentro del borde del elemento.

Los bloques de código a continuación indican que todos los elementos de encabezado están diseñados con diferentes valores de las propiedades de transformación de texto. El elemento

se aplica con la propiedad text-transform con el valor establecido como ' minúsculas ”:

h1 {
transformación de texto: minúsculas;
}

 
El elemento

se aplica con la propiedad de transformación de texto con el valor establecido como ' mayúscula ”:

h2 {
transformación de texto: mayúsculas;
}

 
Para el elemento

, el valor de la propiedad de transformación de texto se establece como ' capitalizar ”:

h3 {
transformación de texto: capitalizar;
}

 
Al proporcionar el código mencionado anteriormente, el texto del primer encabezado se transforma todo en minúsculas y el segundo encabezado en mayúsculas. Considerando que la primera letra de cada palabra está en mayúscula en el tercer encabezado:

¡Estupendo! Hemos aprendido con éxito cómo transformar el texto en mayúsculas, minúsculas y todo en mayúsculas.

Conclusión

La propiedad de transformación de texto de CSS controla las mayúsculas del texto y se utiliza para cambiar las mayúsculas y minúsculas del texto del documento. Esta propiedad se aplica a todos los elementos, donde los valores de esta propiedad pueden ser mayúsculas, minúsculas, mayúsculas o ninguno. Este blog ha explicado el procedimiento para convertir texto a mayúsculas y minúsculas usando la propiedad de transformación de texto CSS.