CSS - Penyisah: Catatan Panduan untuk Halaman Web yang Stylish

Halo sana, super bintang desain web masa depan! Saya sangat senang menjadi panduanmu dalam perjalanan menarik ini melalui dunia penyisah CSS. Sebagai orang yang telah mengajar ilmu komputer selama lebih dari satu dekade, saya bisa katakan bahwa menguasai penyisah adalah seperti membuka peti kesugihan kemungkinan desain web. Jadi, mari kita masuk dan bikin halaman webmu bersinar!

Jenis Penyisah

Sebelum kita mulai petualangan kita, mari kita lihat secara cepat jenis penyisah yang berbeda yang kita akan jelajahi:

Jenis Penyisah	Contoh	Deskripsi
Universal	*	Memilih semua elemen
Elemen	p	Memilih semua elemen
Kelas	.classname	Memilih elemen dengan class="classname"
ID	#idname	Memilih elemen dengan id="idname"
Atribut	[attribute]	Memilih elemen dengan atribut tertentu
Grup	selector1, selector2	Memilih semua elemen yang cocok dengan salah satu penyisah
Pseudo-class	:hover	Memilih elemen dalam keadaan tertentu
Pseudo-element	::first-line	Memilih bagian dari elemen
Descendant	div p	Memilih semua elemen di dalam elemen
Child	div > p	Memilih semua elemen dimana orang tua adalah
Adjacent Sibling	div + p	Memilih elemen pertama yang datang langsung setelah
General Sibling	div ~ p	Memilih semua elemen yang bersaudara dengan elemen

Sekarang, mari kita jelajahi masing-masing dari ini secara detil!

Penyisah Universal CSS

Penyisah universal adalah seperti pisau瑞士 Army knife CSS - ia memilih semua! Itu direpresentasikan oleh tanda bintang (*).

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

Kode ini mengreset margin dan padding untuk semua elemen dan mengatur properti box-sizing. Ini sering digunakan di awal stylesheet untuk membuat lembaran kosong.

Penyisah Elemen CSS

Penyisah elemen mengarahkan elemen HTML tertentu. Mereka sederhana tapi kuat.

p {
font-size: 16px;
line-height: 1.5;
}

h1 {
color: #333;
font-family: 'Arial', sans-serif;
}

Di sini, kita menyesuaikan semua

elemen agar memiliki ukuran font 16 pixel dan tinggi baris 1.5. Kita juga memberikan semua

elemen warna abu-abu gelap dan mengatur font mereka ke Arial.

Penyisah Kelas CSS

Penyisah kelas sangat fleksibel. Mereka memungkinkan Anda untuk menerapkan gaya ke banyak elemen yang berbagi kelas yang sama.

.highlight {
background-color: yellow;
font-weight: bold;
}

.error-message {
color: red;
border: 1px solid red;
padding: 10px;
}

Dalam contoh ini, setiap elemen dengan class="highlight" akan memiliki latar belakang kuning dan teks tebal. Elemen dengan class="error-message" akan ditampilkan dalam merah dengan border merah dan beberapa padding.

Penyisah ID CSS

Penyisah ID digunakan untuk menyesuaikan elemen tunggal, unik. Mereka diawali oleh simbol hash (#).

#header {
background-color: #f0f0f0;
padding: 20px;
}

#main-content {
max-width: 800px;
margin: 0 auto;
}

Kode ini menyesuaikan elemen dengan id="header" dan elemen dengan id="main-content". Ingat, ID harus unik dalam halaman!

Penyisah Atribut CSS

Penyisah atribut mengarahkan elemen berdasarkan atribut atau nilai atribut mereka.

[type="text"] {
border: 1px solid #ccc;
padding: 5px;
}

[href^="https"] {
color: green;
}

[class*="btn"] {
cursor: pointer;
}

Di sini, kita menyesuaikan semua elemen dengan type="text", tautan yang dimulai dengan "https", dan elemen yang classnya mengandung "btn".

Penyisah Grup CSS

Penyisah grup memungkinkan Anda untuk menerapkan gaya yang sama ke penyisah ganda. Mereka dipisahkan oleh koma.

h1, h2, h3 {
font-family: 'Georgia', serif;
color: #333;
}

.error, .warning {
font-weight: bold;
}

Kode ini menerapkan gaya yang sama ke h1, h2, dan h3 elemen, dan membuat keduanya .error dan .warning kelas tebal.

Penyisah Pseudo Class CSS

Penyisah pseudo-class mengarahkan elemen dalam keadaan tertentu.

a:hover {
text-decoration: underline;
}

input:focus {
outline: 2px solid blue;
}

li:nth-child(odd) {
background-color: #f0f0f0;
}

Gaya ini menggarisbawah tautan saat di hover, menambah garis di sekitar input yang difokuskan, dan memberikan latar belakang abu-abu ke setiap elemen daftar ganjil.

Penyisah Pseudo Element CSS

Penyisah pseudo-element memungkinkan Anda untuk menyesuaikan bagian tertentu dari elemen.

p::first-letter {
font-size: 2em;
font-weight: bold;
}

h1::before {
content: "? ";
}

div::selection {
background-color: yellow;
}

Kode ini memperbesar dan memberikan gaya tebal ke huruf pertama paragraf, menambah emoji tanda panah sebelum elemen h1, dan membuat teks yang dipilih dalam div memiliki latar belakang kuning.

Penyisah Descendant CSS

Penyisah descendant mengarahkan elemen yang adalah keturunan dari elemen lain.

article p {
line-height: 1.6;
}

.container .box {
border: 1px solid #ccc;
}

Di sini, kita menyesuaikan paragraf di dalam artikel dan elemen dengan class "box" yang berada di dalam elemen dengan class "container".

Penyisah Child CSS

Penyisah child mengarahkan anak langsung dari elemen.

ul > li {
list-style-type: square;
}

div > p {
margin-bottom: 10px;
}

Kode ini memberikan tanda bulet kotak ke list item yang adalah anak langsung dari unordered list, dan menambah margin bawah ke paragraf yang adalah anak langsung dari div.

Penyisah Adjacent Sibling CSS

Penyisah adjacent sibling mengarahkan elemen yang datang langsung setelah elemen lain.

h1 + p {
font-size: 1.2em;
font-weight: bold;
}

.button + .button {
margin-left: 10px;
}

Di sini, kita membuat paragraf pertama setelah h1 lebih besar dan tebal, dan menambah margin kiri ke tombol yang datang langsung setelah tombol lain.

Penyisah General Sibling CSS

Penyisah general sibling mengarahkan elemen yang bersaudara dengan elemen lain, bahkan jika mereka tidak langsung berdekatan.

h1 ~ p {
color: #666;
}

.highlight ~ li {
font-style: italic;
}

Kode ini mengubah warna semua paragraf yang bersaudara dengan elemen h1, dan menambah gaya tebal ke list item yang datang setelah elemen dengan class "highlight".

Penyisah Tertanam di CSS

Penyisah tertanam memungkinkan Anda menulis CSS yang lebih ringkas dan mudah dibaca dengan menanam penyisah di dalam yang lain.

.container {
max-width: 1200px;
margin: 0 auto;

.header {
background-color: #f0f0f0;
padding: 20px;

h1 {
color: #333;
}
}

.content {
padding: 20px;

p {
line-height: 1.6;
}
}
}

Struktur tertanam ini secara jelas menunjukkan hubungan antara elemen dan membuat CSS lebih terorganisir.

Karakteristik Penyisah Tertanam CSS

1. Peningkatan keterbacaan: Tertanam mencerminkan struktur HTML Anda.
2. Penurunan pengulangan: Anda tidak perlu mengulangi penyisah induk.
3. Penyederhanaan pemeliharaan: Perubahan pada penyisah induk secara otomatis diterapkan ke penyisah tertanam.
4. Batasan lingkup: gaya secara alami diberikan untuk konteks induk.

Ingat, meskipun penanaman dapat kuat, jangan tanam terlalu dalam karena itu dapat membuat CSS sulit dipahami dan dipelihara.

Dan itu adalah, murid desain web yang bersemangat! Anda telah menyelesaikan perjalanan cepat melalui penyisah CSS. Dengan alat ini di tangan Anda, Anda sudah siap untuk menciptakan halaman web yang indah. Ingat, latihan membuat sempurna, jadi jangan takut untuk mencoba penyisah dan kombinasi berbeda. Selamat coding!

Credits: Image by storyset