CSS-Styling von Listen

Einführung

In diesem Lab lernen Sie, wie Sie eine standardmäßige, ungestylte HTML-Liste in ein optisch ansprechendes horizontales Navigationsmenü mit CSS umwandeln. Standardmäßig werden HTML-Listen (<ul>) vertikal mit Aufzählungspunkten angezeigt. Wir werden mehrere grundlegende CSS-Eigenschaften verwenden, um das Standard-Styling zu entfernen und eine saubere, moderne Navigationsleiste zu erstellen.

Sie lernen die folgenden CSS-Eigenschaften kennen:

• list-style-type
• padding
• display
• background-color
• margin

Am Ende dieses Labs werden Sie ein solides Verständnis dafür haben, wie man Listen stylt, eine häufige Aufgabe in der Webentwicklung zur Erstellung von Menüs, Artikellisten und vielem mehr.

Setze list-style-type none auf das ul-Element

In diesem Schritt beginnen Sie damit, die standardmäßigen Aufzählungspunkte aus der unsortierten Liste zu entfernen. Die CSS-Eigenschaft list-style-type wird verwendet, um das Erscheinungsbild des Listenelementmarkers zu steuern.

Suchen Sie zuerst die Datei styles.css im Dateiexplorer auf der linken Seite der WebIDE und öffnen Sie sie. Die Datei ist derzeit leer.

Fügen Sie nun die folgende CSS-Regel zu styles.css hinzu. Diese Regel zielt auf das <ul>-Element ab und setzt dessen list-style-type auf none, wodurch die Aufzählungspunkte ausgeblendet werden.

ul {
  list-style-type: none;
}

Speichern Sie die Datei styles.css nach dem Hinzufügen des Codes. Um das Ergebnis zu sehen, klicken Sie auf den Tab "Web 8080" oben in der LabEx-Oberfläche. Sie sollten die Liste der Elemente ohne die Aufzählungspunkte sehen.

Wende padding 0 an, um den Standard-Einzug zu entfernen

In diesem Schritt entfernen Sie den Standard-Einzug, den Browser automatisch auf unsortierte Listen anwenden. Dieser Einzug ist tatsächlich ein padding auf der linken Seite des <ul>-Elements.

Um ihn zu entfernen, aktualisieren Sie die vorhandene ul-Regel in Ihrer styles.css-Datei. Fügen Sie die Eigenschaft padding: 0; zur Regel hinzu. Dies setzt den padding auf allen vier Seiten des Elements auf Null und entfernt effektiv den linken Einzug.

Aktualisieren Sie Ihre styles.css-Datei, sodass sie wie folgt aussieht:

ul {
  list-style-type: none;
  padding: 0;
}

Speichern Sie die Datei und wechseln Sie zum Tab "Web 8080", um Ihre Änderungen in der Vorschau anzuzeigen. Sie werden feststellen, dass die Liste nun ganz links im Container ausgerichtet ist.

Verwende display inline-block für eine horizontale Liste

In diesem Schritt ändern Sie das Layout der Listenelemente von vertikal zu horizontal. Standardmäßig sind Listenelemente (<li>) Block-Level-Elemente, was bedeutet, dass jedes Element die gesamte verfügbare Breite einnimmt und in einer neuen Zeile beginnt.

Um sie nebeneinander zu platzieren, können Sie ihre display-Eigenschaft ändern. Wir verwenden den Wert inline-block, der es Elementen ermöglicht, nebeneinander wie Inline-Elemente zu liegen, aber Block-Level-Eigenschaften wie width, height und padding beizubehalten.

Fügen Sie eine neue CSS-Regel für das li-Element in Ihrer styles.css-Datei hinzu.

li {
  display: inline-block;
}

Ihre vollständige styles.css-Datei sollte nun wie folgt aussehen:

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
}

Speichern Sie die Datei und überprüfen Sie den Tab "Web 8080". Die Listenelemente sollten nun in einer einzigen horizontalen Linie angeordnet sein.

Füge background-color zu li-Elementen hinzu

In diesem Schritt fügen Sie den Listenelementen einige visuelle Stile hinzu, damit sie mehr wie Navigationsschaltflächen aussehen. Wir fügen eine Hintergrundfarbe und etwas inneren padding hinzu.

Die Eigenschaft background-color setzt die Hintergrundfarbe eines Elements, und die Eigenschaft padding fügt Platz innerhalb des Rahmens des Elements hinzu.

Ändern Sie die vorhandene li-Regel in styles.css, um diese neuen Eigenschaften einzuschließen.

li {
  display: inline-block;
  background-color: #f2f2f2;
  padding: 8px 16px;
}

Hier setzt background-color: #f2f2f2; einen hellgrauen Hintergrund. padding: 8px 16px; fügt 8 Pixel padding oben und unten sowie 16 Pixel links und rechts vom Text innerhalb jedes Listenelements hinzu.

Speichern Sie die Datei und aktualisieren Sie den Tab "Web 8080". Sie werden sehen, dass jedes Listenelement nun einen grauen Hintergrund und mehr Platz um den Text hat, wodurch sie wie separate Schaltflächen aussehen.

Implementiere Abstand zwischen li-Elementen

In diesem letzten Styling-Schritt fügen Sie etwas Abstand zwischen den Listenelementen hinzu, um zu verhindern, dass sie sich berühren. Die margin-Eigenschaft wird verwendet, um Platz um ein Element herum zu schaffen, außerhalb seines Rahmens.

Um nur zwischen den Elementen Abstand zu schaffen, können wir jedem Listenelement einen margin auf der rechten Seite geben, indem wir die Eigenschaft margin-right verwenden.

Aktualisieren Sie die li-Regel in Ihrer styles.css-Datei ein letztes Mal:

li {
  display: inline-block;
  background-color: #f2f2f2;
  padding: 8px 16px;
  margin-right: 5px;
}

Dies fügt jedem Listenelement einen 5-Pixel-Margin auf der rechten Seite hinzu und trennt sie voneinander. Das letzte Element wird ebenfalls einen Margin haben, aber dieser wird nicht sichtbar sein, da kein Element daneben existiert.

Speichern Sie die Datei und betrachten Sie den Tab "Web 8080". Ihr horizontales Navigationsmenü ist nun fertiggestellt, mit korrektem Abstand zwischen jeder Schaltfläche.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben dieses Lab zum Stylen von CSS-Listen erfolgreich abgeschlossen.

Sie haben mit einer standardmäßigen vertikalen HTML-Liste begonnen und diese in ein gestyltes, horizontales Navigationsmenü umgewandelt. Dabei haben Sie mehrere wesentliche CSS-Eigenschaften gelernt und angewendet:

• list-style-type zum Entfernen der standardmäßigen Listenpunkte.
• padding zum Entfernen der standardmäßigen Listen-Einrückung.
• display: inline-block zum horizontalen Anordnen von Listenelementen.
• background-color und padding zum Stylen der Elemente als Schaltflächen.
• margin-right zum Erstellen von Abstand zwischen den Elementen.

Diese Techniken sind grundlegend für den Aufbau von Navigationsleisten und anderen listenbasierten Komponenten auf modernen Websites.