Werbung

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

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.

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.

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.

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

---

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, 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): 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.

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>

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: 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 */
}

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

• HTML/Tutorials/Listen > HTML/Tutorials/Listen/Gestaltung mit CSS (selfhtml)

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

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.

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

#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;
}

Der Beitrag wurde mit fachlicher Unterstützung erstellt.

Aktualisiert im Jahr 2024 Februar