Kun kirjoitamme mitä tahansa artikkelia tai asiakirjaa, tarvitsemme usein joitain merkkejä tietyissä tapauksissa. Verkkosivulla HTML-elementtiä, jonka tekstiä on muutettava, käytetään CSS-ominaisuuden kanssa ' tekstin muunnos ”. Tämä ominaisuus säästää myös aikaa siten, että kun kaikki merkit on lisätty, niiden kirjainkoko voidaan muuttaa kerralla.

Tämä viesti opettaa sinulle, kuinka voimme muuttaa tekstin tapauksia CSS:llä. Joten, aloitetaan!

Kuinka kirjoittaa isoja ja pieniä kirjaimia CSS:n avulla?

CSS:ssä ' tekstin muunnos ”-ominaisuus hallitsee tekstin isojen kirjainten käyttöä. Sitä käytetään myös muuttamaan tekstiä isoiksi tai pieniksi kirjaimiksi.

text-transform Property Values

CSS-tekstinmuunnosominaisuuden mahdolliset arvot on lueteltu alla:

• • ' isot kirjaimet ”: Tämä arvo muuttaa kaikki elementin tekstin merkit isoilla kirjaimilla.
  • ' pienet kirjaimet ”: Tämä arvo muuttaa elementin tekstin pienillä kirjaimilla.
  • ' isolla ”: Tämä arvo muuttaa jokaisen sanan ensimmäisen kirjaimen isolla kirjaimella.
  • ' ei mitään ”: Tämä arvo rajoittaa elementin tekstiä muokattavaksi.
  • ' alkukirjain ”: Tämä arvo asettaa oletusarvon.
  • ' inherit ”: Tämä arvo asettaa arvon sen yläelementistä.

Analysoi alla olevaa esimerkkiä!

Esimerkki: Tekstin muuntaminen isoiksi ja pieniksi kirjaimiksi

Lisää ensin div-elementti luokan nimellä ' laatikko ”. Lisää tekstin sisäpuolelle kolme otsikkotunnistetta

,

ja

, joissa

-otsikon teksti on kaikki isoilla kirjaimilla,

on pienillä kirjaimilla ja kolmas on myös pienillä kirjaimilla.

Alla on HTML-koodi:

< div luokkaa = 'laatikko' >
< h1 > pienet kirjaimet: TERVETULOA LINUXHINTIHIN h1 >
< h2 > isot kirjaimet: tervetuloa linuxhintiin h2 >
< h3 > isolla kirjaimella: tervetuloa linuxhintiin h3 >
div >

Tyylilaatikko div

.laatikko {
korkeus: 200px;
leveys: 80 % ;
reunus: 4px kiinteä #e4cfcf;
taustaväri: kadetinsininen;
marginaali: 1px auto;
täyte: 10px;
}

Yllä olevaan HTML-tiedostoon luotu div on nyt tyylitelty CSS-ominaisuuksilla, jotka selitetään alla:

• • ' korkeus ” käytetään divn korkeuden asettamiseen.
  • ' leveys ' käytetään div-osan leveyden asettamiseen.
  • ' rajaa ” -ominaisuutta käytetään elementin ympärille reunukseen, joka on 4 kuvapistettä leveä, yhtenäinen viivatyyppinen ja väri #e4cfcf.
  • ' taustaväri ” määrittää elementin taustavärin.
  • ' marginaali ”-ominaisuus säätää tilaa elementin joka puolella.
  • ' pehmuste ” -ominaisuutta hyödynnetään tuottamaan tilaa div-elementin sisällön ympärille tai elementin reunuksen sisään.

Alla olevat koodilohkot osoittavat, että kaikki otsikkoelementit on tyylitelty erilaisilla tekstimuunnosominaisuuksien arvoilla.

-elementtiä käytetään ominaisuudella text-transform arvolla ' pienet kirjaimet ”:

h1 {
tekstin muunnos: pienet kirjaimet;
}

-elementtiä käytetään text-transform-ominaisuuden kanssa, jonka arvo on asetettu ' isot kirjaimet ':

h2 {
tekstin muunnos: isot kirjaimet;
}

Elementille

tekstimuunnosominaisuuden arvoksi asetetaan ' isolla ”:

h3 {
tekstin muunnos: isoilla kirjaimilla;
}

Antamalla yllä mainitun koodin, ensimmäisen otsikon teksti muunnetaan kaikki pieniksi ja toinen otsikko isoiksi. Kunkin sanan ensimmäinen kirjain kirjoitetaan isolla kolmannessa otsikossa:

Loistava! Olemme onnistuneesti oppineet muuttamaan tekstin isoilla ja pienillä kirjaimilla ja isoilla kirjaimilla.

Johtopäätös

CSS:n tekstinmuunnosominaisuus ohjaa tekstin isojen kirjainten käyttöä ja sitä käytetään muuttamaan asiakirjan tekstin kirjainkokoja. Tämä ominaisuus koskee kaikkia elementtejä, joissa tämän ominaisuuden arvot voivat olla isoja, pieniä kirjaimia, isoja kirjaimia tai ei mitään. Tässä blogissa on selitetty tekstin muuntaminen isoiksi ja pieniksi CSS-tekstinmuunnosominaisuuden avulla.