Listen gestalten
Die drei edlen Listen-Gefährten
Auf deiner Reise durch das Reich der Listen triffst du auf drei edle Begleiter. Der erste, ein pedantischer Buchhalter, bringt Ordnung ins Chaos, indem er Zahlen und Buchstaben fein säuberlich neben deine Punkte setzt. Der zweite, ein exzentrischer Künstler, wirft kunstvolle Symbole und sogar Bilder in die Liste, als wären sie wertvolle Juwelen. Der dritte, ein Meister der Harmonie, sorgt dafür, dass alles im perfekten Gleichgewicht bleibt, egal wie wild deine Kreativität tobt.
Doch Vorsicht! Diese Gefährten haben auch ihre Eigenheiten. Der Buchhalter kann schon mal stur werden und auf seinem geliebten römischen Zahlensystem beharren, während der Künstler plötzlich alle Punkte durch winzige Drachen ersetzt. Und der Harmonie-Meister? Nun, er wird nie müde, dich daran zu erinnern, dass auch der wildeste Listen-Entwurf seine Balance braucht.
Listen mit Stil
Punkte, Symbole, Icons – mach deine Listen einzigartig!
Aufzählungszeichen
Passe den Stil deiner Listen an
Mit list-style-type kannst du deinen ersten edlen Begleiter, den Buchhalter, in eine neue Garderobe stecken. Ob er nun mit gefüllten Kreisen, offenen Kreisen oder Quadraten
daherkommt, du hast die Macht, seinen Stil zu bestimmen. Und wenn dir danach ist, kannst du ihn sogar ganz ohne Symbole herumlaufen lassen. Freiheit im Design? Aber natürlich!
ul {
list-style-type: circle;
}Mögliche Werte sind:
- disc (Standard, gefüllter Kreis)
- circle (offener Kreis)
- square (Quadrat)
- none (kein Aufzählungszeichen)
Stilvolle Nummerierung
Der Buchhalter in Hochform
Auch der Meister der Zahlen kann sich flexibel zeigen: Ob er Zahlen, Buchstaben oder römische Ziffern wählt, liegt ganz bei dir. Er passt sich deinen Anforderungen an und sorgt dafür, dass deine geordnete Liste die perfekte Symbolik erhält. So bringst du die Ordnung ins Spiel, die deinen Inhalten den gebührenden Respekt verleiht.
ul {
list-style-type: lower-alpha;
}Mögliche Werte sind:
- decimal (Standard, Zahlen)
- lower-alpha (kleine Buchstaben)
- upper-alpha (große Buchstaben)
- lower-roman (kleine röm. Ziffern)
- upper-roman (große röm. Ziffern)
Zeichen & Inhalte
Nutze geheime Symbole für deine Listen
Du willst den typischen Bulletpoints entfliehen und stattdessen etwas Magie ins Spiel bringen? Dann verwandle die Symbole deiner Liste mit einem geheimen Trick: list-style-type: none und das Pseudoelement ::before. Ein Hauch von Magie, und schon stehen vor deinen Listenpunkten wunderliche Zeichen, die so individuell sind wie deine Webseite. Du kannst sie in Farbe und Größe anpassen und damit deine Liste zum Leuchten bringen.
Eine Liste der HTML-Entities findest du hier:
https://www.toptal.com
li {
list-style-type: none;
}
li::before {
content: '\26E6';
margin-right: 10px;
color: purple;
font-size: 1.5rem;
}Mögliche Werte sind:
- list-style-type: none; entfernt die standardmäßigen Bulletpoints.
- ::before fügt das Unicode-Zeichen vor jedem Listenpunkt hinzu.
- margin-right sorgt für Abstand
zwischen Symbol und dem Text.
Aufzählung mit Bild
Der Künstler entfaltet sich
Unser exzentrischer Künstler ist begeistert: Mit list-style-image kannst du deine Bullet-points durch handverlesene Bilder ersetzen. Ein Bild sagt mehr als tausend Kreise, oder? Wähle deine Grafiken sorgfältig aus, denn sie verleihen deinen Listen einen Hauch von Einzigartigkeit und machen sie zu einem visuellen Erlebnis.
ul {
list-style-image: url('img/list-icon.png');
}
li {
margin-left: 10px;
}list-style-image: ersetzt die Bulletpoints mit einem Bild
Positionierung in der Liste
Die Macht des Harmonie-Meisters
Und schließlich sorgt der Harmonie-Meister dafür, dass alles an seinem Platz ist: Mit list-style-position legst du fest, ob das Aufzählungszeichen innerhalb oder außerhalb des Listeninhalts steht. Wie ein geschickter Architekt platziert er jedes Symbol so, dass es perfekt ins Gesamtbild passt, ohne die Balance zu stören.
ul {
list-style-position: inside;
}list-style-position: inside lässt den Listenpunkt innerhalb des Inhaltes stehen.
In dieser Lektion hast du gelernt…
- Wie du mit
list-style-typedas Aussehen von Aufzählungszeichen anpasst, indem du Kreise, Quadrate oder Buchstaben verwendest. - Warum du mit
list-style-type: noneund::beforeindividuelle Symbole setzen kannst, um deine Listen optisch einzigartig zu gestalten. - Wie du
list-style-imagenutzt, um Bulletpoints durch eigene Bilder zu ersetzen und deine Liste visuell aufzuwerten. - Warum
list-style-positionentscheidend ist, um festzulegen, ob das Aufzählungszeichen innerhalb oder außerhalb des Listeninhalts steht.
Hier siehst du den Code, den du gelernt hast – aber fühl dich frei, zu experimentieren! Probiere Änderungen aus, teste neue Ideen und sieh, was passiert. Das ist dein Raum zum Tüfteln!
Die Symbole der Alchemie
Die Alchemisten führen ihre wertvollen Zutatenlisten mit einer Liebe zum Detail, die selbst den pingeligsten Elfen Respekt abnötigt. Jedes Symbol, jedes Zeichen erzählt eine Geschichte – vom Stern für seltene Zutaten bis zum Totenkopf für „bitte nicht verwechseln“. Mit CSS kannst du diesen magischen Listen ein eigenes Gesicht geben: Verändere Aufzählungszeichen, füge Symbole hinzu und gestalte die Position so, dass sie die Bedeutung der Zutaten hervorhebt. Deine Listen werden so einzigartig wie die Tränke, die sie beschreiben!
Deine Aufgabe: Die Gestaltung von Listen
- Listensymbole anpassen (list-style-type):
Verwende für die Klasse .ingredients die Eigenschaft list-style-type mit einem Wert wie circle, square, oder einer benutzerdefinierten Nummerierung. - Bild als Symbol einfügen (list-style-image):
Füge für die .tools-Klasse ein Bild als Aufzählungssymbol ein:. url(‚assets/img/list-icon.png‘). - Position der Listensymbole (list-style-position):
Setze für die .ingredients-Klasse die Eigenschaft list-style-position: inside;. - Pseudoelemente ::before und ::after verwenden:
Verwende das Pseudoelement ::before, um vor jedem Listeneintrag der .tools-Klasse ein Symbol hinzuzufügen, z.B. eine HTML-Entity (content: ‚\02606‘; für einen Stern).
Öffne Visual Studio Code und lasse diese Worte auf der Seite erscheinen. Oder probiere es direkt hier im Editor aus!
.ingredients {
list-style-type: circle;
list-style-position: inside;
}
.ingredients li {
list-style-type: none;
}
.ingredients li::before {
content: '\02606';
margin-right: 10px;
color: purple;
font-size: 1.5rem;
}
.tools ul {
list-style-image: url('assets/img/list-icon.png');
}
.tools li {
margin-left: 10px;
}