Saat menulis artikel atau dokumen apa pun, kami sering membutuhkan beberapa karakter untuk kasus tertentu. Pada halaman web, elemen HTML yang teksnya perlu diubah diterapkan dengan properti CSS “ transformasi teks ”. Properti ini juga menghemat waktu sedemikian rupa sehingga setelah menambahkan semua karakter, kasingnya dapat diubah sekaligus.

Posting ini akan mengajarkan Anda bagaimana kami dapat mengubah kasus teks dengan CSS. Jadi ayo mulai!

Bagaimana Teks Huruf Besar dan Kecil Menggunakan CSS?

Di CSS, ' transformasi teks ” properti mengontrol kapitalisasi teks. Itu juga digunakan untuk mengubah teks menjadi huruf besar atau kecil.

text-transform Nilai Properti

Nilai yang mungkin dari properti transformasi teks CSS tercantum di bawah ini:

• • “ huruf besar ”: Nilai ini membuat semua karakter dalam teks elemen dikapitalisasi.
  • “ huruf kecil ”: Nilai ini mengubah teks elemen menjadi huruf kecil.
  • “ memanfaatkan ”: Nilai ini mengubah huruf kapital pertama setiap kata.
  • “ tidak ada ”: Nilai ini membatasi teks elemen untuk modifikasi.
  • “ awal ”: Nilai ini menetapkan nilai default.
  • “ mewarisi ”: Nilai ini menetapkan nilainya dari elemen induknya.

Analisislah contoh di bawah ini!

Contoh: Mengubah Teks menjadi Huruf Besar dan Huruf Kecil

Pertama, tambahkan elemen div dengan nama class “ kotak ”. Di dalam body, tambahkan tiga tag heading

,

, dan

, di mana teks heading

semuanya dalam huruf besar,

dalam huruf kecil, dan yang ketiga juga dalam huruf kecil.

Di bawah ini adalah kode HTML:

< div kelas = 'kotak' >
< h1 > huruf kecil: SELAMAT DATANG DI LINUXHINT h1 >
< h2 > huruf besar: selamat datang di linuxhint h2 >
< h3 > kapitalisasi: selamat datang di linuxhint h3 >
div >

Div kotak gaya

.kotak {
tinggi: 200px;
lebar: 80 % ;
perbatasan: 4px padat #e4cfcf;
background-color: cadetblue;
margin: 1px otomatis;
padding: 10px;
}

Div yang dibuat dalam file HTML di atas sekarang ditata dengan properti CSS yang dijelaskan di bawah ini:

• • “ tinggi ” digunakan untuk mengatur ketinggian div.
  • “ lebar ” digunakan untuk mengatur lebar div.
  • “ berbatasan ” digunakan untuk menerapkan batas di sekitar elemen, dengan lebar 4px, tipe garis padat, dan warna #e4cfcf.
  • “ warna latar belakang ” menentukan warna latar belakang elemen.
  • “ batas ” properti menyesuaikan ruang di setiap sisi elemen.
  • “ lapisan ” digunakan untuk menghasilkan ruang di sekitar konten elemen div atau di dalam batas elemen.

Blok kode di bawah ini menunjukkan bahwa semua elemen tajuk diberi gaya dengan nilai properti transformasi teks yang berbeda. Elemen

diterapkan dengan properti text-transform dengan nilai yang ditetapkan sebagai “ huruf kecil ”:

h1 {
transformasi teks: huruf kecil;
}

Elemen

diterapkan dengan properti text-transform dengan nilai yang ditetapkan sebagai “ huruf besar ”:

h2 {
transformasi teks: huruf besar;
}

Untuk elemen

, nilai properti text-transform ditetapkan sebagai “ memanfaatkan ”:

h3 {
transformasi teks: huruf besar;
}

Dengan memberikan kode yang disebutkan di atas, teks dari heading pertama semuanya diubah menjadi huruf kecil dan heading kedua menjadi huruf besar. Sedangkan huruf pertama dari setiap kata dikapitalisasi di judul ketiga:

Besar! Kami telah berhasil mempelajari cara mengubah teks menjadi huruf besar, huruf kecil, dan huruf besar semua.

Kesimpulan

Properti transformasi teks dari CSS mengontrol kapitalisasi teks dan digunakan untuk mengubah kasus teks dokumen. Properti ini berlaku untuk semua elemen, di mana nilai properti ini bisa huruf besar, huruf kecil, kapital, atau tidak ada. Blog ini telah menjelaskan prosedur mengubah teks menjadi huruf besar dan kecil menggunakan properti CSS text-transform.