Was ist Standard List Styling (CSS)?

88

Auf meiner Website verwende ich reset.css. Es fügt genau dies zu Listenstilen hinzu:

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

Das Problem ist, dass alle Listenstile damit eingestellt sind NONE. Ich möchte die ursprünglichen Listenstile (Standard) nur für alle Listen auf Webseiten (alle Listen in .my_container) zurücksetzen .

Wenn ich versuche , Einstellungen Dinge wie list-style-typezu inheritist nicht der Standard - Stile Browser erbt nur für diese CSS - Eigenschaft.

Gibt es eine Möglichkeit, die Stile des ursprünglichen Browsers für bestimmte Eigenschaften zu erben, ohne reset.css zu ändern?

html css html-lists

— Atadj
quelle

4

reset.css ist eines der schlimmsten Anti-Patterns im Webdesign.

— 31 ᆺ ᆼ

9

Betrachten Sie anstelle eines vollständig zurückgesetzten Stylesheets etwas wie github.com/necolas/normalize.css, das sinnvolle Standardeinstellungen für alle Elemente festlegt. Auf diese Weise beginnen Sie mit einer Baseline in allen Browsern und können von dort aus aufbauen. Außerdem müssen Sie keinen zusätzlichen Code hinzufügen, um zu den Standardeinstellungen zurückzukehren!

— Olly Hodgson

1

@OllyHodgson Ja, aber ich habe bestimmte Gründe, warum ich reset.css verwenden möchte. Ich muss tatsächlich so viel Stil wie möglich löschen und ich möchte ihn neu schreiben - nicht umgekehrt :)

— Atadj

1

Wenn Sie sie löschen und neu schreiben möchten, worum geht es bei dieser Frage? Soweit ich sehen kann, haben Sie zwei Möglichkeiten: 1) Vermeiden Sie das Zurücksetzen von Listenstilen, damit Sie die Standardeinstellungen beibehalten. 2) Setzen Sie sie zurück und erstellen Sie Ihre eigenen Listenstile.

— BoltClock

1

@BoltClock - Nur zur Verdeutlichung - Ich möchte Benutzern die Möglichkeit geben, ihre eigene Liste von Grund auf neu zu erstellen (ich habe für jeden möglichen Stil eine Klasse hinzugefügt). Ich habe mich nur gefragt, ob es so etwas wie "Standardeinstellung" gibt, aber da es keine gibt Standard-Styling - Ich erstelle nur eines.

— Atadj

145

Ich habe dieses CSS eingestellt, um das Zurücksetzen zu entfernen:

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: mit einer bestimmten Klasse natürlich ...

— Zessx
quelle

Bisher funktioniert es so wie es sollte :) Ich denke, dass dies meine Frage löst. Ich werde es jetzt mehr mit verschachtelten Listen usw.

— testen

5

Die ursprünglichen Listenstile werden nicht zurückgesetzt (Standard). Es werden nur einige Stile festgelegt.

— Jukka K. Korpela

Ich stimme zu, aber wie auch immer, das Ziel war nur, einen Stil zu setzen. Dieses CSS verleiht Listen einen ziemlich einfachen Stil, nicht mehr.

— Zessx

2

Es gibt keine "Standard" -Option für den Listentyp und ich habe das herausgefunden, nachdem ich Antworten erhalten habe. Browser fügen nur einige Stile hinzu, die zwischen Browsern häufig nicht konsistent sind.

— Atadj

1

Ich hatte auch jemanden eingestellt Anzeige: Inline-Block; und es scheint, dass es ein Listenelement sein muss, damit die Aufzählungszeichen wieder angezeigt werden.

— Mark

31

Ich denke, das ist genau das, wonach Sie suchen:

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

.my_container li
{
    display: list-item;
}

— Kalt kalt
quelle

Ja, ich denke, dass diese Antwort auch etwas Wichtiges ist. inheriterbt die Stile von den übergeordneten Containern und setzt sie nicht auf die Standardwerte des Browsers. initialtut dies (ich habe später von seiner Existenz erfahren), aber sind Sie sicher, dass ul { list-style: initial; }und ol { list-style: initial; }wird ein gültiges Ergebnis liefern? Wird list-styleder Anfangswert nicht unabhängig vom Element, auf das er angewendet wird, festgelegt? Wird der initialWert nicht disc outside nonefür beide Arten von Listen sein?

— Atadj

1

Erstaunlich, ist initialmir nie in den Sinn gekommen!

— BenjaminRH

8

initialwird in keiner Version von IE msdn.microsoft.com/en-us/library/…

— lulalala

12

Gemäß der Dokumentation, zeigen die meisten Browser die <ul>, <ol>und <li>Elemente mit den folgenden Standardwerten:

Standard-CSS-Einstellungen für UL- oder OL- Tag:

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

Standard-CSS-Einstellungen für das LI- Tag:

li { 
    display: list-item;
}

Gestalten Sie auch verschachtelte Listenelemente:

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

Hinweis: Das Ergebnis ist perfekt, wenn wir die obigen Stile mit einer Klasse verwenden. Siehe auch verschiedene Listenelementmarkierungen .

— Reza Mamun
quelle

Wenn dies der Fall wäre, werden der verschachtelten Liste mit jeder neuen Ebene ein oberer und ein unterer Rand hinzugefügt.

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

1

Dank rettete mein Leben, fragte mich, warum zum Teufel in meinem Untermenü Polsterung war.

— Asura

Dadurch wird vertikal.margij zu jeder verschachtelten Liste hinzugefügt.

— VorganHaze

4

Du kannst nicht. Immer wenn ein Stylesheet angewendet wird, das einem Element eine Eigenschaft zuweist, gibt es für keine Instanz des Elements eine Möglichkeit, zu den Standardeinstellungen des Browsers zu gelangen.

Die (umstrittene) Idee von reset.css besteht darin, die Standardeinstellungen des Browsers zu entfernen, damit Sie Ihr eigenes Styling von einem sauberen Schreibtisch aus starten können. Keine Version von reset.css macht das vollständig, aber in dem Maße, in dem dies der Fall ist, soll der Autor, der reset.css verwendet , das Rendering vollständig definieren.

— Jukka K. Korpela
quelle

2

Sie setzen den Rand für alle Elemente im zweiten CSS-Block zurück. Der Standardrand ist 40px - dies sollte das Problem lösen:

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

— OmidAntiLong
quelle

1

Eine Antwort für die Zukunft: CSS 4 wird wahrscheinlich das Schlüsselwort revert enthalten, das eine Eigenschaft auf ihren Wert aus dem Benutzer- oder Benutzeragenten-Stylesheet [ Quelle ] zurücksetzt . Zum Zeitpunkt des Schreibens unterstützt dies nur Safari. Hier finden Sie Updates zur Browserunterstützung.

In Ihrem Fall würden Sie verwenden:

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

Siehe auch diese andere Antwort mit einigen weiteren Details.

— Tanius
quelle