CSS(Cascading Style Sheets) ialah komponen asas pembangunan web yang memainkan peranan penting dalam mengawal penampilan visual elemen HTML di tapak web anda. Ia menyediakan satu set peraturan dan sifat yang berkuasa yang mentakrifkan cara elemen dipaparkan, diformatkan dan diletakkan, membolehkan anda menyesuaikan rupa dan rasa halaman web anda.
Mari kita mulakan dengan memahami konsep pemilih
Pemilih digunakan untuk menyasarkan elemen HTML khusus untuk penggayaan. Salah satu pemilih paling asas ialah pemilih elemen, yang memilih semua contoh elemen HTML tertentu.
Sebagai contoh, peraturan CSS berikut menyasarkan semua perenggan dalam dokumen:
p {
color: blue;
}
Dalam contoh ini, p pemilih memilih semua <p> elemen dan menetapkan warna teksnya kepada biru.
Satu lagi pemilih biasa ialah pemilih kelas
Kelas digunakan untuk mengumpulkan elemen dengan ciri yang serupa. Dengan memberikan kelas kepada elemen HTML, anda boleh menyasarkan dan menggayakannya secara kolektif.
Berikut ialah contoh:
.blue-text {
color: blue;
}
Dalam kes ini, .blue-text pemilih menyasarkan semua elemen dengan kelas blue-text dan menggunakan warna biru pada teks mereka.
Selain itu, ID pemilih membenarkan anda menyasarkan elemen tertentu dengan pengecam uniknya. ID biasanya diberikan kepada elemen individu pada halaman.
Berikut ialah contoh:
#header {
background-color: gray;
}
Dalam contoh ini, #header pemilih memilih elemen dengan ID header dan menggunakan warna latar belakang kelabu padanya.
Beralih kepada sintaks CSS, setiap peraturan CSS terdiri daripada pemilih dan blok pengisytiharan
Blok pengisytiharan disertakan dalam pendakap kerinting {} dan mengandungi satu atau lebih pengisytiharan. Pengisytiharan terdiri daripada harta dan nilai yang sepadan.
Berikut ialah contoh:
h1 {
font-size: 24px;
color: #333;
}
Dalam coretan kod ini, h1 pemilih memilih semua <h1> elemen dan menetapkan saiz fonnya kepada 24 piksel dan warna teks kepada kelabu gelap(#333).
Sepanjang siri ini, kami akan meneroka dan menerangkan pelbagai sifat CSS, pemilih dan gabungannya, membolehkan anda membuat laman web yang menarik secara visual dan tersusun dengan baik. Memahami CSS dan sintaks asasnya akan memberi anda asas untuk mengawal aspek penggayaan halaman web anda, memastikan pengalaman pengguna yang unik dan diperibadikan. Mari selami dan temui kemungkinan CSS tanpa had!