Bagaimana untuk menukar kes teks dalam perenggan menggunakan CSS?-tutorial css-php.cn

Bagaimana untuk menukar kes teks dalam perenggan menggunakan CSS?

王林

Lepaskan： 2023-08-26 21:01:04

ke hadapan

687 orang telah melayarinya

如何使用 CSS 更改段落中文本的大小写？

CSS (Cascading Style Sheets) ialah alat yang berkuasa untuk mengawal reka letak dan penampilan teks di tapak web anda. Dalam artikel ini, kita akan belajar cara menukar kes teks dalam perenggan menggunakan CSS.

Apabila bercakap tentang penggayaan teks di tapak web, salah satu pilihan penggayaan asas dan biasa ialah menukar kes teks, kita boleh melakukannya dengan mudah menggunakan sifat transformasi teks dalam CSS. Atribut transformasi teks boleh mengambil salah satu daripada nilai berikut -

"Capital" akan menggunakan huruf besar pada huruf pertama setiap perkataan dalam elemen yang dipilih.
"Capital" akan menukar semua teks dalam elemen yang dipilih kepada huruf besar.
"huruf kecil" akan menukar semua teks dalam elemen yang dipilih kepada huruf kecil.

Untuk menukar kes teks dalam perenggan, mula-mula kita perlu memilih elemen perenggan menggunakan pemilih CSS. Sebagai contoh, untuk menukar kes teks dalam perenggan kepada huruf besar, kami akan menggunakan CSS berikut -

p {
   text-transform: uppercase;
}

Salin selepas log masuk

Contoh

Berikut ialah contoh penggunaan CSS untuk menukar kes teks dalam perenggan.

<html>
<head>
   <title>Change the cases of text in paragraphs using CSS</title>
   <style>
      body{
         text-align:center;
      }
      .capitalize{
         color: blue;
         text-transform: capitalize;
      }
      .uppercase{
         color: red;
         text-transform: uppercase;
      }
      .lowercase{
         color: green;
         text-transform: lowercase;
      }
   </style>
</head>
<body>
   <h2>Change the cases of text in paragraphs using CSS</h2>
   <p class="capitalize">capitalize the first letter of each word in the selected element</p>
   <p class="uppercase">Converted all the text in the selected element to uppercase letters</p>
   <p class="lowercase">CONVERTED ALL THE TEXT IN SELECTES ELEMENT TO LOWERCASE LETTERS</p>
</body>
</html>

Salin selepas log masuk

Kesimpulan

Untuk menukar kes teks dalam perenggan, sifat transformasi teks dalam CSS ialah cara terbaik untuk menukar kes teks dalam perenggan.

Atas ialah kandungan terperinci Bagaimana untuk menukar kes teks dalam perenggan menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!