Menetapkan penanda daftar dengan berbagai cara. Saya ingin mengubah jenis penanda ke simbol lain

daftar CSS— sekumpulan properti yang bertanggung jawab atas desain daftar. Menggunakan daftar HTML sangat umum saat membuat bilah navigasi situs web. Item daftar mewakili kumpulan elemen blok.

Menggunakan properti CSS standar, Anda bisa mengubah penampilan penanda daftar, tambahkan gambar untuk penanda, dan juga mengubah lokasi penanda. Ketinggian blok penanda dapat diatur dengan properti line-height.

Mendesain daftar menggunakan gaya CSS

1. Tipe penanda daftar tipe gaya daftar

Properti mengubah jenis penanda atau menghilangkan penanda untuk daftar berpoin dan bernomor. Diwarisi.

Sintaksis

Ul (tipe gaya daftar: tidak ada;) ul (tipe gaya daftar: persegi;) ol (tipe gaya daftar: tidak ada;) ol (tipe gaya daftar: alfa rendah;) Beras. 1. Contoh perancangan daftar berpoin dan bernomor

2. Gambar untuk item daftar gambar gaya daftar

Anda dapat menggunakan gambar dan isian gradien sebagai penanda item daftar. Diwarisi.

Sintaksis

Ul (gambar-gaya-daftar: url("images/romb.png");) ul (gambar-gaya-daftar: gradien-linier(#FF7A2F 0, #FF7A2F 50%, #FFB214 50%);)
Beras. 2. Rancang daftar poin menggunakan gambar
Beras. 3. Rancang daftar berpoin menggunakan gradien

3. Posisi gaya daftar

Properti ini menyediakan kemampuan untuk menempatkan penanda di luar atau di dalam konten item daftar. Diwarisi.

Ada dua cara populer untuk mengubah warna poin agar berbeda dari warna teks.

Penggunaan

Di dalam setiap elemen

membuat desain

Dalam hal ini, warna penanda ditentukan oleh properti gaya warna untuk pemilih li, dan warna teks ditentukan oleh pemilih rentang (contoh 1).

Contoh 1: Menggunakan Tag Bersarang

• Biola
• Gitar
• Bagpipe
• organ organ
• Celesta

Hasil dari contoh ini ditunjukkan di bawah ini (Gambar 1).

Beras. 1. Penanda yang warnanya berbeda dengan teks utama

Meskipun sederhana, metode ini merepotkan, terutama dengan daftar yang banyak, karena sekarang Anda harus menambahkan setiap item daftar .

Penggunaan :: sebelumnya

Intinya adalah ini: kita menghapus penanda daftar asli melalui properti tipe gaya daftar dan menambahkan penanda kita sendiri menggunakan elemen semu ::before dan properti konten. Tautan ini memungkinkan Anda menyisipkan teks atau simbol apa pun sebelum suatu elemen, dalam hal ini

Contoh 1: Menggunakan Tag Bersarang

HTML5 CSS 2.1 YAITU Cr Op Sa Fx

• Biola
• Gitar
• Bagpipe
• organ organ
• Celesta

Hasil dari contoh ini ditunjukkan di bawah ini (Gambar 1).

Beras. 1. Penanda yang warnanya berbeda dengan teks utama

Meskipun sederhana, metode ini merepotkan, terutama dengan daftar yang besar, karena sekarang Anda harus menambahkan tag ke setiap item daftar . Oleh karena itu, mari kita lihat metode cerdas yang seluruhnya didasarkan pada CSS.

Intinya begini: kita menghapus penanda daftar asli melalui properti tipe gaya daftar dan menambahkan penanda kita sendiri menggunakan elemen semu :before dan properti konten. Tautan ini memungkinkan Anda menyisipkan teks atau simbol apa pun sebelum suatu elemen, dalam hal ini LI . Selain itu, jenis teks (warna, font, latar belakang, dll.) juga dapat dikontrol melalui gaya, seperti yang ditunjukkan pada contoh 2. Di sini simbol paragraf ¶ digunakan sebagai penanda.

Contoh 2: Menggunakan elemen semu:before

HTML5 CSS 2.1 YAITU Cr Op Sa Fx

• Utara
• Selatan
• Barat
• Timur

Hasil dari contoh ini ditunjukkan pada Gambar. 2.

Beras. 2. Penanda dibuat menggunakan gaya

Ubah warna poin dalam daftar HTML tanpa menggunakan rentang (6)

Bagi saya pilihan terbaik adalah dengan menggunakan elemen pseudo CSS, jadi untuk disc bullet disc akan terlihat seperti ini:

ul ( tipe gaya daftar: tidak ada; ) li ( posisi: relatif; ) li:sebelum ( konten: ""; tampilan: blok; posisi: absolut; lebar: 5px; /* sesuaikan dengan kebutuhan Anda */ tinggi: 5px; /* sesuaikan dengan kebutuhan Anda */ radius batas: 50%; /* sesuaikan dengan kebutuhan Anda */ atas: 0,5em; /* sesuaikan dengan kebutuhan Anda * / )

• Pertama
• Kedua
• ketiga

• lebar dan tinggi harus bernilai sama agar pointer tetap bulat
• Anda dapat mengatur radius batas ke nol jika Anda ingin memiliki peluru persegi

Untuk gaya peluru lainnya, Anda dapat menggunakan bentuk css lainnya https://css-tricks.com/examples/ShapesOfCSS/ (pilih yang ini yang tidak memerlukan elemen semu seperti segitiga)

Saya bertanya-tanya apakah ada cara untuk mengubah warna poin dalam daftar.

Saya punya daftar:

• Rumah
• Kebun

Tidak mungkin memasukkan apa pun ke dalam li, seperti "span" dan "p". Bisakah saya mengubah warna poin tetapi tidak mengubah teksnya dengan cara yang cerdas?

Jika Anda bisa menggunakan gambar, Anda bisa melakukannya. Dan tanpa gambar, Anda tidak akan bisa mengubah warna poin, bukan teksnya.

Menggunakan gambar

Li ( daftar-gaya-gambar: url(gambar/gambaranda.jpg); )

Tanpa menggunakan gambar

Maka Anda perlu mengedit markup HTML dan sertakan rentang di dalam daftar dan cat serta rentang dengan warna berbeda.

Saya juga sangat menyukai jawaban Mark - Saya memerlukan satu set UL dengan warna berbeda dan jelas akan lebih mudah jika menggunakan kelas saja. Ini yang saya gunakan untuk jeruknya, misalnya:

Ul.orange ( gaya daftar: tidak ada; padding: 0px; ) ul.orange > li:before ( konten: "\25CF "; ukuran font: 15px; warna: #F00; margin-kanan: 10px; padding: 0px ;tinggi garis: 15 piksel;

Selain itu, saya menemukan bahwa kode hex yang saya gunakan untuk "konten:" berbeda dengan kode Marc (lingkaran hex itu tampak terlalu tinggi). Yang saya gunakan tampaknya berada tepat di tengah , lingkaran, dll.)

Kita bisa menggabungkan list-style-image dengan svg s semampu kita menyematkan di css! Metode ini menawarkan kontrol luar biasa terhadap “peluru” yang bisa menjadi apa saja.

Untuk mendapatkan lingkaran merah cukup gunakan css berikut:

"); }

Tapi ini baru permulaan. Hal ini memungkinkan kita melakukan hal gila apa pun yang kita inginkan dengan peluru ini. lingkaran atau persegi panjang itu mudah, tapi apa pun yang bisa Anda gambar dengan svg, Anda bisa pergi ke sana! Lihat contoh apel apel di bawah ini:

ul ( gambar-gaya-daftar: url("data:gambar/svg+xml, "); ) ul ul ( gambar gaya daftar: url("data:gambar/svg+xml, "); ) ul ul ul ( gambar-gaya-daftar: url("data:gambar/svg+xml, "); ) ul ul ul ul ( gambar gaya daftar: url("data:gambar/svg+xml, "); ) ul.bulls-eye ( gambar-gaya-daftar: url("data:gambar/svg+xml, "); ) ul.multi-warna ( gambar-gaya-daftar: url("data:gambar/svg+xml, "); }

• Lingkaran besar!
  • Persegi panjang besar!
  • B
    • Lingkaran kecil!
    • C
      • Persegi panjang kecil!

• Banteng
• mata.

• Multi
• warna

Lebar/tinggi atribut

Beberapa browser memerlukan atribut lebar dan tinggi untuk disetel

Pengkodean

Berdasarkan solusi @Marc dan @jessica, inilah solusi yang saya gunakan:

Li ( posisi:relatif; ) li:sebelum ( konten:""; tampilan: blok; posisi: absolut; lebar: 6px; tinggi:6px; radius-batas:6px; kiri: -20px; atas: .5em; latar belakang- warna: #000;

Saya menggunakan em untuk ukuran font, jadi jika Anda menyetel top ke .5em, itu akan selalu ditempatkan di tengah baris pertama teks Anda. Saya menggunakan left:-20px karena ini adalah posisi default left:-20px di browser: parent padding/2

Saya tahu ini adalah pertanyaan yang sangat, sangat lama, tetapi saya memainkannya dan menemukan cara yang belum pernah saya lihat. Beri warna pada daftar, lalu ganti warna teks menggunakan ::first-line selector::first-line . Saya bukan ahli, jadi mungkin ada yang salah dengan pendekatan ini yang saya lewatkan, tapi sepertinya berhasil.

li ( warna: biru; ) li::baris pertama ( warna: hitam; )

• Rumah
• Kebun

Tugas

Ubah tampilan penanda dalam daftar dan ganti dengan simbol lain.

Larutan

DENGAN menggunakan HTML atau CSS diperbolehkan untuk mengatur salah satu dari tiga jenis penanda: disc (titik), lingkaran (lingkaran), persegi (persegi). Anda perlu menambahkan nilai-nilai ini ke gaya properti tipe gaya daftar, yang ditentukan untuk pemilih UL atau LI (contoh 1).

Contoh 1: Penanda standar

HTML5 CSS 2.1 YAITU Cr Op Sa Fx

• Cheburashka
• Buaya Gena
• Shapoklyak

DI DALAM dalam contoh ini Sebuah persegi digunakan sebagai penanda (Gbr. 1).

Beras. 1. Jenis penanda

Memilih dan mengatur simbol penanda Anda sendiri terjadi dengan cara yang sangat unik, melalui elemen semu :before. Langkah pertama adalah menghapus semua poin dari daftar dengan menyetel properti tipe gaya daftar ke none, lalu menambahkan elemen semu :before ke pemilih LI. Output simbol itu sendiri dilakukan dengan menggunakan properti content, yang nilainya adalah teks atau simbol yang diinginkan (contoh 2).

Contoh 2: Menggunakan:sebelum dan konten

HTML5 CSS 2.1 YAITU Cr Op Sa Fx

• Cheburashka
• Buaya Gena
• Shapoklyak

Dalam contoh ini, penanda default disembunyikan dan simbol ditambahkan sebagai gantinya (Gambar 2).

Beras. 2. Penanda berupa simbol

Untuk menetapkan beberapa simbol rumit sebagai penanda, Anda dapat menggunakan program Microsoft Tabel kata atau karakter, ini program standar termasuk dalam perlengkapan jendela. Pengkodean kode harus UTF-8.