Daftar gaya dalam CSS. Ubah warna bullet dalam list HTML tanpa menggunakan span Tag list item color different

Contoh 2: Menggunakan pseudo-element::before

• Utara
• Selatan
• Barat
• Timur

Hasil dari contoh ini ditunjukkan pada Gambar. 2.

Tugas

Ubah tampilan penanda dalam daftar dan ganti dengan simbol yang berbeda.

Larutan

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

Contoh 1 Penanda standar

HTML5 CSS 2.1 IE Cr Op Sa Fx

• Cheburashka
• Gena Buaya
• Shapoklyak

Dalam contoh ini, kotak digunakan sebagai penanda (Gbr. 1).

Beras. 1. Jenis penanda

Memilih dan mengatur karakter penanda Anda sendiri dilakukan dengan cara yang sangat aneh, melalui elemen pseudo :before. Pertama, hapus bullet dari daftar sekaligus dengan menyetel properti list-style-type style ke none , lalu menambahkan elemen pseudo :before ke pemilih LI. Keluaran karakter itu sendiri dilakukan dengan menggunakan properti konten, yang nilainya adalah teks atau karakter yang diinginkan (contoh 2).

Contoh 2: Menggunakan :before dan content

HTML5 CSS 2.1 IE Cr Op Sa Fx

• Cheburashka
• Gena Buaya
• Shapoklyak

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

Beras. 2. Penanda simbol

Untuk menetapkan beberapa karakter rumit sebagai penanda, Anda dapat menggunakan Microsoft Word atau tabel karakter, ini adalah program standar yang disertakan dengan Windows. Encoding kode harus UTF-8.

ukuran penanda daftar css (8)

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

Saya punya daftar:

• rumah
• kebun

Tidak mungkin memasukkan apapun ke dalam li, seperti "span" dan "p". Bisakah saya mengubah warna peluru tetapi bukan teksnya dengan cara yang cerdas?

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

ul ( list-style-type: none; ) li ( position: relative; ) li:before ( content: ""; display: block; position: absolute; width: 5px; /* sesuaikan dengan kebutuhan Anda */ tinggi: 5px; /* sesuaikan dengan kebutuhan Anda */ border-radius: 50%; left: -15px; /* sesuaikan dengan kebutuhan Anda */ top: 0.5em; background: #f00; /* sesuaikan dengan kebutuhan Anda * /)

• Pertama
• Kedua
• ketiga

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

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

Berdasarkan jawaban @ddilsaver. Saya ingin bisa menggunakan sprite peluru. Ini sepertinya berhasil:

Li ( list-style: none; position: relative; ) li:before ( content:""; display: block; position: absolute; width: 20px; height: 20px; left: -30px; top: 5px; background-image : url(i20.png); background-position: 0px -40px; /* atau apa pun offset yang Anda inginkan */ )

Saya tahu ini adalah pertanyaan yang sangat, sangat lama, tetapi saya telah bermain-main dengan ini dan menemukan cara yang tidak saya lihat. Beri warna pada daftar dan ganti warna teks dengan::first-line selector::first-line . Saya bukan ahli, jadi mungkin ada yang salah dengan pendekatan ini yang saya lewatkan, tetapi tampaknya berhasil.

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

• rumah
• kebun

Saya juga sangat menyukai jawaban Mark - saya memerlukan satu set UL berwarna berbeda dan jelas akan lebih mudah menggunakan kelas saja. Inilah yang saya gunakan untuk jeruk, misalnya:

ul.orange ( list-style: none; padding: 0px; ) ul.orange > li:before ( content: "\25CF "; font-size: 15px; color: #F00; margin-right: 10px; padding: 0px ; tinggi baris: 15px; )

Selain itu, saya menemukan bahwa kode hex yang saya gunakan untuk "konten:" berbeda dari milik Marc (lingkaran hex itu tampak terlalu tinggi). Yang saya gunakan sepertinya berada tepat di tengah. Saya juga menemukan beberapa bentuk lain (persegi, segitiga , lingkaran, dll.)

Membangun solusi @Marc dan @jessica adalah solusi yang saya gunakan:

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

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

Berdasarkan solusi @Marc - karena simbol peluru dirender secara berbeda dengan font dan browser yang berbeda, saya menggunakan teknik css3 berikut dengan border-radius untuk membuat peluru yang lebih saya kendalikan:

Li:sebelum ( konten: ""; background-color: #898989; display: inline-block; posisi: relatif; tinggi: 12px; lebar: 12px; border-radius: 6px; -webkit-border-radius: 6px; - moz-border-radius: 6px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; margin-right: 4px; top: 2px; )

Kita bisa menggabungkan list-style-image dengan svg s kita bisa sematkan di css! Metode ini menawarkan kontrol luar biasa atas "peluru" yang bisa menjadi apa saja.

Untuk mendapatkan lingkaran merah cukup gunakan css berikut:

"); }

Tapi ini baru permulaan. Ini memungkinkan kami melakukan hal gila apa pun yang kami inginkan dengan peluru ini. lingkaran atau persegi panjang itu mudah, tetapi apa pun yang bisa Anda gambar dengan svg bisa masuk ke sana! Lihat contoh pohon apel di bawah ini:

ul ( daftar-gaya-gambar: url("data:gambar/svg+xml, "); ) ul ul ( daftar-gaya-gambar: url("data:gambar/svg+xml, "); ) ul ul ul ( daftar-gaya-gambar: url("data:gambar/svg+xml, "); ) ul ul ul ul ( daftar-gaya-gambar: url("data:gambar/svg+xml, "); ) ul.bulls-eye ( daftar-gaya-gambar: url("data:gambar/svg+xml, "); ) ul.multi-warna ( daftar-gaya-gambar: 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

Pengodean

Saya mengatur ini tanpa menambahkan markup apa pun, tetapi menggunakan li:before sebagai gantinya. Ini jelas memiliki semua keterbatasan :before (tidak ada dukungan IE lama) tetapi tampaknya bekerja dengan IE8, Firefox dan Chrome setelah pengujian yang sangat terbatas. Gaya peluru juga terbatas pada unicode.

li ( list-style: none; ) li:before ( /* Untuk bullet bulat */ content: "\2022"; /* Untuk bullet persegi */ /*content:"\25A0";*/ display: block ; posisi: relatif; lebar-maks: 0; tinggi-maks: 0; kiri: -10px; atas: 0; warna: hijau; ukuran font: 20px; )

Untuk membuat baris daftar berpoin menonjol dari teks utama, Anda dapat membuat warna poin dalam daftar berbeda dari warna teks.

Standarnya adalah titik hitam. Jika Anda hanya menyetel warna ke elemen li, maka tidak ada yang berhasil - warna akan disetel ke seluruh garis, dan Anda hanya perlu mengubah warna penanda (ul li adalah warna titik).

Cara Mengubah Warna Peluru dengan CSS

1. Menyembunyikan penanda daftar asli dengan properti daftar-gaya-jenis
2. Menambahkan Penanda Anda Sendiri dengan Elemen Pseudo :sebelum dan properti isi. Ini akan memasukkan teks atau karakter apa pun sebelum elemen li.
3. Penampilan penanda dapat dikontrol melalui gaya CSS, mengubah warna, font, latar belakang, dan lainnya. Saya menggunakan font Montserrat tebal.

Jika Anda mengalami situasi di mana penanda muncul di tempat yang tidak perlu, misalnya di menu utama atau di menu duplikat di footer, hal ini dapat dengan mudah diperbaiki. Tambahkan saja elemen induk, yang berisi daftar, warna penanda yang perlu kita ubah. Saya menambahkan sebuah kata artikel dan sekarang perubahan ini mulai diterapkan hanya pada area konten situs.

Daftar CSS- satu set properti yang bertanggung jawab untuk desain daftar. Penggunaan daftar HTML sangat umum saat membuat bilah navigasi situs. Daftar elemen mewakili satu set elemen blok.

Menggunakan properti CSS standar, Anda bisa mengubah tampilan penanda daftar, tambahkan gambar untuk penanda, Dan mengubah lokasi penanda. Ketinggian blok marker dapat diatur dengan properti line-height.

Daftar Gaya dengan Gaya CSS

1. Jenis penanda daftar jenis gaya daftar

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

Sintaksis

Ul (list-style-type: none;) ul (list-style-type: square;) ol (list-style-type: none;) ol (list-style-type: lower-alpha;) Beras. 1. Contoh desain daftar berpoin dan bernomor

2. Gambar untuk elemen gambar bergaya daftar

Gambar dan isian gradien dapat digunakan sebagai penanda item daftar. Diwariskan.

Sintaksis

Ul (daftar-gaya-gambar: url("images/romb.png");) ul (daftar-gaya-gambar: linear-gradient(#FF7A2F 0, #FF7A2F 50%, #FFB214 50%);)
Beras. 2. Merancang Daftar Berpoin dengan Gambar
Beras. 3. Menata Daftar Berpoin dengan Gradien

3. Daftar lokasi penanda daftar-gaya-posisi

Properti ini memberikan kemampuan untuk memposisikan penanda di luar atau di dalam konten elemen daftar. Diwariskan.