Varsayılan liste stili (CSS) nedir?

91

Web sitemde reset.css kullanıyorum. Stilleri listelemek için tam olarak bunu ekler:

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;
}

Sorun, tüm liste stillerinin buna ayarlanmasıdır NONE. Yalnızca web sitesi alt sayfalarındaki tüm listeler için orijinal liste stillerini (varsayılan) geri döndürmek istiyorum (tüm listeler içeride .my_container).

Ben gibi ayarları şeyler denediğinizde list-style-typeiçin inheritsadece bu CSS özelliği için tarayıcının varsayılan stilleri miras değil olduğunu.

Reset.css'yi değiştirmeden belirli özellikler için orijinal tarayıcının stillerini devralmanın bir yolu var mı?

html css html-lists

— Atac
kaynak

4

reset.css, web tasarımındaki en kötü anti-modellerden biridir.

— ᆼ ᆺ ᆼ

9

Tam sıfırlama stil sayfası yerine, tüm öğeler için mantıklı varsayılanlar ayarlayan github.com/necolas/normalize.css gibi bir şey düşünün . Bu şekilde, tüm tarayıcılarda bir temel ile başlarsınız ve oradan inşa edebilirsiniz. Ayrıca, varsayılan ayarlara geri dönmek için fazladan kod eklemenize gerek yoktur!

— Olly Hodgson

1

@OllyHodgson Evet, ama reset.css'yi kullanmak istememin belirli nedenleri var. Mümkün olduğunca çok stili netleştirmem gerekiyor ve onu yeniden yazmak istiyorum

— tersi

1

Onları silip yeniden yazmak istiyorsanız, bu sorunun amacı nedir? Gördüğüm kadarıyla iki seçeneğiniz var: 1) özellikle liste stillerini sıfırlamaktan kaçının, böylece varsayılanları korursunuz 2) onları sıfırlayın ve kendi liste stillerinizi oluşturun.

— BoltClock

1

@BoltClock - Sadece açıklığa kavuşturmak için - Kullanıcılara sıfırdan kendi listelerini oluşturma fırsatı vermek istiyorum (olası her stil için sınıf ekledim) - Sadece "varsayılan" ayar gibi bir şey olup olmadığını merak ediyordum, ancak hiç olmadığı için varsayılan stil - Sadece bir tane oluşturacağım.

— Atadj

149

Sıfırlamayı kaldırmak için bu CSS'yi ayarlardım:

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; 
}

DÜZENLEME: belirli bir sınıf elbette ...

— zessx
kaynak

Şimdiye kadar olması gerektiği gibi çalışıyor :) Sanırım bu benim sorumu çözüyor. Ben vs. iç içe listeleri ile daha Şimdi test edeceğim

— Atadj

6

“Orijinal liste stillerini geri döndürmez (varsayılan)”. Sadece bazı stilleri belirliyor .

— Jukka K. Korpela

Katılıyorum, ama yol ne olursa olsun, amaç sadece bir tarz belirlemekti. Bu CSS, listelere oldukça basit bir stil veriyor, artık yok.

— zessx

3

Liste stili için "varsayılan" bir seçenek yoktur ve cevapları aldıktan sonra bunu öğrendim. Tarayıcılar, genellikle tarayıcılar arasında tutarlı olmayan bazı stiller ekler.

— Atadj

1

Ayrıca display: inline-block; ve mermilerin tekrar gösterilmesi için liste öğesi olması gerektiği anlaşılıyor.

— Mark

33

Sanırım aslında aradığınız şey bu:

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

.my_container li
{
    display: list-item;
}

— Soğuk soğuk
kaynak

Evet, bunun da önemli bir şeyi yanıtladığını düşünüyorum. inheritstilleri üst kapsayıcılardan devralır ve bunları varsayılan tarayıcı değerlerine ayarlamaz. initialbu mu (varlığını daha sonra öğrendim) ama bundan emin misiniz ul { list-style: initial; }ve ol { list-style: initial; }geçerli bir sonuç üretecek mi? list-styleUygulandığı öğeden bağımsız olarak başlangıç değerine ayarlanmıyor mu? Her iki liste türü için initialdeğer olmayacak disc outside nonemı?

— Atadj

1

Şaşırtıcı, initialhiç aklıma gelmemişti!

— BenjaminRH

9

initialhiçbir IE sürümünde desteklenmez msdn.microsoft.com/en-us/library/…

— lulalala

12

Belgelere göre, çoğu tarayıcı <ul>, <ol>ve <li>öğelerini aşağıdaki varsayılan değerlerle görüntüler:

UL veya OL etiketi için varsayılan CSS ayarları :

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

LI etiketi için varsayılan CSS ayarları :

li { 
    display: list-item;
}

İç içe geçmiş liste öğelerinin stilini de belirleyin:

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

Not: Yukarıdaki stilleri bir sınıfla kullanırsak sonuç mükemmel olacaktır. Ayrıca farklı Liste Öğesi işaretçilerine bakın.

— Reza Mamun
kaynak

Durum böyleyse, yuvalanmış listeye herhangi bir yeni düzeyle birlikte bir üst ve alt kenar boşluğu eklenir.

— 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
kaynak

1

teşekkürler hayatımı kurtardı, neden alt menümde cehennem dolgusu olduğunu merak ediyordum.

— Asura

Bu, herhangi bir iç içe geçmiş listeye vertical.margij ekler.

— VorganHaze

4

Yapamazsın. Bir öğeye bir özellik atayan herhangi bir stil sayfası uygulandığında, öğenin herhangi bir örneği için tarayıcı varsayılanlarına ulaşmanın bir yolu yoktur.

Reset.css'nin (tartışmalı) fikri, tarayıcı varsayılanlarından kurtulmaktır, böylece kendi stilinizi temiz bir masadan başlatabilirsiniz. Reset.css'nin hiçbir sürümü bunu tam olarak yapmaz, ancak yaptıkları ölçüde, reset.css kullanan yazarın oluşturmayı tamamen tanımlaması beklenir .

— Jukka K. Korpela
kaynak

2

İkinci css bloğundaki tüm öğelerdeki marjı sıfırlıyorsunuz. Varsayılan kenar boşluğu 40px'dir - bu, sorunu çözmelidir:

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

— OmidAntiLong
kaynak

1

Gelecek için bir cevap: CSS 4 muhtemelen bir özelliği kullanıcı veya kullanıcı aracısı stil sayfasından [ kaynak ] değerine döndüren revert anahtar kelimesini içerecektir . Bunu yazarken, yalnızca Safari bunu desteklemektedir - tarayıcı desteğiyle ilgili güncellemeler için burayı kontrol edin .

Senin durumunda kullanacaksın:

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

Daha fazla ayrıntıyla birlikte bu diğer yanıta da bakın.

— Tanius
kaynak