Apa itu gaya daftar default (CSS)?

91

Di situs web saya, saya menggunakan reset.css. Ini menambahkan persis ini ke gaya daftar:

ol, ul {
    list-style: none outside none;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    font-size: 100%;
    margin: 0;
    outline: 0 none;
    padding: 0;
    vertical-align: baseline;
}

Masalahnya adalah semua gaya daftar diatur NONEdengan ini. Saya ingin mengembalikan gaya daftar asli (default) untuk semua daftar hanya di sub-halaman situs web (semua daftar dalam .my_container).

Ketika saya mencoba pengaturan, hal-hal seperti list-style-typeto inherittidak mewarisi gaya default browser hanya untuk properti CSS ini.

Apakah ada cara untuk mewarisi gaya browser asli untuk properti tertentu tanpa mengubah reset.css?

html css html-lists Atadj
sumber
4
reset.css adalah salah satu anti-pola terburuk dalam desain web.
ᆼ ᆺ ᆼ
9
Daripada menyetel ulang lembar gaya penuh, pertimbangkan sesuatu seperti github.com/necolas/normalize.css yang menyetel default yang masuk akal untuk semua elemen. Dengan begitu, Anda memulai dengan garis dasar di semua browser dan dapat membangun dari sana. Selain itu, Anda tidak perlu menambahkan kode tambahan untuk kembali ke pengaturan default!
Olly Hodgson
1
@OllyHodgson Ya, tetapi saya punya alasan khusus mengapa saya ingin menggunakan reset.css. Saya benar-benar perlu menghapus gaya sebanyak mungkin dan saya ingin menulis ulang - bukan sebaliknya :)
Atadj
1
Jika Anda ingin menghapusnya dan menulis ulang, apa gunanya pertanyaan ini? Sejauh yang saya lihat, Anda memiliki dua opsi: 1) secara khusus menghindari pengaturan ulang gaya daftar sehingga Anda tetap menggunakan default 2) mengatur ulang, dan membuat gaya daftar Anda sendiri.
BoltClock
1
@BoltClock - Hanya untuk memperjelas - Saya ingin memberikan kesempatan kepada pengguna untuk membuat daftar mereka sendiri dari awal (saya menambahkan kelas untuk setiap gaya yang memungkinkan) - Saya hanya ingin tahu apakah ada sesuatu seperti pengaturan "default" tetapi karena tidak ada gaya default - Saya hanya akan membuatnya.
Atadj

Jawaban:

149

Saya biasa mengatur CSS ini untuk menghapus reset:

ul { 
   list-style-type: disc; 
   list-style-position: inside; 
}
ol { 
   list-style-type: decimal; 
   list-style-position: inside; 
}
ul ul, ol ul { 
   list-style-type: circle; 
   list-style-position: inside; 
   margin-left: 15px; 
}
ol ol, ul ol { 
   list-style-type: lower-latin; 
   list-style-position: inside; 
   margin-left: 15px; 
}

EDIT: dengan kelas tertentu tentunya ...

zessx
sumber
Sejauh ini berfungsi seperti seharusnya :) Saya pikir ini menyelesaikan pertanyaan saya. Saya akan mengujinya lebih banyak sekarang dengan daftar bersarang dll.
Atadj
6
Ini tidak "mengembalikan gaya daftar asli (default)". Ini hanya mengatur beberapa gaya.
Jukka K. Korpela
Saya setuju, tapi bagaimanapun caranya, tujuannya hanya untuk mengatur gaya. CSS ini memberikan gaya yang cukup mendasar untuk daftar, tidak lebih.
zessx
3
Tidak ada opsi "default" untuk list-style-type dan saya mengetahuinya setelah mendapatkan jawaban. Peramban hanya menambahkan beberapa gaya yang seringkali tidak konsisten di antara peramban.
Atadj
1
Saya juga meminta seseorang mengatur tampilan: blok-inline; dan tampaknya itu perlu menjadi item daftar untuk membuat peluru muncul lagi.
Tandai
33

Saya rasa inilah yang sebenarnya Anda cari:

.my_container ul
{
    list-style: initial;
    margin: initial;
    padding: 0 0 0 40px;
}

.my_container li
{
    display: list-item;
}
Dingin
sumber
Ya, menurut saya jawaban ini juga penting. inheritmewarisi gaya dari penampung induk dan tidak menyetelnya ke nilai browser default. initialapakah ini (saya mengetahui tentang keberadaannya nanti) tetapi apakah Anda yakin itu ul { list-style: initial; }dan ol { list-style: initial; }akan menghasilkan hasil yang valid? Bukankah itu disetel list-styleke nilai awalnya terlepas dari elemen yang diterapkan padanya? Bukankah initialnilainya disc outside noneuntuk kedua jenis daftar?
Atadj
1
Luar biasa, initialtidak pernah terpikir olehku!
BenjaminRH
9
initialtidak didukung dalam versi IE mana pun msdn.microsoft.com/en-us/library/…
lulalala
12

Sesuai dengan dokumentasi, sebagian besar browser akan menampilkan elemen <ul>, <ol>dan <li>dengan nilai default berikut:

Pengaturan CSS default untuk tag UL atau OL :

ul, ol { 
    display: block;
    list-style: disc outside none;
    margin: 1em 0;
    padding: 0 0 0 40px;
}
ol { 
    list-style-type: decimal;
}

Pengaturan CSS default untuk tag LI :

li { 
    display: list-item;
}

Gaya juga item daftar bersarang:

ul ul, ol ul {
    list-style-type: circle;
    margin-left: 15px; 
}
ol ol, ul ol { 
    list-style-type: lower-latin;
    margin-left: 15px; 
}

Catatan: Hasilnya akan sempurna jika kita menggunakan gaya di atas dengan kelas. Juga lihat penanda Item Daftar yang berbeda .

Reza Mamun
sumber
Jika ini masalahnya, maka daftar bersarang akan memiliki margin atas dan bawah yang ditambahkan dengan level baru.
VorganHaze
10

http://www.w3schools.com/tags/tag_ul.asp

ul { 
    display: block;
    list-style-type: disc;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 40px;
}
jerrygarciuh
sumber
1
terima kasih menyelamatkan hidup saya, bertanya-tanya mengapa sih ada padding di submenu saya.
Asura
Ini akan menambahkan vertical.margij pada daftar bersarang apa pun.
VorganHaze
4

Kamu tidak bisa. Setiap kali ada lembar gaya yang diterapkan yang menetapkan properti ke sebuah elemen, tidak ada cara untuk mendapatkan default browser, untuk setiap instance elemen.

Ide (dapat disengketakan) reset.css adalah untuk menyingkirkan default browser, sehingga Anda dapat memulai gaya Anda sendiri dari meja yang bersih. Tidak ada versi reset.css yang melakukan itu sepenuhnya, tetapi sejauh mereka melakukannya, penulis yang menggunakan reset.css seharusnya mendefinisikan rendering sepenuhnya .

Jukka K. Korpela
sumber
2

Anda menyetel ulang margin pada semua elemen di blok css kedua. Margin default adalah 40px - ini seharusnya menyelesaikan masalah:

.my_container ul {list-style:disc outside none; margin-left:40px;}
OmidAntiLong
sumber
1

Jawaban untuk masa depan: CSS 4 mungkin akan berisi kata kunci kembalikan, yang mengembalikan properti ke nilainya dari lembar gaya pengguna atau agen pengguna [ sumber ]. Saat menulis ini, hanya Safari yang mendukung ini - periksa di sini untuk pembaruan tentang dukungan browser.

Dalam kasus Anda, Anda akan menggunakan:

.my_container ol, .my_container ul {
    list-style: revert;
}

Lihat juga jawaban lain ini dengan beberapa detail lebih lanjut.

tanius
sumber