Panduan untuk sifat teks CSS: font-weight dan text-transform

Panduan atribut teks CSS: font-weight dan text-transform

Apabila membangunkan halaman web, kita selalunya perlu menggayakan teks untuk menyesuaikan diri dengan lebih baik dengan keperluan reka bentuk halaman. Antaranya, ketebalan fon dan penukaran teks ialah dua atribut gaya teks yang biasa digunakan. Dalam artikel ini, kami akan meneroka sifat font-weight dan text-transform dalam CSS dan memberikan contoh kod khusus.

1. atribut berat fon
   atribut berat fon digunakan untuk menetapkan ketebalan fon. Dalam CSS, nilai berikut tersedia:

   • normal: fon normal (lalai)
   • bold: fon tebal
   • bold: lebih tebal daripada tahap sebelumnya (jika tiada tahap yang lebih tebal, ia digunakan Tahap paling kasar )
   • lebih ringan: lebih halus daripada aras sebelumnya (jika tiada aras yang lebih halus, aras terbaik digunakan)
   • 100, 200, 300, 400, 500, 600, 700, 800, 900: Tetapkan berat fon berdasarkan relatif peringkat

   Berikut ialah beberapa kod contoh yang menunjukkan cara menggunakan atribut berat fon untuk menetapkan berat fon:

   p.normal {
     font-weight: normal;
   }
   
   p.bold {
     font-weight: bold;
   }
   
   p.bolder {
     font-weight: bolder;
   }
   
   p.lighter {
     font-weight: lighter;
   }
   
   p.custom {
     font-weight: 600;
   }

2. atribut transformasi teks
   Atribut transformasi teks digunakan untuk menetapkan kesan transformasi teks . Dalam CSS, nilai berikut tersedia:

   • tiada: tiada kesan penukaran (nilai lalai)
   • huruf besar: besarkan huruf pertama
   • huruf besar: semua huruf besar
   • huruf kecil: semua huruf kecil
   :
   • inherit warisan elemen Nilai atribut text-transform

   Berikut ialah beberapa contoh kod yang menunjukkan cara menggunakan atribut text-transform untuk menetapkan kesan transformasi teks:

   p.none {
     text-transform: none;
   }
   
   p.capitalize {
     text-transform: capitalize;
   }
   
   p.uppercase {
     text-transform: uppercase;
   }
   
   p.lowercase {
     text-transform: lowercase;
   }
   
   p.inherit {
     text-transform: inherit;
   }

   Perlu diingat bahawa atribut text-transform hanya mempengaruhi kesan paparan teks tanpa mengubah kes sebenar.

Ringkasan:
Berat fon dan penukaran teks ialah atribut gaya teks yang biasa digunakan semasa membangunkan halaman web. Dengan menggunakan sifat font-weight dan text-transform, kami boleh menetapkan ketebalan dan penukaran kes teks dengan mudah. Dalam pembangunan sebenar, kami boleh menggunakan kedua-dua atribut ini secara fleksibel mengikut keperluan reka bentuk yang berbeza dan kandungan teks untuk menjadikan teks memberikan kesan terbaik pada halaman.

Semoga artikel ini dapat membantu anda memahami dan menggunakan sifat berat fon dan transformasi teks dengan lebih baik. Mari cipta gaya teks yang lebih cantik dan boleh dibaca semasa membina halaman web!

Atas ialah kandungan terperinci Panduan untuk sifat teks CSS: font-weight dan text-transform. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!