Willkommen beim WP Wegerl.at 'Lesemodus'!
Entspanntes Lesen und spannende Artikel warten auf dich.
Entdecke unsere besten Beiträge und genieße den Lesemodus.
Aufzählungszeichen
smilies.4-user.de

Elegante Listen in CSS: Aufzählungszeichen meistern

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

Listen sind eine effektive Möglichkeit, Informationen auf strukturierte Weise darzustellen. 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.

Werfen wir einen genaueren Blick darauf, wie Auszeichnungszeichen aufgebaut sind, der Unterschiede und Möglichkeiten. Diese visuellen Elemente spielen eine entscheidende Rolle bei der Hervorhebung von spezifischen Punkten und verleihen dem Text eine zusätzliche Ebene der Strukturierung und Aufmerksamkeit.

Aufzählungszeichen der Auszeichnungen

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

Die Elementnamen ul, oldl 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): Aufzählungsliste,
ol
für geordnete Liste (ordered list): Nummerierte Liste,
dl
für Definitionslisten (definition term) und
li
das Listenelement für sich (list item).

Hier sind einige gängige Werte für list-style-type:

  • disc: Standardwert, Kreisaufzählungszeichen.
  • circle: Leere Kreisaufzählungszeichen.
  • square: Quadrataufzählungszeichen.
  • decimal: Numerische Aufzählungszeichen.

Ungeordnete und geordnete Listen

Ungeordnete Listen (Aufzählungsliste) verwenden Aufzählungspunkte, um Elemente ohne spezifische Reihenfolge anzuzeigen, während geordnete Listen nummerierte Punkte verwenden, um eine bestimmte Abfolge zu betonen. Aufzählungslisten eignen sich gut für Elemente ohne klare Rangfolge, wie beispielsweise Punkte in einer Aufzählung. Geordnete Listen (Nummerierte Listen) sind hingegen ideal, wenn eine sequenzielle Anordnung, wie in Schritten einer Anleitung, betont werden soll. Beide Listenarten verbessern die Lesbarkeit und Struktur von Inhalten, indem sie eine klare visuelle Hierarchie schaffen.

<!-- Beispiel für ungeordnete Liste -->
<ul>
  <li>Ungeordneter Listenpunkt 1 (li)</li>
  <li>Ungeordneter Listenpunkt 2
    <ul style="list-style-type: circle;">
      <li>Ungeordneter Unterpunkt 1
        <ul style="list-style-type: square;">
          <li>Ungeordneter Unterpunkt 2</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

<!-- Beispiel für geordnete Liste -->
<ol>
  <li>Geordneter Listenpunkt 1</li>
  <li>Geordneter Listenpunkt 2
    <ol style="list-style-type: upper-alpha;">
      <li>Geordneter Unterpunkt 1
        <ol style="list-style-type: lower-alpha;">
          <li>Geordneter Unterpunkt 2</li>
        </ol>
      </li>
    </ol>
  </li>
</ol>
  • <ul> ist der Container-Tag für eine ungeordnete Liste.
  • <ol> ist der Container-Tag für eine geordnete Liste.
  • <li> steht für List Item und wird für jedes Element in der Liste verwendet.
  • Die <ul>– und <ol>-Tags können jeweils ein verschachteltes <ul> oder <ol> für Unterlisten enthalten.

  • Ungeordneter Listenpunkt 1 (li)
  • Ungeordneter Listenpunkt 2
    • Ungeordneter Unterpunkt 1
      • Ungeordneter Unterpunkt 2
  1. Geordneter Listenpunkt 1
  2. Geordneter Listenpunkt 2
    1. Geordneter Unterpunkt 1
      1. Geordneter Unterpunkt 2

Definitionsliste

Definitionslisten bieten eine präzise Möglichkeit, Begriffe und ihre zugehörigen Definitionen in einer strukturierten Form darzustellen. Anders als ungeordnete oder geordnete Listen setzen sich Definitionslisten aus Begriffen und Definitionen zusammen. Ein einzelner Eintrag besteht aus einem Begriff, gefolgt von seiner Definition. Dies ermöglicht eine klare, exakte Darstellung von Begriffen und ihrer Bedeutung. Definitionslisten sind besonders nützlich in technischen Dokumentationen, Glossaren oder immer dann, wenn eine genaue Zuordnung von Begriff und Definition erforderlich ist.

<!-- Beispiel für Definitionsliste -->
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language - Die Sprache zur Strukturierung von Inhalten im Web.</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets - Die Sprache zur Gestaltung und Layout von HTML-Dokumenten.</dd>

  <dt>JavaScript</dt>
  <dd>Eine Programmiersprache, die hauptsächlich für die dynamische Gestaltung von Webseiten verwendet wird.</dd>
</dl>
  • <dl> ist das Container-Tag für die Definitionsliste.
  • <dt> steht für Definition Term und wird für den Begriff verwendet.
  • <dd> steht für Definition Description und wird für die Beschreibung des Begriffs verwendet.
HTML
HyperText Markup Language – Die Sprache zur Strukturierung von Inhalten im Web.
CSS
Cascading Style Sheets – Die Sprache zur Gestaltung und Layout von HTML-Dokumenten.
JavaScript
Eine Programmiersprache, die hauptsächlich für die dynamische Gestaltung von Webseiten verwendet wird.

Textfarbe, Abstand vom Rand usw.

Folgendes ist entstanden, um die verschiedenen Möglichkeiten der Aufzählungszeichen zu demonstrieren. In der praktischen Anwendung ist dies möglicherweise nicht so relevant, da das Erscheinungsbild oft durch das Theme festgelegt ist und dann über CSS angepasst werden kann. Dies diente lediglich der Illustration der Auszeichnungsoptionen.

Styles sollten stets über CSS gestaltet werden!

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.

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

<hr />

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

<hr />

Beispiel von Textauszeichnung
<ul>
  <li style="color: royalblue;">
    Mit dem Start-Tag <code>&lt;ul style="color: royalblue;"&gt;</code> wird die gesamte
    Liste, einschließlich der Listenpunkte und des Textes, mit Farbe versehen.
  </li>
  <li style="color: royalblue; padding-left: 20px;">
    Der Start-Tag <code>&lt;li style="padding-left: 20px;"&gt;</code> sorgt für
    eine zusätzliche Einrückung des Textes zum Listenpunkt.
  </li>
</ul>

<hr />

<ul style="list-style-position: inside; color: mediumblue;">
  <li style="color: mediumblue;">
    Mit dem Start-Tag
    <code>&lt;ul style="list-style-position: inside;"&gt;</code> kann der
    gesamten Liste mehr Abstand zum Rand gegeben werden. Der Text
    der folgenden Zeile befindet sich unter dem Aufzählungszeichen.
  </li>
  <li style="color: mediumblue; list-style-position: outside;">
    (Standard) Der Abstand ist normal, wenn der gesamten Liste die
    Listenpunkte mit dem Start-Tag <code>&lt;ul style="list-style-position: outside;"&gt;</code>
    oder mit dem Elementnamen <code>li</code> das entsprechende Element hinzugefügt wird.
  </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
    der gesamten Liste mehr oder weniger Abstand zum Rand gegeben werden, 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 der Start-Tag
    <code>&lt;li style="margin-bottom: 12px;"&gt;</code> verwendet werden, 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;">
    Die gesamte Liste kann auch im Start-Tag <code>&lt;ul&gt;</code> oder <code>&lt;ol&gt;</code>
    mit gemeinsamen Attributen eine Farbe erhalten und mehr Abstand zum Rand haben.
    Im Start-Tag <code>&lt;li&gt;</code> kann die Einrückung der Schrift vom Punkt
    vergrößert und die Zeilenabstände definiert werden.
    <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;">
        Diese Formatierung kann entweder direkt im HTML-Text-Editor oder
      </li>
      <li style="color: navy;">
        über CSS mit einer <code>class</code> definiert werden.
      </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 Beispiel ohne Aufzählungszeichen

Das ist ein Beispiel für CSS durch list-style-type: none; und wird über Classen realisiert.

.custom-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.custom-list li {
  color: royalblue;
}

.custom-list li:nth-child(odd) {
  background-color: #f9f9f9;
}

.custom-list li:nth-child(even) {
  background-color: #e6e6e6;
}

.custom-list.indent {
  padding-left: 30px;
  color: navy;
}

.custom-list.indent li {
  margin: 12px 0;
}

.custom-list.indent ul {
  list-style-type: circle;
}

.custom-list.indent ul li {
  color: navy;
  margin: 12px 0;
}

Und im HTML:

<ul class="custom-list">
  <li>Listenpunkt 1</li>
  <li>Listenpunkt 2</li>
  <li>Listenpunkt 3</li>
  <li>Listenpunkt 4</li>
</ul>

<ul class="custom-list">
  <li>Listenpunkt A</li>
  <li>Listenpunkt B</li>
  <li>Listenpunkt C</li>
</ul>

<ul class="custom-list indent">
  <li>Listenpunkt mit Einrückung 1</li>
  <li>Listenpunkt mit Einrückung 2</li>
  <li>Listenpunkt mit Einrückung 3</li>
  <ul class="custom-list">
    <li>Unterpunkt A</li>
    <li>Unterpunkt B</li>
    <li>Unterpunkt C</li>
  </ul>
  <li>Listenpunkt mit Einrückung 4</li>
</ul>

Visuell:

  • Listenpunkt 1
  • Listenpunkt 2
  • Listenpunkt 3
  • Listenpunkt 4
  • Listenpunkt A
  • Listenpunkt B
  • Listenpunkt C
  • Listenpunkt mit Einrückung 1
  • Listenpunkt mit Einrückung 2
  • Listenpunkt mit Einrückung 3
    • Unterpunkt A
    • Unterpunkt B
    • Unterpunkt C
  • Listenpunkt mit Einrückung 4

Einfaches CSS für leichte Anpassungen

Für die gesamte Website:

li {
    margin: 15px 0;
}

… und teils Gebrauch:

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

.custom-list {
    margin: 5px 0;
}

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

<ul class="custom-list">
    <li>eins</li>
    <li>zwei</li>
    <li>drei</li>
</ul>
  • eins
  • zwei
  • drei

Ein Vorteil der Verwendung von CSS-Classen 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 müsste:

<ul>
    <li style="margin: 5px 0;">eins</li>
    <li style="margin: 5px 0;">zwei</li>
    <li style="margin: 5px 0;">drei</li>
</ul>

Die Trennung von Inhalt und Layout erleichtert, die Wartbarkeit und Flexibilität der Webseite, also CSS ist immer gut.

CSS für individuelle Anpassungen

Im folgenden Abschnitt werden verschiedene Anpassungen für die Größe von Aufzählungszeichen und Text vorgestellt. Diese Anpassungen erlauben es, die Größe des Aufzählungszeichens separat vom Text zu ändern. Darüber hinaus bietet der Abschnitt Einblicke, um eine präzise Kontrolle über Schriftgrößen in verschachtelten Strukturen zu erlangen.

Größe von Aufzählungszeichen und Text anpassen

Mithilfe der list-style-Eigenschaft kann sowohl die Größe der Aufzählungszeichen als auch des Textes verändert werden. Hier ein Beispiel:

ul {
    list-style-type: none; /* Entfernt die standardmäßigen Aufzählungszeichen */
}

li {
    list-style-type: square; /* Art des Aufzählungszeichens */
    font-size: 18px; /* Schriftgröße: Zeichen und Text */
	color: #ff0000; /* Farbe: Zeichen und Text */
}

Dasselbe mit einer Class:

.custom-list ul {
    list-style-type: none; /* Entfernt die standardmäßigen Aufzählungszeichen */
}

.custom-list li {
    list-style-type: square; /* Art des Aufzählungszeichens */
    font-size: 28px; /* Schriftgröße: Zeichen und Text */
	color: #ff0000; /* Farbe: Zeichen und Text */
}

Verwende dann die Classe custom-list im HTML-Code:

<ul class="custom-list">
    <li>Erster Punkt</li>
    <li>Zweiter Punkt</li>
    <li>Dritter Punkt</li>
</ul>
  • Erster Punkt
  • Zweiter Punkt
  • Dritter Punkt

Aufzählungszeichen separat ändern

Das Aufzählungszeichen selbst kann mithilfe des ::before-Pseudo-Element-Selektors in Kombination mit der content-Eigenschaft angepasst werden. Zum Beispiel mit dem Unicode-Zeichen "■" (U+25A0) für ein quadratisches Aufzählungszeichen:

.custom-list {
    list-style-type: none; /* Entfernt die standardmäßigen Aufzählungszeichen */
    margin: 0;
    padding: 0;
}

.custom-list li::before {
    content: "\25A0"; /* Unicode-Code für ein quadratisches Aufzählungszeichen (■) */
    color: #ff0000; /* Ändere die Farbe des Aufzählungszeichens */
    font-size: 18px; /* Ändere die Größe des Aufzählungszeichens */
    margin: 0 10px 0 15px; /* Füge einen konstanten Abstand zwischen dem Aufzählungszeichen und dem Text hinzu */
}

.custom-list li:last-child {
    margin-bottom: 25px; /* Setze den Abstand des letzten Listenpunkts auf 0, um die gewünschten 25px zu erreichen */
}

In diesem Beispiel wird das ::before-Pseudo-Element für jedes <li>-Element verwendet, um ein benutzerdefiniertes Aufzählungszeichen vor dem Text hinzuzufügen. Der Unicode-Code in der content-Eigenschaft kann entsprechend geändert werden, um das gewünschte Aufzählungszeichen zu verwenden.

Verwende dann die Klasse custom-list im HTML-Code:

<ul class="custom-list">
    <li>Erster Punkt</li>
    <li>Zweiter Punkt</li>
    <li>Dritter Punkt</li>
</ul>
  • Erster Punkt
  • Zweiter Punkt
  • Dritter Punkt

Folgendes verwendet das Unicode-Zeichen \2022 für ein rundes Aufzählungszeichen (•) und könnte eventuell keine optimale Wahl sein. Dies liegt daran, dass diese Punkte tendenziell klein sind, und die Standard-Aufzählungspunkte oft besser geeignet sind. Bei einer Erhöhung der font-size würden auch die Abstände zwischen den Listenpunkten größer werden.

content: '\2022'; /* Unicode-Code für ein rundes Aufzählungszeichen (•) */
  • Erster Punkt
  • Zweiter Punkt
  • Dritter Punkt

Hingegen zum Beispiel das Zeichen 'U+25B6', auch bekannt als "Black Right-Pointing Triangle" (▶), ist durchaus für die Verwendung als Aufzählungszeichen geeignet. Es ist ein Unicode-Zeichen, das oft für Pfeile oder Indikatoren verwendet wird und normalerweise etwas größer ist als der Standardpunkt.

content: '\25B6'; /* Unicode-Code für ein nach rechts zeigendes Dreieck (▶) */

Aufzählungszeichen durch eine Grafik ersetzen

Eine benutzerdefinierte Grafik, wie eine SVG-Grafik, kann für das Aufzählungszeichen verwendet werden. Hier ist ein Beispiel mit einer SVG-Grafik:

.custom-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.custom-list li::before {
    content: "";
    display: inline-block;
    width: 25px; /* Breite der SVG-Grafik */
    height: 25px; /* Höhe der SVG-Grafik */
    background: url("https://../mein-punkt.svg")
        no-repeat; /* Pfad zur SVG-Grafik */
    margin: 0 10px 0 10px; /* Füge einen konstanten Abstand zwischen dem Aufzählungszeichen und dem Text hinzu */
    vertical-align: middle; /* Setze den Text und das Aufzählungszeichen auf gleiche vertikale Ausrichtung */
}

.custom-list li:last-child {
    margin-bottom: 25px; /* Setze den Abstand des letzten Listenpunkts auf 0, um die gewünschten 25px zu erreichen */
}

Verwende dann die Klasse custom-list im HTML-Code:

<ul class="custom-list">
    <li>Erster Punkt</li>
    <li>Zweiter Punkt</li>
    <li>Dritter Punkt</li>
</ul>
  • Erster Punkt
  • Zweiter Punkt
  • Dritter Punkt

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

Weitere Informationen zu Listenpunkten, ein Miaturbild anstelle Aufzählungszeichen und dasselbe auch im Menü.

Kontrolle der Schriftgrößen in komplexen Strukturen

Wenn die Schriftgröße für Unterpunkte kleiner erscheint, könnte dies auf eine spezifische Regel im CSS oder ein Theme-Styling zurückzuführen sein. Schriftgrößen werden in der Regel durch direkte Anweisungen im CSS oder durch die Verwendung von relativen Einheiten (wie em, rem oder %) beeinflusst.

Um sicherzustellen, dass die Schriftgröße konsistent bleibt, ist es empfehlenswert, diese in Pixeln anzugeben. Hier ist ein Beispiel im %:

.custom-list li {
    margin: 10px 0;
    font-size: 115%; /* Passen Sie den Wert nach Bedarf an */
}

.custom-list li ul li {
    margin: 5px 0;
    font-size: 100%;/* Wert nach Bedarf an, um ihn gleich zu halten */
}

.custom-list li ul li ul li {
    margin: 2px 0 !important;
    font-size: 110%; /* Wert nach Bedarf anpassen, um ihn gleich zu halten */
}
<ul class="custom-list">
    <li>Die Reise beginnt</li>
    <li>Entdeckungen
        <ul style="list-style-type: circle;">
            <li>Geheimnisse des Ortes</li>
            <li>Faszinierende Orte
                <ul style="list-style-type: square;">
                    <li>Verborgene Schätze</li>
                    <li>Mystische Ecken</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
  • Die Reise beginnt
  • Entdeckungen
    • Geheimnisse des Ortes
    • Faszinierende Orte
      • Verborgene Schätze
      • Mystische Ecken

Die Schriftgröße in Prozent bezieht sich auf die Größe des übergeordneten Elements. Wenn also li eine Schriftgröße von 115% hat, bezieht sich dies auf 115% der Schriftgröße des übergeordneten Elements von li. Wenn dann li ul li ul li angeben ist, wird die Schriftgröße 110% der Schriftgröße des übergeordneten Elements von li ul li sein, und nicht 110% der Schriftgröße von li.

Dies könnte zu einer kleineren Schriftgröße führen, wenn das übergeordnete Element von li ul li eine größere Schriftgröße hat als das übergeordnete Element von li.

Die Prozentwerte beziehen sich auf die prozentuale Änderung der Schriftgröße im Vergleich zum übergeordneten Element. Nochmal, um in diesem speziellen Kontext eine konsistente Schriftgröße für alle Listenelemente zu gewährleisten, könnte stattdessen absolute Einheiten wie Pixel verwendet werden.

Nachdem wir die grundlegenden Konzepte der Schriftgrößen und ihrer relativen Einheiten erkundet haben, werfen wir nun einen genaueren Blick darauf, wie diese Prinzipien auf verschachtelte Elemente in CSS angewendet werden. Dies ist entscheidend, um ein besseres Verständnis dafür zu entwickeln, wie die Schriftgröße in Hierarchien kontrolliert wird.

1. Prozentuale Schriftgröße:

  • Die Schriftgröße in Prozent bezieht sich auf die Größe des übergeordneten Elements.
  • Beispiel: Wenn li eine Schriftgröße von 115% hat, bezieht sich dies auf 115% der Schriftgröße des übergeordneten Elements von li.

2. Auswirkungen auf verschachtelte Elemente:

  • Wenn wir dann li ul li ul li spezifizieren, bezieht sich die Schriftgröße auf 110% der Schriftgröße des übergeordneten Elements von li ul li.
  • Es ist wichtig zu verstehen, dass dies nicht 110% der Schriftgröße von li ist, sondern des unmittelbaren übergeordneten Elements von li ul li.

3. Mögliche Größenunterschiede:

  • Dies könnte zu einer kleineren Schriftgröße führen, wenn das übergeordnete Element von li ul li eine größere Schriftgröße hat als das übergeordnete Element von li.

Beispiel:

  • Damit es klarer wird, betrachten wir li als Hauptpunkt und li ul li als Unterpunkt. Wenn der Hauptpunkt eine größere Schriftgröße hat und der Unterpunkt eine Prozentangabe verwendet, wird die Schriftgröße des Unterpunkts relativ kleiner erscheinen.
PunktErklärung
Prozentuale Schriftgröße:
  • Die Schriftgröße in Prozent bezieht sich auf die Größe des übergeordneten Elements.
  • Beispiel: Wenn .li eine Schriftgröße von 115% hat, bezieht sich dies auf 115% der Schriftgröße des übergeordneten Elements von .li.
Auswirkungen auf verschachtelte Elemente:
  • Wenn wir dann li ul li ul li spezifizieren, bezieht sich die Schriftgröße auf 110% der Schriftgröße des übergeordneten Elements von li ul li.
  • Dies ist nicht 110% der Schriftgröße von li, sondern des unmittelbaren übergeordneten Elements von li ul li.
Mögliche Größenunterschiede:
  • Dies könnte zu einer kleineren Schriftgröße führen, wenn das übergeordnete Element von li ul li eine größere Schriftgröße hat als das übergeordnete Element von li.
Beispiel:
  • Wenn li als Hauptpunkt und li ul li als Unterpunkt betrachtet wird:
  • Wenn der Hauptpunkt eine größere Schriftgröße hat und der Unterpunkt eine Prozentangabe verwendet, wird die Schriftgröße des Unterpunkts relativ kleiner erscheinen.

Nummerierte Liste unterbrechen …

Es wird eine Unterbrechung der Nummerierung vorgenommen und es wird fortgesetzt.

  1. Im Ersten
  2. Im Zweiten

Die Nummerierung setzt sich fort! Details findest du im Tutorial HTML/Tutorials/Listen/Aufzählungslisten.

  1. Und so geht’s mit Nr. 3 weiter! – <ol start="3">

Die Schriftgröße von Listing font-size

Folgendes ist rein intern und bleibt so stehen. Möglicherweise können einige sinNvolle Ableitungen daraus gezogen werden.

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.15em. So ist es konform das font-size auch der Listen (Unterpunkte) zu ändern, zum Beispiel:

#content p,
#content li {
    font-weight: 400;
    color: #4A1414;
    font-size: 1.15em;
    line-height: 1.6;
}

#content li > ul,
#content li > ol {
    font-size: 0.85em; 
}

#content li {
    margin: 5px 0;
}

Unser CSS definiert für Hauptpunkte (li) eine Schriftgröße von 1.15em und für deren Unterpunkte eine reduzierte Größe von 0.85em. Trotz dieser Differenzierung sind die Unterpunkte letztendlich gleich groß wie die Hauptpunkte, da die Größenanpassung keine visuelle Differenzierung bewirkt.

Die Vererbung in CSS bedeutet, dass Eigenschaften von übergeordneten Elementen an untergeordnete Elemente weitergegeben werden. Im vorliegenden Fall, wenn für Hauptpunkte (li) eine Schriftgröße von 1.15em festgelegt ist und für Unterpunkte eine reduzierte Größe von 0.85em, könnte die Vererbung beeinflussen, wie diese Größen auf die einzelnen Elemente angewendet werden.

Jedoch kann die Art und Weise, wie Browser Vererbung interpretieren und anwenden, variieren. In manchen Fällen könnte die spezifischere Angabe der Schriftgröße für Unterpunkte (0.85em) nicht ausreichen, um eine visuelle Differenzierung von den Hauptpunkten zu erzeugen. Die Schriftgröße könnte visuell letztendlich gleich aussehen, trotz der festgelegten Unterschiede.

Es könnte auch sein, dass andere Stileigenschaften oder -regeln die Wirkung der Schriftgrößenanpassung beeinflussen und dazu führen, dass die visuelle Differenzierung nicht deutlich genug ist.

Die Schriftgrößenvererbung und -anpassung in CSS können von verschiedenen Faktoren beeinflusst werden, und manchmal reicht die spezifischere Größenangabe allein nicht aus, um eine klare visuelle Unterscheidung zu erzeugen. Es bedarf möglicherweise weiterer Anpassungen oder anderer Stileigenschaften, um die gewünschte visuelle Differenzierung zu erreichen.

zeitmaschine, gifzentrale.com

Der Beitrag wurde mit fachlicher Unterstützung erstellt.


Aktualisiert im Jahr 2024-Februar