Soru Varsayılan liste stili (CSS) nedir?


Web sitemde reset.css kullanıyorum. Stilleri listelemek için bunu tam olarak 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 şu ki tüm liste stilleri NONE Bununla. Yalnızca web sitesi alt sayfalarındaki tüm listeler için orijinal liste stillerini (varsayılan) geri almak istiyorum (tüm listeler .my_container).

Ayarları denediğimde list-style-type için inherit bu CSS özelliği için tarayıcının varsayılan stillerini miras almaz.

Reset.css değiştirilmeden, belirli özelliklerin orijinal tarayıcı stillerini miras almanın bir yolu var mı?


76
2017-07-31 09:42


Menşei


Urgh ... sıfırlar ... titreme. - Utkanos
reset.css, web tasarımındaki en kötü anti-desenlerden biridir. - Peter V
Tam sıfırlama stil sayfasından ziyade, github.com/necolas/normalize.css tüm öğeler için mantıklı varsayılan ayarlar. Bu şekilde, tüm tarayıcılarda bir taban çizgisi ile başlarsınız ve oradan inşa edebilirsiniz. Ayrıca, varsayılan ayarlara geri dönmek için ekstra kod eklemeniz gerekmez! - Olly Hodgson
@OllyHodgson Evet, ancak reset.css kullanmak istediğim için belirli nedenlerim var. Aslında mümkün olduğunca çok stilleri temizlemem gerekiyor ve bunu yeniden yazmak istiyorum - başka bir şekilde değil :) - Atadj
Onları silmek ve yeniden yazmak isterseniz, bu sorunun ne anlamı var? Görebildiğim kadarıyla iki seçeneğiniz var: 1) özellikle liste stillerini sıfırlamaktan kaçının, böylece varsayılanları 2) sıfırlayın ve kendi liste stillerinizle gelsin. - BoltClock♦


Cevaplar:


Sıfırlamayı kaldırmak için bu CSS'yi kullanırdı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 ders sınıfı ile ...


117
2017-07-31 09:47



Şimdiye kadar olması gerektiği gibi çalışıyor :) Bu sorunun sorumu çözdüğünü düşünüyorum. Şimdi iç içe geçmiş listeler vb. İle daha fazla test edeceğim. - Atadj
“Orijinal liste stillerini geri döndürmez (varsayılan)”. Sadece ayarlar bazı stilleri. - Jukka K. Korpela
Katılıyorum, ama yol ne olursa olsun, amaç sadece bir stil oluşturmaktı. Bu CSS, listelere oldukça basit bir stil veriyor, artık yok. - zessx
Liste stili türü için "varsayılan" seçenek yoktur ve yanıtları aldıktan sonra öğrendim. Tarayıcılar, tarayıcılar arasında genellikle tutarlı olmayan bazı stilleri ekler. - Atadj
Ekranda bir tane set vardı: inline-block; ve mermi tekrar göstermek için liste öğesi olması gerektiği görünüyor. - Mark


Bence bu aslında aradığın şey:

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

.my_container li
{
    display: list-item;
}

30
2018-04-18 00:12



Evet, bence bu da önemli bir şeyi yanıtlıyor. inherit stilleri ana kapsayıcılardan devralır ve bunları varsayılan tarayıcı değerlerine ayarlamaz. initial bunu yapar (daha sonra varlığını öğrendim) ama emin misin ul { list-style: initial; } ve ol { list-style: initial; } geçerli bir sonuç üretecek? Ayarlanmadı mı list-style uygulandığı öğeden bağımsız olarak başlangıç ​​değerine mi? Olmaz initial değer olmak disc outside none her iki liste için? - Atadj
şaşırtıcı, initial bana hiç olmadı! - BenjaminRH
initial IE'nin herhangi bir sürümünde desteklenmez msdn.microsoft.com/en-us/library/... - lulalala


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

9
2017-12-22 18:58



Teşekkürler hayatımı kurtardı, neden benim alt menüde cehennemde dolgu olduğunu merak ediyordum. - Asura


Dokümanlara göre, çoğu tarayıcı <ul>, <ol> ve <li> aşağıdaki varsayılan değerlere sahip öğeler:

İçin varsayılan CSS ayarları UL veya OL etiket:

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

İçin varsayılan CSS ayarları LI etiket:

li { 
    display: list-item;
}

Stil yuvalanmış liste öğeleri de:

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 olur. Ayrıca farklı görün Listesi Öğesi belirteçler.


6
2017-12-17 09:53





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

Reset.css'nin (tartışılabilir) fikri, tarayıcı varsayılanlarından kurtulmaktır, böylece kendi stilinizi temiz bir masadan başlatabilirsiniz. Reset.css dosyasının hiçbir sürümü bunu tam olarak yapmaz, ancak ne yaparsa yapsınlar reset.css kullanan yazarın tamamen Oluşturmayı tanımlar.


4
2017-07-31 13:50





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

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

2
2017-07-31 09:52





Gelecek için bir cevap: CSS 4 muhtemelen bir özelliği kullanıcı veya kullanıcı aracısı stil sayfasındaki değerine döndüren geri dönüş anahtar kelimesini içerecektir [kaynak]. Bunu yazarken, sadece Safari bunu destekliyor - burayı kontrol et tarayıcı desteği ile ilgili güncellemeler.

Senin durumunda kullanacaksın:

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

Ayrıca bakınız bu diğer cevap biraz daha detaylar ile.


0
2017-12-17 18:46