Untuk beberapa pelajaran sekarang kami telah menjadi lebih canggih dengan memformat teks menggunakan CSS, dan kali ini kami belajar cara menukar kes teks. Dalam hal ini, helaian gaya berlatarkan membuka kemungkinan yang sangat luas untuk kita, dan lebih tepat lagi, kita boleh:

• Paparkan semua teks dalam huruf besar;
• Pilih semua teks dalam huruf kecil;
• Pastikan bahawa huruf pertama setiap perkataan bermula dengan huruf besar.

"Ini semua bagus, sudah tentu, tetapi bilakah ia diperlukan?" - anda bertanya. Mari bayangkan situasi di mana anda perlu memaparkan semua item menu dalam huruf besar. Untuk melakukan ini, anda tidak perlu menaipnya, termasuk kekunci CapsLock, atau sambil menahan butang Shift. Ia akan mencukupi untuk menetapkan semua item senarai untuk dipaparkan dalam huruf besar dengan mencipta peraturan yang sepadan dalam fail CSS. Dan ini hanyalah satu daripada banyak situasi yang mungkin.

sifat transformasi teks

Kami akan mengawal kes teks menggunakan sifat transformasi teks. Ia mempunyai 4 nilai utama - huruf besar (huruf besar), huruf kecil (huruf kecil), huruf besar (huruf besar untuk setiap huruf pertama perkataan, nilai lain tidak berubah), tiada (pemformatan tidak digunakan) . Pada pandangan pertama, semua ini mungkin kelihatan sangat rumit kepada anda.

Perkara utama adalah jangan panik...

Tetapi dalam amalan semuanya agak mudah, seperti yang anda akan lihat sekarang. Perkara utama ialah memilih pemilih yang betul, kerana nilai-nilai sifat transformasi teks diwarisi.

Gunakan huruf besar

Pertama sekali, saya cadangkan menetapkan semua teks kepada huruf besar, yang mana kami membuat peraturan CSS berikut:

Isi (teks-transformasi: huruf besar; )

Pada dasarnya, tiada yang rumit, kami hanya menggunakan nilai huruf besar. Seperti yang mereka katakan, semuanya adalah intuitif. Inilah rupanya dalam kehidupan sebenar:

Semua dengan huruf besar... Huruf kecil - digunakan untuk semua

Langkah seterusnya ialah menggunakan huruf kecil di mana-mana dengan menulis yang berikut:

Isi (teks-transformasi: huruf kecil; )

Seperti yang anda mungkin sudah meneka, dua makna yang baru kita temui sedikit sebanyak adalah antonim. Dan dalam ilustrasi di bawah anda boleh melihat hasil harta yang baru dibuat.

Halaman web dengan huruf kecil didayakan Kami menyerlahkan huruf pertama setiap perkataan dalam huruf besar

Untuk melakukan ini, kita hanya perlu menggunakan nilai yang sepadan:

Isi (teks-transformasi: huruf besar; )

Saya tidak tahu berapa kerap anda akan menggunakan peraturan CSS sedemikian, tetapi anda tidak akan rugi untuk mengetahui tentang kemungkinan sedemikian, terutamanya apabila menyelesaikan masalah yang tidak remeh. Hasilnya boleh dilihat pada gambar di bawah.

Teks selepas menggunakan huruf besar

Akhir sekali, mari kita lihat nilai terakhir - tiada. Seperti yang telah saya katakan, ia boleh digunakan untuk membatalkan warisan daripada ibu bapa. Sebagai contoh, mari kita bayangkan bahawa kita mempunyai semua peraturan sebelumnya yang berkuat kuasa, dan untuk perenggan kita harus membatalkannya, untuk ini kita menulis perkara berikut:

P (teks-transformasi: tiada; )

Saya berani menganggap bahawa semuanya jelas kepada anda, jika tidak, tanya soalan anda dalam komen. Dan itu sahaja untuk saya. Saya harap tutorial CSS ini membantu anda. Jika benar:

• Siarkan semula artikel ini di rangkaian sosial supaya lebih ramai orang boleh mendapat manfaat daripadanya;
• Langgan surat berita saya supaya tidak terlepas catatan blog yang berguna dan menarik.

Di sinilah saya tidak mengucapkan selamat tinggal kepada anda. Terima kasih atas perhatian anda dan jumpa lagi dalam penerbitan seterusnya!

Tukar huruf kecil kepada huruf kecil dan huruf besar pertama menggunakan CSS(8)

Tiada pilihan klausa topi dalam CSS. Jawapan lain yang mencadangkan transformasi teks: huruf besar tidak betul kerana pilihan ini menggunakan setiap perkataan untuk setiap perkataan .

Di sini kurang ajar Cara untuk melakukan ini adalah jika anda mahu huruf pertama setiap elemen menjadi huruf besar, tetapi itu pastinya tidak jauh dari sekatan sebenar:

P ( text-transform: huruf kecil; ) p:first-huruf ( text-transform: huruf besar; )

INI ADALAH CONTOH AYAT.

INI CONTOH LAGI AYAT. DAN INI ADALAH SATU LAGI, TETAPI IA AKAN BERHURUF RENDAH KESELURUHANNYA.

Bagaimana untuk menukar huruf HURUF BESAR kepada huruf kecil dan huruf pertama Huruf Besar untuk setiap ayat seperti yang ditunjukkan di bawah menggunakan CSS sahaja?

Daripada: INI ADALAH CONTOH APLIKASI.

Kepada: Ini adalah ayat anggaran.

Kemas kini: Apabila saya menggunakan text-transform: capize; Hasilnya masih sama.

Anda tidak boleh melakukan ini semata-mata dengan CSS. Terdapat atribut text-transform, tetapi ia hanya menerima none , gunakan huruf besar, huruf besar, huruf kecil dan inherit .

Anda mungkin ingin melihat penyelesaian JS atau penyelesaian sebelah pelayan.

Jika anda boleh membuat semua aksara huruf kecil pada pelayan, anda boleh memohon:

Transformasi teks: huruf besar

Saya tidak fikir transformasi teks akan berfungsi dengan huruf besar sebagai input.

Jika anda ingin menggunakan untuk ini tidak akan berfungsi, untuk atau textarea anda perlu menggunakan Javascript

function capitaliseName() ( var str = document.getElementById("name").value; document.getElementById("name").value = str.charAt(0).toUpperCase() + str.slice(1); )

yang sepatutnya berfungsi dengan baik untuk atau