Willkommen beim Wegerl.at 'Lesemodus'!
Entspanntes Lesen und spannende Artikel warten auf dich.
Entdecke unsere besten Beiträge und genieße den Lesemodus.
Aufzählungszeichen
@EWP, Webdesign

Aufzählungszeichen
Abstände und Farbe per HTML

Lesedauer so 5 Min.
Lernzeit ein wenig mehr 2023-März 2016-November
Bild, mp1746
Info echo
OpenClipart-Vectors-katze-1

Ist der Classic-Editor schon zu kennen? –
"Advanced Editor Tools – ist so klasse!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Info echo
OpenClipart-Vectors-katze-2

Anklickt Classic-Editor mit Advanced Editor Tools
"Advanced Editor Tools – ist das ausgezeichnete!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Info echo
OpenClipart-Vectors-katze-3

Klassischen Editor anwenden! – und …
"Advanced Editor Tools – ist so sehr gut !"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Info echo
OpenClipart-Vectors-katze-7

… die Welt gehört dem, der sie genießt.
"Advanced Editor Tools – und tut sehr gut!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Info echo
OpenClipart-Vectors-katze-4

Advanced Editor Tools aktive Installationen: 2+ Millionen
"Advanced Editor Tools – ist so fabelhaft!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Info echo
OpenClipart-Vectors-katze-5

Ansprechend! – so gehts hier zur Lancierung
"Advanced Editor Tools – ist de luxe!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Info echo
OpenClipart-Vectors-katze-6

… und NEU! – Classic Widgets
"Classic Widgets – sind so grandiose!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Info echo
OpenClipart-Vectors-katze-8a

Werkraum ist Werkraum und Frontend ist Frontend
Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker
"Advanced Editor Tools – ist so fein!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Der Abstand zwischen den Aufzählungszeichen und dem Text kann das Erscheinungsbild der Liste verbessern oder verschlechtern. Es gibt verschiedene Möglichkeiten, den Abstand anzupassen, wie z.B. das Hinzufügen von mehr Abstand zwischen den Aufzählungszeichen und dem Text oder das Ändern der Farbe der Aufzählungszeichen. Um den Abstand zwischen den Aufzählungszeichen und dem Text in HTML zu ändern, kann man das CSS-Padding oder Margin-Attribut verwenden. Mit diesen Attributen kann man den Abstand zwischen dem Aufzählungszeichen und dem Text sowie den Abstand zwischen den einzelnen Listenelementen anpassen.

Insgesamt ist es wichtig, dass die Aufzählungszeichen und der Abstand auf einer Webseite gut gestaltet sind, um die Lesbarkeit und das Erscheinungsbild der Liste zu verbessern.

Aufzählungszeichen der Auszeichnungen

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

Die Elementnamen ul, ol, dl und li sind Teil der HTML-Sprache und werden verwendet, um Listen auf einer Webseite zu erstellen.

ul
steht für ungeordnete Liste (unordered list),
ol
für geordnete Liste (ordered list),
dl
für Definitionslisten (definition term) und
li
das Listenelement für sich (list item).

Textfarbe und Abstand vom Rand

Mit dem Start-Tag <ul style="color: royalblue;"> kann die Farbe der gesamten Liste, der Listenpunkte und des Textes festgelegt werden. Mit dem Start-Tag <ul style="list-style-position: inside;"> kann der Abstand des Aufzählungszeichens zum Rand erhöht werden, während der Text darunter bleibt. Der Standard-Abstand lässt das Aufzählungszeichen am Rand, mit dem Start-Tag <ul style="list-style-position: outside;"> oder dem Elementnamen li kann dieser Abstand geändert werden.

Text farbig

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

… 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

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

… mehr Zeilenabstand

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

In Kombination

  • Normaler Listenpunkt

Da wegerl.at Systemfonts verwendete und diese mit CSS individuellen color definiert waren, müssten die Beispiele zur "farbigen Visualisierung" jeweils im li Tag ausgezeichnet sein: li style="color: royalblue;" s. hier im Quelltext.

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 dem Start-Tag <ul style="padding-left: 30px;"> kann man der gesamten Liste mehr oder weniger Abstand zum Rand geben, während der Text der nächsten Zeile wie gewohnt dargestellt wird.
  • Wenn ein größerer Zeilenabstand zwischen den Listenpunkten gewünscht ist, kann man den Start-Tag <li style="margin-bottom: 12px;"> verwenden, um den Abstand zum nächsten Listenpunkt zu vergrößern.
  • … somit ist der Zeilenabstand zum nächsten Listenpunkt erweitert.
  • Der Start-Tag <li style="margin: 12px 0;"> erweitert den Abstand sowohl zum vorherigen als auch zum nächsten Listenpunkt.
  • Man kann auch der gesamten Liste mit den Attributen im Start-Tag <ul> oder <ol> eine gemeinsame Farbe zuweisen und mehr Abstand zum Rand geben. Im Start-Tag <li> kann man die Einrückung der Schrift vom Punkt vergrößern und die Zeilenabstände definieren.
    • Die Unterpunkte (Einrückung) werden mit den Elementnamen ul oder ol ausgezeichnet, und der Start-Tag <li> folgt mit normalem Abstand.
    • Es gibt verschiedene Möglichkeiten, die Unterpunkte zu gestalten, zum Beispiel durch Variieren des Zeilenabstands mit dem Attribut style="margin: 12px 0;" im Start-Tag <li>.
    • Man kann diese Formatierung entweder direkt im HTML-Text-Editor oder
    • über CSS mit einer class definieren.
Obige Auszeichnungen.
<h2>In Kombination</h2>

<hr />

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

<hr />

<span style="display: none;"
  >Da wegerl.at <a href="https://wegerl.at/schriftart-ueber-css-anpassen/"
    >Systemfonts</a
  > verwendete und diese mit CSS individuellen color definiert waren, müssten
  die Beispiele zur "farbigen Visualisierung" jeweils im li Tag ausgezeichnet
  sein: li style="color: royalblue;" s. hier im Quelltext.</span
>
<h3>Normale Textauszeichnung</h3>
<ul>
  <li style="color: royalblue;">
    Mit Start-Tag <code>&lt;ul style="color: royalblue;"&gt;</code> sind gesamte
    Liste, die Listenpunkte und Schrift mit Farbe.
  </li>
  <li style="color: royalblue; padding-left: 20px;">
    Der Start-Tag <code>&lt;li style="padding-left: 20px;"&gt;</code> ist für
    extra Einrückung des Textes zum Listenpunkt.
  </li>
</ul>

<hr />

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

<hr />

<ul style="padding-left: 30px; color: navy;">
  <li>
    Mit dem Start-Tag <code>&lt;ul style="padding-left: 30px;"&gt;</code> kann
    man der gesamten Liste mehr oder weniger Abstand zum Rand geben, während der
    Text der nächsten Zeile wie gewohnt dargestellt wird.
  </li>
  <li style="color: navy; margin-bottom: 12px;">
    Wenn ein größerer Zeilenabstand zwischen den Listenpunkten gewünscht ist,
    kann man den Start-Tag
    <code>&lt;li style="margin-bottom: 12px;"&gt;</code> verwenden, um den
    Abstand zum nächsten Listenpunkt zu vergrößern.
  </li>
  <li style="color: navy; margin: 12px 0;">
    … somit ist der Zeilenabstand zum nächsten Listenpunkt erweitert.
  </li>
  <li style="color: navy; margin: 12px 0;">
    Der Start-Tag <code>&lt;li style="margin: 12px 0;"&gt;</code> erweitert den
    Abstand sowohl zum vorherigen als auch zum nächsten Listenpunkt.
  </li>
  <li style="color: navy;">
    Man kann auch der gesamten Liste mit den Attributen im Start-Tag
    <code>&lt;ul&gt;</code> oder <code>&lt;ol&gt;</code> eine gemeinsame Farbe
    zuweisen und mehr Abstand zum Rand geben. Im Start-Tag
    <code>&lt;li&gt;</code> kann man die Einrückung der Schrift vom Punkt
    vergrößern und die Zeilenabstände definieren.
    <ul style="list-style-type: circle;">
      <li style="color: navy;">
        Die Unterpunkte (Einrückung) werden mit den Elementnamen
        <code>ul</code> oder <code>ol</code> ausgezeichnet, und der Start-Tag
        <code>&lt;li&gt;</code> folgt mit normalem Abstand.
      </li>
      <li style="color: navy; margin: 12px 0;">
        Es gibt verschiedene Möglichkeiten, die Unterpunkte zu gestalten, zum
        Beispiel durch Variieren des Zeilenabstands mit dem Attribut
        <code>style="margin: 12px 0;"</code> im Start-Tag
        <code>&lt;li&gt;</code>.
      </li>
      <li style="color: navy; margin: 12px 0;">
        Man kann diese Formatierung entweder direkt im HTML-Text-Editor oder
      </li>
      <li style="color: navy;">
        über CSS mit einer <code>class</code> definieren.
      </li>
    </ul>
  </li>
</ul>

Bemerkungen:

Es ist nicht empfehlenswert, das line-height-Attribut im Start-Tag <li> zu verwenden, da sich die Auswirkungen auf die Abstände nach oben und unten überlappen können. Allerdings kann ein größerer Zeilenabstand im Gesamten, beispielsweise durch das Hinzufügen von style="line-height: 150%;" zum ul-Tag oder dem ol-Tag, durchaus sinnvoll sein. Dies kann durch Hinzufügen von style="margin-bottom 12px;" oder style="margin: 12px 0;" zum li-Tag erweitert werden, um die Listenpunkte zu betonen.

Es ist wichtig zu beachten, dass das Auszeichnen von Unterpunkten allein mit dem line-height-Attribut im Start-Tag der Elemente ul und ol nicht funktioniert. Dadurch werden auch die darüberliegenden Listenpunkte mit einem erweiterten Zeilenabstand versehen.

CSS für ständigen Gebrauch

CSS:

li {
    margin: 10px 0;
}
… und teils Gebrauch

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

.sep-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="sep-li">

Ein Vorteil der Verwendung von CSS-Klassen zur Auszeichnung von Listenelementen besteht darin, dass man die Abstände zwischen den Unterpunkten beibehalten kann, während jedes li-Start-Tag einzeln ausgezeichnet werden muss. Allerdings ist der Aufwand für die Verwendung von CSS-Klassen und Selektoren über das class-Attribut im Vergleich zur direkten Auszeichnung mit li-Start-Tags in der Regel gleich. Aber die Trennung von Inhalt und Layout erleichtert, die Wartbarkeit und Flexibilität der Webseite, also CSS ist immer gut.

Bspw.

Hier noch ein Beispiel, das mit dem Selektor und Stylesheet-Angabe im CSS:

.bigger {
    color: royalblue;
    font-size: 150%;
    list-style-position: inside;
}

… dann im HTML-Text-Editor über Attributname class:

<ul>
  <li class="bigger">Listenpunkt mit Class bigger</li>
  <li class="bigger">Listenpunkt mit Class bigger</li>
  <li>Listenpunkt ohne Class bigger</li>
</ul>

Darstellung:

  • Listenpunkt mit Class bigger
  • Listenpunkt mit Class bigger
  • Listenpunkt ohne Class bigger

Merke hier: Die Darstellung mit Class ist nur im Frontend sichtbar.

Hingegen

Hingegen selbe Auszeichnung ohne Class, da genügt im HTML-Text-Editor die Auszeichnung im ul:

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

Darstellung:

  • Listenpunkt ohne Class
  • Listenpunkt ohne Class

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

Weiter von Variation

… bitte siehe CSS – Listenelemente einfärben.

Anhang

Die Nummerierung unterbrechen
und geht doch weiter

  1. Im Ersten
  2. Im Zweiten

Die Nummerierung weiter! –  das ist im Titel HTML/Tutorials/Listen/Aufzählungslisten ff.  s. Gestaltung mit CSS → usw.

  1. … und so gehts mit Nr. 3 weiter! – <ol start="3">

Die Schriftgröße von Listing font-size

So im Motto: schnell ist geholfen! – Schriftgrößen in Listen mit CSS ändern.

Die normale Schriftgröße einer Webseite beträgt in der Regel 100%, was entweder 1rem oder 16px entspricht. Wenn die Schriftgröße des Inhaltsbereichs (#content) auf 1.1rem oder 110% erhöht wird, ist es auch Sache, die Schriftgröße von Listen mit CSS zu ändern. Die Größenänderung kann unterschiedlich ausfallen, je nachdem wie die Vererbung von Schriftgrößen innerhalb der Webseite eingestellt ist.

Beispiel: Der Website normalen Schriftgröße von 100%, das sind, ist in der Regel 1em oder 16px. Und die Schriftgröße bspw. für #content wurde auf 1.1em bzw. 110% editiert. So ist es konform das font-size auch von Listen zu ändern.

#content ol,
#content ul {
    font-size: 110%;
    font-weight: 300;
}

#content li > ul,
#content li > ol {
    font-size: 100%;
}

Das so unterschiedlich der % das geht aus der Vererbungssache von Schriftgröße.

Aktualisiert im Jahr 2023-März

👉🏿 Das könnte Dich auch ansprechen