Apakah itu Sifat Tersuai CSS (Menggunakan Sengkang Berganda)?

DDD
Lepaskan: 2024-11-24 08:46:11
asal
179 orang telah melayarinya

What are CSS Custom Properties (Using Double Dashes)?

Menyingkap Sifat CSS Double-Dash Arcane

Dalam bidang CSS, sintaks yang pelik telah muncul, menggunakan sempang berganda terkemuka (- -) untuk awalan nama harta. Notasi misteri ini telah membingungkan ramai pembangun, menyebabkan mereka menggaru kepala untuk mendapatkan jawapan.

Jangan takut, kerana fenomena misteri ini menyimpan rahsia yang mendalam. Sifat misteri ini, juga dikenali sebagai sifat tersuai, adalah kunci untuk membuka kunci kuasa pembolehubah CSS. Dengan mengisytiharkan sifat tersuai dalam elemen akar, seperti yang dilihat dalam kod contoh yang disediakan, anda memberikan diri anda keupayaan untuk mentakrif dan menggunakan semula nilai di seluruh helaian gaya anda.

Standard CSS menyediakan panduan komprehensif untuk ciri transformatif ini. Menurut halaman W3C Spec, sifat tersuai terdiri daripada dua bahagian:

  1. Pengisytiharan Pembolehubah: Di sinilah anda menetapkan nilai kepada harta tersuai anda. Diisytiharkan dalam elemen akar, ia tersedia untuk semua elemen bersarang.
  2. Penggunaan Pembolehubah: Untuk menggunakan sifat tersuai yang ditentukan, anda hanya merujuknya menggunakan fungsi var(). Ini membolehkan anda menggunakan nilai sifat pada mana-mana pemilih dalam kod CSS anda.

Sebagai contoh, pertimbangkan contoh berikut:

:root {
  --main-color: #05c;
  --accent-color: #056;
}

#foo h1 {
  color: var(--main-color);
}
Salin selepas log masuk

Dalam senario ini, sifat tersuai - -warna utama ditakrifkan dalam unsur akar. Nilai ini kini boleh digunakan pada sifat warna pemilih #foo h1 menggunakan var(--main-color).

Sifat tersuai menawarkan pelbagai faedah, termasuk kebolehgunaan semula kod yang dipertingkatkan, penukaran tema yang lebih mudah dan enkapsulasi dipertingkatkan. Dengan menerima ciri hebat ini, anda boleh membawa tahap keanggunan dan kecekapan baharu kepada pembangunan CSS anda.

Atas ialah kandungan terperinci Apakah itu Sifat Tersuai CSS (Menggunakan Sengkang Berganda)?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
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