Al escribir cualquier artículo o documento, a menudo necesitamos algunos personajes para estar en casos específicos. En una página web, el elemento HTML cuyo texto requiere transformarse 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 de inmediato.

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

Cómo superar el texto y el texto en minúsculas usando CSS?

En CSS, el "transformación de texto"La propiedad controla la capitalización del texto. También se utiliza para convertir el 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 en el texto del elemento sean capitalizados.
  • "minúscula": Este valor cambia el texto del elemento a minúsculas.
  • "capitalizar": Este valor altera la primera letra de cada palabra capitalizada.
  • "ninguno": Este valor restringe el texto del elemento para la modificación.
  • "inicial": Este valor establece el valor predeterminado.
  • "heredar": Este valor establece su valor de su elemento principal.

Analice el ejemplo a continuación!

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

Primero, agregue un elemento Div con el nombre de la clase "caja". Dentro del cuerpo, agregue tres etiquetas de encabezado

,

, y

, donde el texto del

El encabezado está todo en mayúscula,

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

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

minúsculas: bienvenido a Linuxhint

Eppercase: Bienvenido a Linuxhint

Capitalizar: Bienvenido a Linuxhint

Estilo Box Div

.caja
Altura: 200px;
Ancho: 80%;
borde: 4px Solid #E4CFCF;
Color de fondo: CadetBlue;
Margen: 1px Auto;
relleno: 10px;

El DIV creado en el archivo HTML anterior ahora tiene el estilo de 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.
  • "bordeLa propiedad se utiliza para aplicar el borde alrededor del elemento, que es de 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.
  • "rellenoLa 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

El elemento se aplica con la propiedad de texto de texto con el valor establecido como "minúscula":

H1
Texto-transformación: minúsculas;

El

El elemento se aplica con la propiedad de transformación de texto con el valor establecido como "mayúscula":

H2
Texto-transformación: upcase;

Para

Elemento, el valor de la propiedad de transformación de texto se establece como "capitalizar":

H3
Texto-transformación: capitalizar;

Al proporcionar el código mencionado anteriormente, el texto del primer encabezado se transforma en letras minúsculas y el segundo encabezado a la mayúscula. Mientras que la primera letra de cada palabra se capitaliza en el tercer rumbo:

Excelente! Hemos aprendido con éxito cómo transformar el texto en mayúsculas, minúsculas y todos capitalizados.

Conclusión

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