LabEx
AnmeldenKostenlos beitreten

Listen mit CSS-Attributen gestalten

CSSCSSBeginner
Jetzt üben

💡 Dieser Artikel wurde von AI-Assistenten übersetzt. Um die englische Version anzuzeigen, können Sie hier klicken

Einführung

In diesem Lab werden die Schüler die Kunst des Stylings von Listen mit CSS erkunden, wobei der Fokus auf der Transformation der standardmäßigen Erscheinung von nummerierten, aufzählenden und Beschreibungslisten liegt. Die Teilnehmer lernen, wie sie Listenmarker über verschiedene CSS-Eigenschaften wie list-style-type, list-style-image und list-style-position anpassen können, was es ihnen ermöglicht, visuell ansprechende und einzigartige Listenentwürfe zu erstellen.

Das Lab führt die Lernenden durch einen schrittweisen Prozess zum Erstellen eines HTML-Projekts mit verschiedenen Listenarten und anschließendem Anwenden von CSS-Techniken, um die Listenstile zu modifizieren. Am Ende des Labs werden die Schüler praktische Erfahrungen bei der Änderung der Listenmarkertypen, beim Ersetzen von Standardmarkern durch benutzerdefinierte Bilder, beim Anpassen der Markerposition und beim Verwenden der Kurzschreibweise list-style-Eigenschaft zum effizienten Styling von Listen gesammelt haben.

HTML-Projekt einrichten und einfache Liste erstellen

In diesem Schritt werden Sie ein grundlegendes HTML-Projekt einrichten und Ihre erste Liste erstellen, um sich auf die Exploration des CSS-List-Stylings vorzubereiten. Wir beginnen mit dem Erstellen einer einfachen Projektstruktur und einer HTML-Datei mit verschiedenen Listenarten.

Navigieren Sie zunächst zum Projektverzeichnis:

cd ~/project

Erstellen Sie ein neues Verzeichnis für Ihr CSS-List-Styling-Projekt:

mkdir css-list-styling
cd css-list-styling

Erstellen Sie nun eine HTML-Datei namens index.html mit der WebIDE:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS List Styling</title>
  </head>
  <body>
    <h1>Meine Lieblings-Programmiersprachen</h1>

    <h2>Geordnete Liste (nummeriert)</h2>
    <ol>
      <li>Python</li>
      <li>JavaScript</li>
      <li>Java</li>
      <li>C++</li>
    </ol>

    <h2>Ungeordnete Liste (mit Punkten)</h2>
    <ul>
      <li>Webentwicklung</li>
      <li>Datenwissenschaft</li>
      <li>Maschinelles Lernen</li>
      <li>Mobiles Anwendungen</li>
    </ul>

    <h2>Beschreibungsliste</h2>
    <dl>
      <dt>HTML</dt>
      <dd>Hypertext Markup Language für die Webstruktur</dd>
      <dt>CSS</dt>
      <dd>Cascading Style Sheets für das Web-Design</dd>
    </dl>
  </body>
</html>

Diese HTML-Datei zeigt drei Arten von Listen:

  1. Geordnete Liste (<ol>): Automatisch nummeriert
  2. Ungeordnete Liste (<ul>): Verwendet Standard-Punkte
  3. Beschreibungsliste (<dl>): Verwendet für Term- und Beschreibungspaare

Beispielausgabe, wenn in einem Browser angezeigt:

  • Die geordnete Liste zeigt Zahlen (1, 2, 3, 4)
  • Die ungeordnete Liste zeigt Punkte
  • Die Beschreibungsliste zeigt Begriffe und Beschreibungen

list-style-type anwenden, um die Listenmarker zu ändern

In diesem Schritt lernen Sie, wie Sie die CSS-Eigenschaft list-style-type verwenden, um das Aussehen von Listenmarkern anzupassen. Mit list-style-type können Sie die Standard-Punkte oder Zahlen in verschiedene vordefinierte Stile umwandeln.

Öffnen Sie die Datei index.html in der WebIDE und fügen Sie einen <style>-Abschnitt im <head> hinzu, um CSS-Regeln zu definieren:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS List Styling</title>
    <style>
      /* Stile für ungeordnete Listen */
      .square-list {
        list-style-type: square;
      }

      .circle-list {
        list-style-type: circle;
      }

      .disc-list {
        list-style-type: disc;
      }

      /* Stile für geordnete Listen */
      .decimal-list {
        list-style-type: decimal;
      }

      .lower-alpha-list {
        list-style-type: lower-alpha;
      }

      .upper-roman-list {
        list-style-type: upper-roman;
      }
    </style>
  </head>
  <body>
    <h1>Beispiele für List Style Type</h1>

    <h2>Stile für ungeordnete Listen</h2>
    <ul class="square-list">
      <li>Quadratische Marker</li>
      <li>Webentwicklung</li>
      <li>Designtechniken</li>
    </ul>

    <ul class="circle-list">
      <li>Kreis-Marker</li>
      <li>Programmierung</li>
      <li>Softwareentwicklung</li>
    </ul>

    <h2>Stile für geordnete Listen</h2>
    <ol class="decimal-list">
      <li>Dezimalzahlen</li>
      <li>Standard-Nummerierung</li>
      <li>Standardstil</li>
    </ol>

    <ol class="lower-alpha-list">
      <li>Kleinbuchstaben</li>
      <li>Alphabetische Anordnung</li>
      <li>a, b, c-Stil</li>
    </ol>

    <ol class="upper-roman-list">
      <li>Großbuchstabe römische Zahlen</li>
      <li>Klassenische Nummerierung</li>
      <li>I, II, III-Stil</li>
    </ol>
  </body>
</html>

Wichtige list-style-type-Werte:

  • Ungordnete Listen: disc (Standard), circle, square
  • Geordnete Listen: decimal, lower-alpha, upper-roman und mehr

Beispielausgabe im Browser:

  • Quadratische Marker für die erste ungeordnete Liste
  • Kreis-Marker für die zweite ungeordnete Liste
  • Dezimalzahlen für die erste geordnete Liste
  • Kleinbuchstaben für die zweite geordnete Liste
  • Großbuchstabe römische Zahlen für die dritte geordnete Liste

list-style-image verwenden, um die Standardmarker zu ersetzen

In diesem Schritt lernen Sie, wie Sie list-style-image verwenden, um die Standard-Listenmarker durch benutzerdefinierte Bilder zu ersetzen. Zunächst müssen Sie einige Beispiel-Icons herunterladen, um als Listenmarker zu verwenden.

Erstellen Sie ein Verzeichnis images in Ihrem Projekt:

cd ~/project/css-list-styling
mkdir images

Laden Sie Beispiel-Icons mit curl herunter:

curl -o images/check-icon.png https://labex.io/courses/icons/check-icon.png
curl -o images/star-icon.png https://labex.io/courses/icons/star-icon.png

Aktualisieren Sie nun Ihre index.html-Datei, um benutzerdefinierte Listenmarkerbilder hinzuzufügen:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS List Styling with Images</title>
    <style>
      .check-list {
        list-style-image: url("images/check-icon.png");
      }

      .star-list {
        list-style-image: url("images/star-icon.png");
      }

      /* Icongröße anpassen, wenn erforderlich */
      .check-list li,
      .star-list li {
        padding-left: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Benutzerdefinierte Listenmarker mit Bildern</h1>

    <h2>Checkliste</h2>
    <ul class="check-list">
      <li>CSS-Tutorial abschließen</li>
      <li>List Styling üben</li>
      <li>Web-Projekt erstellen</li>
    </ul>

    <h2>Lieblings-Themen</h2>
    <ul class="star-list">
      <li>Webentwicklung</li>
      <li>Designprinzipien</li>
      <li>Benutzererfahrung</li>
    </ul>
  </body>
</html>

Wichtige Punkte zu list-style-image:

  • Verwendet url() zum Angabe des Bildpfads
  • Ersetzt die Standard-Listenmarker durch benutzerdefinierte Bilder
  • Funktioniert mit sowohl nummerierten als auch aufzählenden Listen
  • Die Größe des Bildes kann mit CSS-Padding gesteuert werden

Beispielausgabe im Browser:

  • Checkliste mit Check-Icon-Markern
  • Lieblings-Themen-Liste mit Stern-Icon-Markern

list-style-position anpassen für die Markerpositionierung

In diesem Schritt werden Sie die CSS-Eigenschaft list-style-position erkunden, die steuert, wie die Listenmarker relativ zum Listeninhalt positioniert werden. Diese Eigenschaft hat zwei Hauptwerte: outside (Standard) und inside.

Aktualisieren Sie Ihre index.html-Datei, um verschiedene Listenmarkerpositionen zu demonstrieren:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>List Style Position</title>
    <style>
      .outside-list {
        list-style-position: outside;
        background-color: #f0f0f0;
        padding: 10px;
        width: 300px;
      }

      .inside-list {
        list-style-position: inside;
        background-color: #e0e0e0;
        padding: 10px;
        width: 300px;
      }

      /* Einige visuelle Trennung hinzufügen */
      li {
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <h1>List Style Position Demonstration</h1>

    <h2>Außenliegende Listemarken (Standard)</h2>
    <ul class="outside-list">
      <li>Marken außerhalb des Inhaltsbereichs positioniert</li>
      <li>Standard-CSS-Verhalten</li>
      <li>Marken werden links vom Text ausgerichtet</li>
    </ul>

    <h2>Innenliegende Listemarken</h2>
    <ul class="inside-list">
      <li>Marken innerhalb des Inhaltsbereichs positioniert</li>
      <li>Marken sind Teil des Listenelementtexts</li>
      <li>Der Inhalt beginnt unmittelbar nach dem Marker</li>
    </ul>
  </body>
</html>

Wichtige Punkte zu list-style-position:

  • outside: Marker werden außerhalb des Inhaltsbereichs positioniert (Standard)
  • inside: Marker werden innerhalb des Inhaltsbereichs positioniert
  • Beeinflusst das Layout und die Ausrichtung von Listenelementen
  • Nützlich für das Erstellen von kompakten oder visuell unterschiedlichen Listen

Beispielausgabe im Browser:

  • Außenseite der Liste: Marker sind links vom Text
  • Innenseite der Liste: Marker befinden sich im Textbereich
  • Hintergrundfarben helfen, den Unterschied zu visualisieren

Listenstile mit der Kurzschreibweise list-style-Eigenschaft kombinieren

In diesem Schritt lernen Sie, wie Sie die Kurzschreibweise list-style-Eigenschaft verwenden, um mehrere Listenstilattribute in einer einzigen Deklaration zu kombinieren. Mit dieser Eigenschaft können Sie list-style-type, list-style-image und list-style-position in einer Zeile festlegen.

Aktualisieren Sie Ihre index.html-Datei, um die Kurzschreibweise list-style-Eigenschaft zu demonstrieren:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Shorthand List Styles</title>
    <style>
      /* Kurzschreibweise mit Typ und Position */
      .todo-list {
        list-style: square inside;
      }

      /* Kurzschreibweise mit Bild und Position */
      .project-list {
        list-style: inside url("images/star-icon.png");
      }

      /* Vollständige Kurzschreibweise mit Typ, Bild und Position */
      .complete-list {
        list-style: lower-roman inside url("images/check-icon.png");
      }

      /* Zurücksetzen auf den Standard */
      .default-list {
        list-style: initial;
      }

      /* Entfernen des Listenstils */
      .no-style-list {
        list-style: none;
      }

      /* Einige Leerzeichen hinzufügen für die Lesbarkeit */
      li {
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Kurzschreibweise Listenstil Demonstration</h1>

    <h2>Todo-Liste (Quadratmarken)</h2>
    <ul class="todo-list">
      <li>Lernen Sie das CSS-Listenstylen</li>
      <li>Üben Sie die Kurzschreibweise-Eigenschaften</li>
      <li>Erstellen Sie stilvolle Listen</li>
    </ul>

    <h2>Projektliste (Stern-Icons)</h2>
    <ul class="project-list">
      <li>Webentwicklungsprojekt</li>
      <li>Designsystem</li>
      <li>Interaktive Tutorials</li>
    </ul>

    <h2>Fertige Projekte (Check-Icons)</h2>
    <ol class="complete-list">
      <li>CSS-Grundlagen</li>
      <li>Responsive Design</li>
      <li>Fortgeschrittene Styling-Techniken</li>
    </ol>

    <h2>Liste ohne Stil</h2>
    <ul class="no-style-list">
      <li>Listenmarker entfernt</li>
      <li>Reine, ungestylte Liste</li>
      <li>Keine visuellen Indikatoren</li>
    </ul>
  </body>
</html>

Wichtige Punkte zur list-style-Kurzschreibweise:

  • Kombiniert list-style-type, list-style-image und list-style-position
  • Die Reihenfolge spielt für die meisten Werte keine Rolle
  • none entfernt alle Listenstile
  • initial setzt die Standardbrowserstile zurück

Beispiel-Kurzschreibweise-Kombinationen:

  • list-style: square inside;
  • list-style: inside url('image.png');
  • list-style: lower-roman inside url('icon.png');

Zusammenfassung

In diesem Labo erkunden die Teilnehmer CSS-Listenstyling-Techniken, indem sie ein HTML-Projekt mit verschiedenen Listenarten erstellen, darunter nummerierte, aufzählende und Beschreibungslisten. Das Labo führt die Lernenden durch die Anpassung des Listenaussehens mit CSS-Eigenschaften wie list-style-type, list-style-image und list-style-position.

Die praktische Übung zeigt, wie man die Standard-Listenmarker modifiziert, die Standard-Punkte durch benutzerdefinierte Bilder ersetzt und die Markerpositionierung anpasst, und vermittelt praktische Kenntnisse für die Verbesserung der Webseitendesigns und der visuellen Präsentation von Listen mit CSS-Attributen.

Verwandt CSS Kurse
Schnellstart mit CSS

Schnellstart mit CSS

CSS
Anfänger
Entwickeln Sie eine Tic-Tac-Toe-Webanwendung

Entwickeln Sie eine Tic-Tac-Toe-Webanwendung

HTMLCSSJavaScript
Anfänger
Erstellen eines Whack-a-Mole-Webspiels

Erstellen eines Whack-a-Mole-Webspiels

HTMLCSSJavaScript
Anfänger