Semasa menulis mana-mana artikel atau dokumen, kami sering memerlukan beberapa aksara untuk berada dalam kes tertentu. Pada halaman web, elemen HTML yang teksnya perlu diubah digunakan dengan sifat CSS “ teks-transformasi ”. Sifat ini juga menjimatkan masa sedemikian rupa sehingga selepas menambah semua aksara, kes mereka boleh diubah sekaligus.

Siaran ini akan mengajar anda cara kami boleh menukar kes teks dengan CSS. Jadi, mari kita mulakan!

Bagaimana Teks Huruf Besar dan Huruf Kecil Menggunakan CSS?

Dalam CSS, ' teks-transformasi ” harta mengawal huruf besar teks. Ia juga digunakan untuk menukar teks kepada huruf besar atau huruf kecil.

text-transform Nilai Harta

Nilai yang mungkin bagi sifat transformasi teks CSS disenaraikan di bawah:

• • “ huruf besar ”: Nilai ini menjadikan semua aksara dalam teks elemen itu huruf besar.
  • “ huruf kecil ”: Nilai ini menukar teks elemen kepada huruf kecil.
  • “ bermodalkan ”: Nilai ini mengubah huruf pertama setiap perkataan dengan huruf besar.
  • “ tiada ”: Nilai ini mengehadkan teks elemen untuk pengubahsuaian.
  • “ permulaan ”: Nilai ini menetapkan nilai lalai.
  • “ kamu mewarisi ”: Nilai ini menetapkan nilainya daripada elemen induknya.

Cermati contoh di bawah ini!

Contoh: Mengubah Teks kepada Huruf Besar dan Huruf Kecil

Pertama, tambahkan elemen div dengan nama kelas ' kotak ”. Di dalam badan, tambahkan tiga teg tajuk

,

dan

, dengan teks tajuk

semuanya dalam huruf besar,

dalam huruf kecil dan yang ketiga juga dalam huruf kecil.

Di bawah ialah kod HTML:

< div kelas = 'kotak' >
< h1 > huruf kecil: SELAMAT DATANG KE LINUXHINT h1 >
< h2 > huruf besar: selamat datang ke linuxhint h2 >
< h3 > capitalize: selamat datang ke linuxhint h3 >
div >

Div kotak gaya

.kotak {
ketinggian: 200px;
lebar: 80 % ;
sempadan: 4px pepejal #e4cfcf;
warna latar belakang: biru kadet;
margin: 1px auto;
padding: 10px;
}

Div yang dibuat dalam fail HTML di atas kini digayakan dengan sifat CSS yang diterangkan di bawah:

• • “ ketinggian ” digunakan untuk menetapkan ketinggian div.
  • “ lebar ” digunakan untuk menetapkan lebar div.
  • “ sempadan sifat ” digunakan untuk menggunakan sempadan di sekeliling elemen, iaitu 4px lebar, jenis garisan pepejal dan warna #e4cfcf.
  • “ warna latar belakang ” menentukan warna latar belakang elemen.
  • “ margin ” harta melaraskan ruang pada setiap sisi elemen.
  • “ padding ” hartanah digunakan untuk menghasilkan ruang di sekeliling kandungan elemen div atau di dalam sempadan elemen.

Blok kod di bawah menunjukkan bahawa semua elemen tajuk digayakan dengan nilai berbeza bagi sifat transformasi teks. Elemen

digunakan dengan transformasi teks sifat dengan nilai ditetapkan sebagai “ huruf kecil ”:

h1 {
text-transform: huruf kecil;
}

Elemen

digunakan dengan sifat transformasi teks dengan nilai yang ditetapkan sebagai “ huruf besar ”:

h2 {
text-transform: huruf besar;
}

Untuk elemen

, nilai sifat transformasi teks ditetapkan sebagai “ bermodalkan ”:

h3 {
text-transform: huruf besar;
}

Dengan menyediakan kod yang disebutkan di atas, teks tajuk pertama semuanya diubah menjadi huruf kecil dan tajuk kedua kepada huruf besar. Manakala huruf pertama setiap perkataan ditulis dengan huruf besar dalam tajuk ketiga:

Hebat! Kami telah berjaya mempelajari cara mengubah teks menjadi huruf besar, huruf kecil dan semua huruf besar.

Kesimpulan

Sifat transformasi teks CSS mengawal huruf besar teks dan digunakan untuk menukar kes teks dokumen. Sifat ini digunakan pada semua elemen, dengan nilai sifat ini boleh menjadi huruf besar, huruf kecil, huruf besar atau tiada. Blog ini telah menerangkan prosedur menukar teks kepada huruf besar dan huruf kecil menggunakan sifat transformasi teks CSS.