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

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

  • 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:
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:

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

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.