Dalam kuliah ini, kita akan menyelami blok binaan CSS: pemilih dan sifat. Ini ialah konsep penting yang membolehkan anda menyasarkan elemen tertentu pada halaman web anda dan menggayakannya dengan berkesan.
Pemilih CSS ialah corak yang digunakan untuk memilih elemen HTML yang anda mahu gayakan. Jenis pemilih yang berbeza membolehkan anda menggunakan gaya pada pelbagai elemen berdasarkan teg, kelas, ID, atribut dan banyak lagi.
Pemilih Elemen (Jenis):
p { color: green; }
Ini akan menukar warna semua
unsur kepada hijau.
Pemilih Kelas:
.highlight { background-color: yellow; }
Dalam HTML anda, mana-mana elemen dengan class="highlight" akan mempunyai latar belakang kuning.
<p class="highlight">This is highlighted text.</p>
Pemilih ID:
#header { font-size: 24px; }
Hanya elemen dengan id="header" akan mempunyai saiz fon 24px.
<div id="header">Welcome to My Website</div>
Pemilih Kumpulan:
h1, h2, h3 { color: blue; }
Peraturan ini akan menjadikan semua
Pemilih Keturunan:
div p { font-style: italic; }
Ini akan menjadikan semua
elemen di dalam
<div> <p>This text is italicized because it's inside a div.</p> </div>
Sifat CSS mentakrifkan aspek elemen terpilih yang ingin anda gayakan. Setiap sifat diikuti dengan nilai yang menentukan hasil yang diingini.
Warna:
h1 { color: red; }
Warna Latar Belakang:
body { background-color: #f0f0f0; }
Saiz Fon:
p { font-size: 16px; }
Margin:
.box { margin: 20px; }
Padding:
.content { padding: 10px; }
Mari gabungkan apa yang telah kita pelajari dengan contoh mudah.
HTML:
<div id="container"> <h1>Welcome to CSS Basics</h1> <p class="intro">This is an introduction to CSS selectors and properties.</p> <p>Selectors help you target elements, and properties allow you to style them.</p> </div>
CSS:
/* ID Selector */ #container { border: 2px solid black; padding: 10px; } /* Element Selector */ h1 { color: purple; } /* Class Selector */ .intro { background-color: lightblue; font-size: 18px; } /* Group Selector */ h1, p { font-family: Arial, sans-serif; } /* Descendant Selector */ #container p { margin-bottom: 15px; }
Dalam contoh ini:
elemen menggunakan fon Arial.
Seterusnya: Dalam kuliah seterusnya, kami akan meneroka Model Kotak CSS dan mempelajari cara jidar, sempadan, pelapik dan kandungan digabungkan untuk menentukan reka letak anda elemen web. Jumpa anda di sana!
LinkedIn- Ridoy Hasan
-
Atas ialah kandungan terperinci CSS: pemilih dan sifat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!