CSS - Pembolehubah

Hai there, para pemaju web yang sedang belajar! Hari ini, kita akan melihat dunia yang menarik pembolehubah CSS. Seperti teman pendidik komputer di sebelah jalan, saya sangat gembira untuk membimbing anda dalam perjalanan ini. Percayalah, pada akhir pelajaran ini, anda akan dapat menggabungkan pemilih CSS seperti seorang profesional!

Apa Itu Pembolehubah CSS?

Sebelum kita masuk ke dalam, mari kita faham apa pembolehubah itu. Dalam CSS, pembolehubah adalah simbol khas yang membolehkan kita mencipta hubungan antara pemilih. Mereka membantu kita menargetkan elemen khusus berdasarkan kedudukan mereka dalam pepohon dokumen. Ber fikir tentang mereka seperti saus rahsia yang memberi CSS anda kekuatan super!

Sekarang, mari kita jelajahi setiap pembolehubah secara terperinci.

Pembolehubah CSS - Pembolehubah Descendant (spasi)

Pembolehubah descendant adalah yang paling mudah dan paling kerap digunakan. Ia ditunjukkan oleh spasi antara dua pemilih. Ia memilih semua elemen yang adalah descendant dari elemen yang ditentukan.

Mari kita lihat contoh:

<div class="container">
<pIni adalah paragraf di dalam penampungan.</p>
<section>
<pIni adalah paragraf di dalam seksyen di dalam penampungan.</p>
</section>
</div>

.container p {
color: biru;
}

Dalam contoh ini, semua elemen <p> di dalam .container akan menjadi biru, tanpa mengira seberapa dalam mereka disembunyikan. Seperti katakan, "Hey CSS, cari semua paragraf yang adalah anak, cucu, atau setiap tahap descendant dari kelas penampungan!"

Pembolehubah CSS - Menggunakan Senarai

Sekarang, apa kalau kita mahu apply gaya yang sama ke beberapa pemilih? Itulah di mana pembolehubah senarai membantu. Ia bukan benar-benar pembolehubah dalam ertian tradisional, tetapi ia adalah teknik yang berguna untuk diketahui.

h1, h2, h3 {
font-family: Arial, sans-serif;
}

Pemilih ini akan apply Arial font ke semua <h1>, <h2>, dan <h3> elemen. Seperti katakan CSS, "Hey, buat semua jenis tajuk ini gunakan Arial font!"

Pembolehubah CSS - Pembolehubah Anak (>)

Pembolehubah anak adalah lebih khusus daripada pembolehubah descendant. Ia hanya memilih anak langsung elemen.

<ul class="menu">
<li>Beranda</li>
<li>Tentang
<ul>
<li>Team Kita</li>
<li>Sejarah Kita</li>
</ul>
</li>
<li>Hubungi</li>
</ul>

.menu > li {
font-weight: bold;
}

Dalam contoh ini, hanya <li> elemen aras atas (Beranda, Tentang, Hubungi) akan menjadi tebal. Item bersarang (Team Kita, Sejarah Kita) tidak akan dipengaruhi. Seperti katakan, "CSS, buat hanya anak langsung .menu tebal!"

Pembolehubah CSS - Pembolehubah Saudara Sampingan (+)

Pembolehubah saudara sampingan memilih elemen yang secara langsung selepas elemen khusus lain.

<h1>Selamat Datang ke Laman Web Kita</h1>
<pIni adalah paragraf pertama.</p>
<pIni adalah paragraf kedua.</p>

h1 + p {
font-style: italic;
}

Di sini, hanya paragraf pertama selepas <h1> akan diitalic. Seperti katakan CSS, "Cari paragraf yang betul-betul selepas h1 dan jadikan ia italic!"

Pembolehubah CSS - Pembolehubah Saudara Umum (~)

Pembolehubah saudara umum adalah seperti pembolehubah saudara sampingan, tetapi kurang ketat. Ia memilih semua elemen yang adalah saudara kepada elemen yang ditentukan.

<h1>Produk Kita</h1>
<pParagraf pengenalan</p>
<div class="product">Produk 1</div>
<pKeterangan 1</p>
<div class="product">Produk 2</div>
<pKeterangan 2</p>

.product ~ p {
font-size: 0.9em;
}

Dalam kes ini, semua <p> elemen yang datang selepas .product div akan mempunyai saiz font yang lebih kecil. Seperti katakan, "CSS, cari semua paragraf yang adalah saudara kepada elemen .product dan buat mereka agak kecil!"

Pembolehubah CSS - Penyusunan Pembolehubah

Sekarang, mari kita lihat di mana hal ini menjadi sangat menarik. Kita boleh menyusun pembolehubah untuk mencipta pemilih yang lebih kompleks!

<div class="container">
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Subitem 2.1</li>
<li>Subitem 2.2</li>
</ul>
</li>
<li>Item 3</li>
</ul>
</div>

.container > ul > li ul > li {
color: merah;
}

Pemilih ini berkata: "Cari <li> elemen yang adalah anak langsung kepada <ul>, yang adalah anak langsung kepada <li>, yang adalah anak langsung kepada <ul>, yang adalah anak langsung kepada .container." Waw! Itu banyak, tetapi ia membolehkan target yang sangat tepat.

Dalam contoh kami, hanya "Subitem 2.1" dan "Subitem 2.2" akan merah.

Petua Pembolehubah

Ini adalah jadual ringkasan semua pembolehubah yang kita telah belajar:

Pembolehubah	Simbol	Contoh	Keterangan
Descendant	(spasi)	div p	Memilih semua <p> di dalam <div>
Anak	>	div > p	Memilih semua <p> yang adalah anak langsung kepada <div>
Saudara Sampingan	+	h1 + p	Memilih <p> segera selepas <h1>
Saudara Umum	~	h1 ~ p	Memilih semua <p> yang adalah saudara kepada <h1>

Ingat, latihan membawa ke sempurna! Cobalah mengesan pembolehubah ini dalam projek anda sendiri. Sebelum anda tahu, anda akan dapat menggunakan CSS seperti seorang ahli sihir web!

Saya harap panduan ini telah membantu. Pembolehubah CSS mungkin kelihatan sukar pada permulaan, tetapi mereka adalah alat yang sangat kuat sekali anda menguasai mereka. Terus kod, terus belajar, dan lebih importantly, bersenang-senang dengannya!

Credits: Image by storyset