Bild, pixabay.com, Mogens Petersen

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

Die Beispiele stimmen der farbigen Visualisierung nicht überein, weil dieser Website Systemfonts Edit CSS individuellen color definiert sind. 

• 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 in CSS (ebd. auch class).

Obige Auszeichnungen:

<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.

Beispiel CSS für ständigen Gebrauch

Im CSS Stylesheet Editor:

li {
 margin: 10px 0;
}

… und teils Gebauch

Dasselbe mit 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:

Die Beispiele stimmen der farbigen Visualisierung nicht überein, weil dieser Website Systemfonts Edit CSS individuellen color definiert sind. 

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