Mentre escrivim qualsevol article o document, sovint necessitem que alguns caràcters estiguin en casos concrets. En una pàgina web, l'element HTML el text del qual cal transformar s'aplica amb la propietat CSS ' text-transformació ”. Aquesta propietat també estalvia temps de manera que després d'afegir tots els personatges, el seu cas es pot transformar alhora.

Aquesta publicació us ensenyarà com podem canviar els casos de text amb CSS. Així doncs, comencem!

Com escriure en majúscules i minúscules amb CSS?

En CSS, el ' text-transformació ” La propietat controla la majúscula del text. També s'utilitza per convertir text en majúscules o minúscules.

Valors de propietat text-transform

Els valors possibles de la propietat CSS text-transform es mostren a continuació:

• • “ majúscula ”: aquest valor fa que tots els caràcters del text de l'element es posin en majúscula.
  • “ minúscula ”: aquest valor canvia el text de l'element a minúscules.
  • “ majúscules ”: aquest valor altera la primera lletra de cada paraula en majúscula.
  • “ cap ”: aquest valor restringeix el text de l'element per modificar-lo.
  • “ inicial ”: aquest valor estableix el valor predeterminat.
  • “ tu heretes ”: aquest valor estableix el seu valor a partir del seu element pare.

Analitza l'exemple següent!

Exemple: Transformació de text en majúscules i minúscules

Primer, afegiu un element div amb el nom de classe ' Caixa ”. Dins del cos, afegiu tres etiquetes d'encapçalament

,

i

, on el text de l'encapçalament

està tot en majúscula,

en minúscula i el tercer també en minúscula.

A continuació es mostra el codi HTML:

< div classe = 'Caixa' >
< h1 > minúscula: BENVINGUTS A LINUXHINT h1 >
< h2 > majúscules: benvingut a linuxhint h2 >
< h3 > majúscules: benvingut a linuxhint h3 >
div >

Caixa d'estil div

.Caixa {
alçada: 200px;
amplada: 80 % ;
vora: 4px sòlid #e4cfcf;
color de fons: blau cadet;
marge: 1px automàtic;
farciment: 10px;
}

El div creat al fitxer HTML anterior té ara un estil amb propietats CSS que s'expliquen a continuació:

• • “ alçada ” s'utilitza per establir l'alçada de la div.
  • “ amplada ” s'utilitza per configurar l'amplada del div.
  • “ frontera La propietat s'utilitza per aplicar la vora al voltant de l'element, que és de 4 píxels d'amplada, tipus de línia sòlida i color #e4cfcf.
  • “ color de fons ” especifica el color de fons de l'element.
  • “ marge ”La propietat ajusta l'espai a cada costat de l'element.
  • “ farciment La propietat s'utilitza per produir espai al voltant del contingut de l'element div o dins de la vora de l'element.

Els blocs de codi següents indiquen que tots els elements d'encapçalament tenen un estil amb diferents valors de les propietats de transformació de text. L'element

s'aplica amb la propietat text-transform amb el valor establert com a ' minúscula ”:

h1 {
text-transformació: minúscula;
}

L'element

s'aplica amb la propietat text-transform amb el valor definit com a ' majúscula ”:

h2 {
text-transformació: majúscula;
}

Per a l'element

, el valor de la propietat text-transform s'estableix com a ' majúscules ”:

h3 {
text-transformar: majúscules;
}

En proporcionar el codi esmentat anteriorment, el text del primer encapçalament es transforma en lletres minúscules i el segon en majúscules. Mentre que la primera lletra de cada paraula s'escriu en majúscula al tercer encapçalament:

Genial! Hem après amb èxit com transformar el text en majúscules, minúscules i tot en majúscules.

Conclusió

La propietat de transformació de text de CSS controla la majúscula del text i s'utilitza per canviar les majúscules del text del document. Aquesta propietat s'aplica a tots els elements, on els valors d'aquesta propietat poden ser majúscules, minúscules, majúscules o cap. Aquest bloc ha explicat el procediment de conversió de text a majúscules i minúscules mitjançant la propietat CSS text-transform.