Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
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
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 Elementnameli
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
oderol
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.
- Die Unterpunkte (Einrückung) werden mit den Elementnamen
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><ul style="color: royalblue;"></code> sind gesamte
Liste, die Listenpunkte und Schrift mit Farbe.
</li>
<li style="color: royalblue; padding-left: 20px;">
Der Start-Tag <code><li style="padding-left: 20px;"></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><ul style="list-style-position: inside;"></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><ul style="list-style-position: outside;"></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><ul style="padding-left: 30px;"></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><li style="margin-bottom: 12px;"></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><li style="margin: 12px 0;"></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><ul></code> oder <code><ol></code> eine gemeinsame Farbe
zuweisen und mehr Abstand zum Rand geben. Im Start-Tag
<code><li></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><li></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><li></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
- Im Ersten
- Im Zweiten
Die Nummerierung weiter! – das ist im Titel HTML/Tutorials/Listen/Aufzählungslisten ff. s. Gestaltung mit CSS → usw.
- … 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.
- Kurz zum Verständnis siehe hier: books.google
- Ein bisschen mehr Ordnung: Listen
Aktualisiert im Jahr 2023-März