Aufzählungszeichen
Abstände und Farbe per HTML (Tag CSS)

21. November 2016 Ditmar

Der Listenpunkte Farbe und mehr Abstand vom Rand, Zeilenabstand usw. – für Gebrauchs hin und wieder in HTML (Texteditor) oder über CSS Stylesheet Editor auszeichnen. – Vom Seiten stöbern im Netz möchte ich loggen:

Die Auszeichnungen sind:

Elementname ul, ol oder li und Attribut-/Eigenschaftswerte individuell.

Aufzählungszeichen und Text farbig:

<ul style="color: "royalblue;">

Aufzählungszeichen mit Abstand vom Rand:

<ul style="list-style-position: inside;">
<li style="list-style-position: outside;">
<ul style="padding-left: 30px;">

Extra Einrückung des Textes zum Aufzählungszeichen:

<li style="padding-left: 20px;">

Aufzählungszeichen mehr Zeilenabstand:

<li style="margin-bottom: 12px;> und/oder
<li style="margin: 12px 0;">

In Kombination

Normaler Listenpunkt

Normale Textauszeichnung

Mit Start-Tag <ul style="color: royalblue;"> sind gesamte Liste die Listenpunkte und Schrift mit Farbe.
Der Start-Tag <li style="padding-left: 20px;"> ist für extra Einrückung des Textes zum Listenpunkt.

Mit Start-Tag <ul style="list-style-position: inside;"> kann man gesamter Liste, den Aufzählungszeichen mehr Abstand zum Rand geben. Der Text folgender Zeile ist unter dem Aufzählungszeichen.
(Standard) Abstands normal, gesamter Liste die Listenpunkte mit Start-Tag <ul style="list-style-position: outside;"> oder mit Elementname li das entsprechende Element.

Mit Start-Tag <ul style="padding-left: 30px;"> kann man gesamter Liste mehr oder weniger Abstand zum Rand geben. Der Text folgender Zeile gleich normalen Aufzählungszeichen.
Aufzählungszeichens nächsten Listenpunkt mehr Zeilenabstand erwünscht: Mit Start-Tag <li style="margin-bottom: 12px;">
… wird der Zeilenabstand nächsten Listenpunkt erweitert..
Mit Start-Tag <li style="margin: 12px 0;"> wird vorhergehender und nächster Listenpunkt Zeilenabstand erweitert.
Also im Start-Tag <ul> und <ol> kann man mit Attributen, gesamter Liste der Aufzählungszeichen und Schrift gemeinsam Farbe zuweisen und gesamter Liste mehr Abstand zum Rand geben. Im Start-Tag <li> Einrückung der Schrift, vom Punkt, mehr Abstand einräumen sowie Zeilenabstände definieren.
- Die Unterpunkte (Einrückung) sind wieder mit Elementname ul oder ol ausgezeichnet und dem Start-Tag <li> folgt normalen Abstand. Dies ist eine gefällige Darstellung, wie es auch andre Gefälligkeit gereichen kann:
- Unterpunkte den Zeilenabstand variieren, wiederum im Start-Tag <li> für erweiterten Abstand mit Attribut style="margin: 12px 0;".
- Für hin und wieder per HTML,
- ansonsten CSS ebd. class, s. u.

Obige Auszeichnungen:

🔘 Info off/on

<hr />

<ul>
 <li>Normaler Listenpunkt.</li>
</ul>

<hr />

<ul style="color: royalblue;">
 <li>Text Text Text.</li>
 <li style="list-style-position: outside;">Text Text Text.</li>
 <li style="padding-left: 20px;">Text Text Text.</li>
</ul>

<hr />

<ul style="list-style-position: inside; color: mediumblue;">
 <li>Text Text Text.</li>
</ul>

<hr />

<ul style="padding-left: 30px; color: navy;">
 <li>Text Text Text.</li>
 <li style="margin-bottom: 12px;">Text Text Text.</li>
 <li style="margin: 12px 0;">Text Text Text.</li>
 <li style="margin: 12px 0;">Text Text Text.</li>
 <li>Text Text Text.
<ul style="list-style-type: circle;">
 <li>Unterpunkt.</li>
 <li style="margin: 12px 0;">Unterpunkte den Zeilenabstand variieren.</li>
 <li style="margin: 12px 0;"><i>Text Text Text.</li>
 <li><i>ansonsten in CSS (ebd. auch class).</i></li>
</ul>
</li>
</ul>

Bemerkungen:

Ungeeignet ist im Start-Tag <li> Attributname line-height (desselben Punkts Abstand oben und unten), weil sich dessen Auszeichnungen überschneiden, aber größeren Zeilenabstand im Gesamten, also für Start-Tag <ul style="line-height: 150%;"> oder mit Elementname ol wiederum geeignet ist, und dieses kann folgend mit Start-Tag <li style="margin-bottom 12px;"> und/oder <li style="margin: 12px 0;"> die Listenpunkte ebenso erweitert darstellen.

Betreff line-height: Unterpunkte allein die Elementnamen ul, ol als Start-Tag z. B. <ul style="line-height: 150%;"> auszeichnen geht nicht, weil so die Abstände im Gesamten, also auch darüberliegende Listenpunkte mit erweitertem Zeilenabstand angesprochen sind.

CSS für ständigen Gebrauch

CSS Stylesheet Editor:

li {
 margin: 10px 0;
}

… und teils Gebrauch

Dasselbe, Attributname class, z. B. die Class Definition im CSS Styleshead Editor:

.fuer-li {
 margin: 10px 0;
}

… und der Class-Selektor, das Attribut (Attributname und Attributwert) im Start-Tag <li> – also Auszeichnung im HTML-Text-Editor:

<li class="fuer-li">

Vorteil von Auszeichnung über Attributname class ist, dass man die Unterpunkte normalen Abstands belassen kann, weil ja jeder <li> -Start-Tag eigens ausgezeichnet sein muss. Aber eigentlich Aufwands Klassen-Selector über class="" gegenüber desselben direkter Auszeichnung mit Start-Tag gleich ist.

Anhang:

Hier ein Beispiel für eine Art Listung von Überschriften geeignet, z. B. mit class-Selektor und Stylesheet-Angabe im CSS Stylesheet Editor:

.big {
 color: royalblue;
 font-size: 24px;
 list-style-position: inside;
}

… im HTML-Texteditor über Attributname class:

<ul class="big">
 <li>Listenpunkt</li>
 <li>Listenpunkt</li>
 <li>Listenpunkt</li>
</ul>

Darstellung:

Listenpunkt
Listenpunkt
Listenpunkt

Selbige Auszeichnung mit Start-Tag im HTML-Text-Editor:

<ul style="color: royalblue; font-size: 24px; list-style-position: inside;">
 <li>Listenpunkt</li>
</ul>

Dastellung:

Listenpunkt

Weiteres zu Listenpunkten im Titel: Bild anstatt Aufzählungszeichen, auch im Menü.

Wegerl