Rumah > Artikel > hujung hadapan web > Bolehkah pembolehubah var digunakan dalam css?
Bolehkah pembolehubah var digunakan dalam css?
- WBOYasal
- 2022-06-06 16:57:422039semak imbas
Pembolehubah var boleh digunakan dalam css; anda boleh menggunakan fungsi var() untuk memasukkan nilai pembolehubah css boleh mengakses DOM, dan anda juga boleh menggunakan fungsi ini untuk membaca pembolehubah . Sintaks ialah "var(nama pembolehubah, nilai)", nilai parameter kedua boleh digunakan untuk mewakili nilai lalai pembolehubah.
Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.
Bolehkah pembolehubah var digunakan dalam css?
Fungsi var() digunakan untuk memasukkan nilai atribut tersuai Kaedah ini berguna jika nilai atribut digunakan di berbilang tempat. Fungsi
var() digunakan untuk memasukkan nilai pembolehubah CSS.
Pembolehubah CSS mempunyai akses kepada DOM, yang bermaksud anda boleh membuat pembolehubah dengan skop tempatan atau global, mengubah suai pembolehubah menggunakan JavaScript dan mengubah suai pembolehubah berdasarkan pertanyaan media.
Cara yang bagus untuk menggunakan pembolehubah CSS melibatkan warna reka bentuk anda. Anda boleh meletakkannya dalam pembolehubah dan bukannya menyalin dan menampal warna yang sama berulang kali.
Sintaks fungsi var() adalah seperti berikut:
var(name, value)
nama diperlukan. Nama pembolehubah (bermula dengan dua sempang).
nilai pilihan. Nilai sandaran (digunakan jika pembolehubah tidak dijumpai).
Cara var() berfungsi
Pertama: Pembolehubah CSS boleh mempunyai skop global atau setempat.
Pembolehubah global boleh diakses/digunakan di seluruh dokumen, manakala pembolehubah tempatan hanya boleh digunakan di dalam pemilih di mana ia diisytiharkan.
Untuk mencipta pembolehubah dengan skop global, isytiharkannya dalam pemilih :root. Pemilih :root sepadan dengan elemen akar dokumen.
Untuk mencipta pembolehubah dengan skop setempat, isytiharkannya dalam pemilih tempat ia akan digunakan.
Contoh berikut adalah sama seperti di atas, tetapi di sini kita menggunakan fungsi var().
Pertama, kami mengisytiharkan dua pembolehubah global (--biru dan --putih). Kami kemudian menggunakan fungsi var() untuk memasukkan nilai pembolehubah kemudian dalam lembaran gaya:
Instance
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--blue: #1e90ff;
--white: #ffffff;
}
body {
background-color: var(--blue);
}
h2 {
border-bottom: 2px solid var(--blue);
}
.container {
color: var(--blue);
background-color: var(--white);
padding: 15px;
}
button {
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}
</style>
</head>
<body>
<h1>使用 var() 函数</h1>
<div class="container">
<h2>Welcome to Shanghai!</h2>
<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China.</p>
<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China.</p>
<p>
<button>Yes</button>
<button>No</button>
</p>
</div>
</body>
</html>Hasil keluaran:
(Belajar perkongsian video: tutorial video css)
Atas ialah kandungan terperinci Bolehkah pembolehubah var digunakan dalam css?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!