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

Werbung

Der Classic-Editor: Vertraut und zuverlässig –
Ihr bewährter Begleiter.  Info


Erleben Sie den Classic Editor neu!
(Bilder von pixelcreatures)


Viele Nutzer schätzen die vertraute Umgebung des Classic-Editors, die eine einfache und schnelle Bearbeitung ermöglicht.

Werbung

Mit dem Advanced Editor Tools auf das nächste Level –
Mehr Funktionen, mehr Möglichkeiten.


Classic Editor + Advanced Editor Tools
= Ihr Erfolgsrezept


Der Advanced Editor erweitert den Funktionsumfang des Classic-Editors und ermöglicht es, Inhalte noch effektiver zu bearbeiten.

Werbung

Einfach und intuitiv –
Der Classic-Editor für alle. Info


Classic Editor & Advanced Editor Tools
Erleben Sie es.


Der Classic-Editor zeichnet sich durch Stabilität und Zuverlässigkeit aus, was für professionellen Anwender von Bedeutung ist.

Werbung

Mehr schaffen in weniger Zeit –
Der Advanced Editor für kreative Köpfe.


Optimieren Sie Ihre Bearbeitung:
Advanced Editor Tools


Mit dem Advanced Editor können Designer und
Content Creatoren kreative Ideen umsetzten.


Info echo1 OpenClipart-Vectors-katze-1
Ist der Classic-Editor zu kennen? –
Versäume bitte nicht den Advanced Editor! Blick in die Zukunft: Advanced Editor Tools
Info echo2 OpenClipart-Vectors-katze-2
Classic-Editor – Classic Widgets
"Innovativ und ausgezeichnet!" Hauch von Nostalgie: Classic Widgets
Info echo3 OpenClipart-Vectors-katze-3
Klassischen Editor! – und …
"Advanced Editor Tools" Dauerhaft dynamisch: Advanced Editor Tools
Info echo4 OpenClipart-Vectors-katze-7
… die Welt gehört dem, der sie genießt.
– mit Classic Editor und Advanced Tools! Advanced Editor Tools und Classic Widgets
Info echo5 OpenClipart-Vectors-katze-4
Aktive Installationen: 2+ Millionen
"Advanced Editor Tools – ist fabelhaft!" Unverändert exzellent: Advanced Editor Tools
Info echo6 OpenClipart-Vectors-katze-5
Antörnend! – hier zur Lancierung
"Advanced Editor Tools – ist de luxe!" Classic Editor und Advanced Editor Tools
Info echo7 OpenClipart-Vectors-katze-6
Classic Widgets sind innovativ!
"Classic Widgets – sind modern!" Advanced Editor ToolsClassic Widgets
Info echo8 OpenClipart-Vectors-katze-8a
"Werkraum ist Werkraum"
Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker
"Frontend ist Frontend!" Classic Editor und Advanced Editor Tools

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.

wp wegerl.at

Der Beitrag wurde mit fachlicher Unterstützung erstellt.


Aktualisiert im Jahr 2024-Februar