Listen und Tabellen
Listen
See the Pen Untitled by Bernd Schiller (@Bernie14153) on CodePen.
Neben den bereits bekannten Texteigenschaften lässt sich bei Listen u.a. das Erscheinungsbild der Aufzählungszeichen bzw. die Nummerierung über CSS beeinflussen.
Die Textattribute werden in der Regel den Listenelementen zugeordnet.
Zur Vertiefung: Listen mit HTML und CSS
Tabellen
Tabellen werden auf Websites zu Strukturierung von Daten, aber auch zur Gestaltung des Layouts benutzt. Die HTML-Schlüsselwörter sind table für die Tabelle, tr für die Tabellenzeile, td für die einzelne Zelle und th für eine Zelle in der Kopfzeile.
See the Pen Untitled by Bernd Schiller (@Bernie14153) on CodePen.
Die Textattribute können allen Tabellenelementen hinzugefügt werden.
Zur Vertiefung: Tabellen mit HTML und CSS (Ausführliches Beispiel)
id- und class-Selektor
Gerade bei Listen und Tabellen will man oft einzelne Zeilen oder Elemente auf eine bestimmte Art und Weise von anderen abheben. Dazu stellt CSS sogenannte Selektoren zur Verfügung. Die wichtigsten sind der id-Selektor und der class-Selektor.
1. Der ID-Selektor
Du benutzt einen ID-Selektor, wenn du ein ganz bestimmtes, einzigartiges Element auf deiner Webseite stylen möchtest. Es sollte wirklich nur einmal auf der ganzen Seite vorkommen.
Im HTML gibst du dem Element eine id:
<h1 id="hauptueberschrift">Meine tolle Webseite</h1>Im CSS sprichst du die ID mit einem Doppelkreuz (#) an:
#hauptueberschrift {
color: blue; /* Die Überschrift wird blau */
text-align: center; /* Sie wird mittig ausgerichtet */
}Merke: Eine ID ist einzigartig! Verwende sie nur einmal auf deiner Seite.
2. Der class-Selektor (für "Klasse" / Gruppe)
Du benutzt einen class-Selektor, wenn du mehrere Elemente auf deiner Webseite gleich stylen möchtest, also wenn sie zur selben "Gruppe" gehören sollen.
Im HTML gibst du den Elementen eine class:
<p class="wichtiger_hinweis">Bitte beachte die Regeln!</p>
<p>Ein normaler Textabsatz.</p>
<p class="wichtiger_hinweis">Das ist auch ein wichtiger Hinweis.</p>Im CSS sprichst du die Klasse mit einem Punkt (.) an:
.wichtiger_hinweis {
color: red; /* Alle wichtigen Hinweise werden rot */
font-weight: bold; /* Sie werden fett dargestellt */
}
Merke: Eine class kann für viele Elemente verwendet werden! Ein Element kann sogar mehrere Klassen haben (z.B. <p class="wichtiger_hinweis fett_gedruckt">).