Apakah sifat adat CSS (pembolehubah) dan cara menggunakannya?

Atribut Custom CSS (iaitu pembolehubah CSS) meningkatkan kecekapan pembangunan dengan menyimpan dan menggunakan semula nilai gaya. Kaedah penggunaan teras termasuk: 1. Gunakan sintaks nama -untuk menentukan dalam: pemilih akar atau spesifik; 2. Pembolehubah rujukan melalui fungsi VAR (-nilai, nilai lalai); 3. Boleh mengemas kini nilai berubah secara dinamik, penukaran topik sokongan, reka bentuk responsif dan senario lain. Peraturan warisan dan lata mereka selaras dengan sifat CSS biasa dan boleh diubahsuai melalui runtime JavaScript untuk mencapai keutamaan pengguna atau pelarasan gaya dinamik.

CSS Custom Ciri -ciri, yang sering disebut sebagai pembolehubah CSS, adalah cara untuk menyimpan dan menggunakan semula nilai di seluruh lembaran styles anda. Mereka menjadikannya lebih mudah untuk menguruskan tema, mengekalkan konsistensi, dan mengurangkan pengulangan. Tidak seperti CSS tradisional, di mana anda perlu mengulangi warna atau nilai fon yang sama beberapa kali, sifat tersuai membolehkan anda menentukannya sekali dan menggunakannya di mana -mana sahaja.

Cara Menentukan Siri Custom CSS

Anda mentakrifkan sifat tersuai menggunakan sintaks khas: Mereka selalu bermula dengan dua sengkang ( -- ) diikuti dengan nama pilihan anda. Ciri -ciri ini adalah scoped, yang bermaksud di mana anda menentukannya mempengaruhi di mana ia boleh digunakan.

Contohnya:

 : root {
  -warna-warna: #007BFF;
  --Font-Size: 16px;
}

Di sini, kami menentukan dua pembolehubah di dalam :root , yang menjadikannya secara global tersedia di seluruh dokumen. Anda juga boleh menentukan pembolehubah pada pemilih yang lebih spesifik jika anda mahu mereka memohon hanya di bahagian tertentu halaman.

Beberapa perkara yang perlu diingat:

• Nama-nama yang berubah-ubah adalah sensitif, jadi --color dan --Color berbeza.
• Anda boleh mengemas kini nilai mereka secara dinamik melalui JavaScript atau pertanyaan media.
• Mereka melambangkan dan mewarisi seperti sifat CSS biasa.

Cara Menggunakan Pembolehubah CSS

Setelah ditakrifkan, anda boleh menggunakan harta tersuai dengan merujuknya dengan fungsi var() . Fungsi ini mengambil nama pembolehubah dan nilai sandaran pilihan jika pembolehubah tidak ditakrifkan.

Contoh Penggunaan:

 butang {
  latar belakang warna: var (-warna primer);
  saiz font: var (-saiz font, 14px);
}

Dalam coretan ini:

• Warna latar belakang butang menggunakan --primary-color kami.
• Jika --font-size tidak ditetapkan di suatu tempat, ia kembali ke 14px .

Ini amat berguna untuk membuat tema atau membenarkan keutamaan pengguna (seperti mod gelap) tanpa menduplikasi potongan besar CSS.

Juga, jangan lupa bahawa pembolehubah bekerja di mana -mana di CSS - bukan hanya di tempat biasa seperti warna atau saiz. Anda juga boleh menggunakannya untuk masa peralihan, tetapan susun atur grid, atau kesan bayangan kompleks.

Kes penggunaan praktikal

Sifat tersuai benar -benar bersinar apabila menguruskan gaya atau tema dinamik. Berikut adalah beberapa aplikasi praktikal:

• Tema Beralih : Tentukan pembolehubah tema cahaya dan gelap dan bertukar -tukar antara mereka.
• Tweak Reka Bentuk Responsif : Laraskan jarak atau saiz fon berdasarkan saiz skrin dengan mengemas kini pembolehubah di dalam pertanyaan media.
• Styleling berasaskan komponen : Tentukan pembolehubah dalam bekas komponen supaya unsur-unsur kanak-kanak dapat mewarisi gaya khusus konteks.

Katakan anda mempunyai komponen kad. Daripada padding pengekodan atau radius sempadan, anda boleh melakukan sesuatu seperti:

 .card {
  --kad-padding: 1rem;
  --kadus: 8px;

  padding: var (-kad-padding);
  Radius sempadan: var (-radius kad);
}

Sekarang, jika anda memerlukan variasi kad dengan jarak yang berlainan atau jejari sudut, anda hanya boleh mengatasi pembolehubah tersebut dalam subkelas:

 .card.featured {
  --kad-padding: 2rem;
}

Ini menjadikan gaya asas anda bersih dan boleh diguna semula semasa membuat override mudah.

Mengemas kini pembolehubah dengan JavaScript

Salah satu kelebihan terbesar pembolehubah CSS ialah mereka boleh diubah semasa runtime menggunakan JavaScript. Ini membuka kemungkinan untuk perubahan gaya yang didorong oleh pengguna atau penangkapan dinamik.

Untuk mengemas kini pemboleh ubah dari JavaScript:

 document.documenteLement.style.setProperty ('-warna primer', '#ff5722');

Ini akan mengubah pembolehubah --primary-color di seluruh dunia. Jika anda ingin menyasarkan elemen tertentu dan bukannya akar, pilih elemen itu terlebih dahulu.

Anda mungkin menggunakan ini untuk:

• Biarkan pengguna memilih warna tema dari pemetik.
• Beralih ke mod kontras tinggi untuk aksesibiliti.
• Nilai animasi dari masa ke masa (misalnya, untuk elemen UI interaktif).

Ingatlah bahawa menukar pemboleh ubah pembolehubah semua tempat di mana ia digunakan - tidak perlu mengemas kini secara manual setiap peraturan CSS.

Pada dasarnya itu sahaja.

Atas ialah kandungan terperinci Apakah sifat adat CSS (pembolehubah) dan cara menggunakannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!