Rumah > hujung hadapan web > tutorial css > transform teks (harta CSS)

transform teks (harta CSS)

尊渡假赌尊渡假赌尊渡假赌
Lepaskan: 2025-02-26 12:14:09
asal
491 orang telah melayarinya

text-transform (CSS property) CSS

Penjelasan terperinci mengenai atribut text-transform Harta ini digunakan untuk mengawal penukaran kes kandungan teks elemen.

tatabahasa:

Keterangan:
text-transform: capitalize | lowercase | none | uppercase | inherit;
Salin selepas log masuk
Salin selepas log masuk

Atribut Tentukan bagaimana kandungan teks elemen ditukar kepada huruf besar, huruf kecil, atau inisial.

text-transform Contoh:

Peraturan gaya berikut membuat tajuk menggunakan hanya huruf besar, sementara huruf awal setiap perkataan dalam tajuk dimodalkan:

h1 Nilai atribut: h2

h1 {
  text-transform: uppercase;
}
h2 {
  text-transform: capitalize;
}
Salin selepas log masuk

: Tukar huruf pertama setiap perkataan ke huruf besar;
  • capitalize : Tukar semua aksara ke huruf kecil.
  • lowercase : Tiada penukaran kes dilakukan.
  • none : Tukar semua aksara ke huruf besar.
  • uppercase : mewarisi
  • nilai atribut elemen induk.
  • inherit css text-transform atribut FAQ:

1. text-transform

Properties adalah alat yang berkuasa yang membolehkan anda mengawal kes teks. Ia boleh digunakan untuk menukar teks ke huruf besar, huruf kecil, atau memanfaatkan huruf awal setiap perkataan. Harta ini berfungsi dengan mengambil teks asal dan menukarnya berdasarkan nilai yang anda tetapkan. Sebagai contoh, jika anda menetapkan nilai kepada "huruf besar", semua huruf dalam teks akan ditukar kepada huruf besar, tanpa mengira bagaimana mereka pada asalnya ditaip.

text-transform 2.

Untuk menukar teks ke huruf besar menggunakan harta CSS text-transform, hanya tetapkan nilai harta kepada "huruf besar". Berikut adalah contoh bagaimana untuk melakukannya:

Dalam contoh ini, semua teks di dalam elemen 'P' akan ditukar kepada huruf besar. text-transform

3.

text-transform

Ya, anda boleh memanfaatkan huruf awal setiap perkataan menggunakan atribut CSS
p {
  text-transform: uppercase;
}
Salin selepas log masuk
. Untuk melakukan ini, anda perlu menetapkan nilai harta itu untuk "memanfaatkan". Berikut adalah contoh:

Dalam contoh ini, huruf awal setiap perkataan dalam elemen 'H1' akan dipermodalkan. text-transform 4.

Nilai "huruf besar" dalam text-transform CSS

menukarkan semua huruf dalam teks ke huruf besar, manakala nilai "memanfaatkan" hanya menukar huruf pertama setiap perkataan ke huruf besar. Surat -surat yang tersisa dalam perkataan akan kekal dalam keadaan menaip asalnya.
h1 {
  text-transform: capitalize;
}
Salin selepas log masuk

5. text-transform

Ya, anda boleh menukar teks ke huruf kecil menggunakan harta CSS

. Untuk melakukan ini, anda perlu menetapkan nilai harta itu kepada "huruf kecil". Berikut adalah contoh: text-transform

text-transform: capitalize | lowercase | none | uppercase | inherit;
Salin selepas log masuk
Salin selepas log masuk
Dalam contoh ini, semua teks di dalam elemen 'Div' akan ditukar kepada huruf kecil.

6. text-transform Ya, kesan atribut CSS

boleh dibatalkan. Untuk melakukan ini, anda perlu menetapkan nilai harta itu kepada "Tiada". Ini mengembalikan teks kepada keadaan asalnya tanpa sebarang transformasi.

text-transform

7.

text-transform Ya, atribut CSS boleh digunakan untuk mana -mana elemen HTML yang mengandungi teks. Ini termasuk unsur -unsur seperti "p", "h1", "div", "span".

text-transform 8.

tidak, CSS harta tidak mengubah teks asal. Ia hanya mengubah bagaimana teks muncul di skrin. Teks asal tetap tidak berubah dalam dokumen HTML. text-transform

9.

text-transform

Tidak, anda hanya boleh menggunakan satu CSS pada satu masa

nilai atribut. Jika anda cuba menggunakan pelbagai nilai, hanya nilai terakhir yang digunakan. text-transform 10.

text-transform Ya, semua pelayar moden menyokong CSS

sifat, termasuk Chrome, Firefox, Safari, dan Edge. Walau bagaimanapun, versi lama pelayar ini mungkin tidak menyokongnya, jadi lebih baik untuk memeriksa keserasian pelayar sebelum menggunakan harta ini.

Atas ialah kandungan terperinci transform teks (harta CSS). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan