CSS - Senarai: Mengubah Bulet-bulet Biasa menjadi Rekaan yang cantik

Hai sana, bakat super desain web masa depan! Hari ini, kita akan melihat dunia yang menakjubkan CSS senarai. Siapkan sabuk keselamatan anda, karena kita akan mengubah senarai default yang membosankan menjadi unsur yang menarik dan membuat halaman web anda berkedip!

Senarai HTML: Blok Pembinaan

Sebelum kita mulai menata, mari kita reviu jenis senarai HTML yang akan kita gunakan:

Senarai Tak Terurut

<ul>
<li>Kopi</li>
<li>Tea</li>
<li>Susu</li>
</ul>

Ini akan membuat senarai bertitik, sempurna untuk saat urutan tidak penting.

Senarai Terurut

<ol>
<li>Bangun tidur</li>
<li>Kode</li>
<li>Tidur</li>
</ol>

Ini akan membuat senarai berangka, ideal untuk urutan atau peringkat.

Senarai Deskripsi

<dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>

Ini akan membuat senarai istilah dan deskripsinya, bagus untuk kamus atau FAQ.

Properti Senarai - CSS: Alat Pemformatan Anda

Sekarang kita memiliki dasar HTML, mari kita jelajahi properti CSS yang akan mentransformasi senarai kita:

Properti	Deskripsi
list-style-type	Menentukan jenis penanda item senarai
list-style-image	Menentukan gambar sebagai penanda item senarai
list-style-position	Menentukan posisi penanda item senarai
list-style	Properti singkat untuk menata semua properti senarai

Penanda Item Senarai atau gaya bullet: Pilih Petarungmu!

Mari kita mulai dengan list-style-type. Properti ini membolehkan anda mengubah penampilan penanda senarai. Ini adalah contoh yang menyenangkan:

ul {
list-style-type: square;
}

ol {
list-style-type: lower-roman;
}

CSS ini akan membuat bullet senarai tak terurut menjadi kotak dan nomor senarai terurut menjadi angka Romawi kecil. Bagaimana itu untuk mewah!

Anda juga dapat menggunakan list-style-type: none; untuk menghapus penanda sepenuhnya. Ini bagus untuk membuat menu navigasi khusus.

Penanda Item Senarai - Gambar (Menggunakan Gambar Bullet Khusus)

Ingin menjadi kreatif? Mari kita gunakan gambar sebagai titik bullet:

ul {
list-style-image: url('tiny-coffee-cup.png');
}

Sekarang setiap item senarai akan memiliki cangkir kopi kecil sebagai bullet. Sempurna untuk menu kafe!

Penanda Senarai - Posisi atau Posisi Bullet

Properti list-style-position menentukan apakah penanda berada di dalam atau di luar aliran konten:

ul {
list-style-position: inside;
}

Ini akan memindahkan bullet ke dalam blok konten, yang dapat menciptakan penampilan rapi dan kompak.

List-style - Properti Singkat: Solusi Semua-dalam-satu

Mengapa menggunakan tiga properti saat Anda dapat menggunakan satu? Properti list-style singkat membolehkan Anda menata jenis, gambar, dan posisi semua sekaligus:

ul {
list-style: square outside url('tiny-coffee-cup.png');
}

Ini menata bullet kotak, posisinya di luar konten, dan menggunakan gambar cangkir kopi (kembali ke kotak jika gambar tidak dimuat).

Penghitungan Senarai Terkontrol: Mengambil kendali atas Angka

Untuk senarai terurut, CSS3 memperkenalkan beberapa fitur yang kuat. Lihat ini:

ol {
list-style-type: decimal;
start: 5;
}

ol li:nth-child(even) {
list-style-type: lower-alpha;
}

Ini akan memulai senarai kita dari nomor 5 dan membuat setiap item genap menggunakan huruf kecil instead of angka. Itu seperti sihir!

Pemformatan Senarai dengan Warna: Catakan Senarai Anda cantik

Jangan lupa, anda dapat menata item senarai seperti elemen lainnya:

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

ul li {
background-color: #fff;
margin: 5px;
padding: 10px;
border-radius: 5px;
}

Ini akan membuat latar belakang abu-abu untuk senarai, dengan setiap item memiliki efek "kartu" putih.

Menggabungkan Segala Hal

Mari kita gabungkan segala hal yang kita pelajari ke dalam satu senarai super-stylish:

<ul class="fancy-list">
<li>Belajar HTML</li>
<li>Memahami CSS</li>
<li>Menjadi penyihir web</li>
</ul>

.fancy-list {
list-style: none;
padding: 0;
background-color: #f0f0f0;
border-radius: 10px;
overflow: hidden;
}

.fancy-list li {
padding: 15px;
margin: 0;
border-bottom: 1px solid #ddd;
position: relative;
padding-left: 40px;
}

.fancy-list li:last-child {
border-bottom: none;
}

.fancy-list li:before {
content: '✨';
position: absolute;
left: 15px;
color: #ff6b6b;
}

.fancy-list li:hover {
background-color: #ff6b6b;
color: white;
transition: all 0.3s ease;
}

.fancy-list li:hover:before {
color: white;
}

Ini akan membuat senarai yang cantik dengan bullet "sparkle" khusus, efek hover, dan penampilan modern ramping.

Dan begitu saja, teman-teman! Anda telah meningkatkan keterampilan pemformatan senarai anda. Ingat, kunci untuk menguasai CSS adalah latihan dan eksperimen. Jangan takut mencoba kombinasi yang berani - anda mungkin menemukan gaya tanda tangan berikutnya!

Selamat mengode dan may senarai anda selalu stylish! ?✨

Credits: Image by storyset