So legen Sie Listenstilattribute in CSS fest (lesen Sie einfach diesen Artikel)

So legen Sie Listenstilattribute in CSS fest (lesen Sie einfach diesen Artikel)

Eigenschaften des Listenstils

  • Es gibt 2 Arten von Listen in HTML : ungeordnete Listen und geordnete Listen. Ungeordnete Listen werden in der Arbeit häufiger verwendet. Eine ungeordnete Liste ist eine Kombination aus ul Tag und dem li Tag. Was ist also eine geordnete Liste? Die Kombination aus dem ol Tag und dem li -Tag wird als geordnete Liste bezeichnet. Die Grundkenntnisse der Liste werden kurz erläutert. In diesem Kapitel wird hauptsächlich erläutert, wie der Stil der Liste festgelegt wird. Wenn es Freunde gibt, die nicht wissen, was eine Liste ist, empfehle ich Ihnen, die offizielle Website von W3school zu besuchen, um es zu lernen.
  • Es gibt vier häufig verwendete Listenstilattribute: list-style-type , list-style-position , list-style-image und list-style . Hier erklären wir einfach die häufig verwendeten Attributnamen der Liste. Die spezifische Verwendung oder Einführung jedes Attributwerts wird unten ausführlich beschrieben. Freunde, die gerne lernen, müssen sich keine Sorgen machen.

Attribut „Listenstiltyp“

  • Die Funktion des Attributs „list-style-type“ besteht darin, die Art des Aufzählungszeichens vor der Liste festzulegen.
  • Beschreibungstabelle für Attributwerte im Listenstiltyp.

Eigenschaftswert beschreiben
keiner Entfernen Sie den Aufzählungspunkt am Anfang der Liste.
Scheibe Legt den ersten Aufzählungspunkt der Liste als ausgefüllten Kreis fest.
Kreis Legt den Listenkopfzeilenpunkt als leeren Kreis fest.
Quadrat Legt den Aufzählungspunkt am Anfang der Liste als ausgefülltes Quadrat fest.

Der Attributwert ist keiner.

  • Kommen wir nun zum Attributwert list-style-type von none . Der Übungsinhalt lautet wie folgt: Verwenden Sie class .box , um den Aufzählungspunkt vor der Liste zu entfernen.
  • Bevor wir üben list-style-type auf none zu setzen, schauen wir uns an, was der Aufzählungspunkt vor der Liste ist, damit Anfänger einen intuitiven Eindruck bekommen.

Codeblöcke

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <title>Der Listenattributwert „list-style-type“ ist nicht praktikabel</title>
</Kopf>
  
<Text>
    <ul>
        <li>Beim Erfolg geht es nicht darum, andere zu besiegen, sondern sich selbst zu verändern. </li>
        <li>Beim Erfolg geht es nicht darum, andere zu besiegen, sondern sich selbst zu verändern. </li>
        <li>Beim Erfolg geht es nicht darum, andere zu besiegen, sondern sich selbst zu verändern. </li>
    </ul>
</body>
</html>

Ergebnisdiagramm

Nachdem Sie nun wissen, was ein Aufzählungspunkt ist, beginnen wir damit, list-style-type none zu setzen.

Codeblöcke

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <title>Der Listenattributwert „list-style-type“ ist nicht praktikabel</title>
    <Stil>
        .Kasten{
            Listenstiltyp: keiner;
        }
    </Stil>
</Kopf>
  
<Text>
    <ul Klasse="Box">
        <li>Beim Erfolg geht es nicht darum, andere zu besiegen, sondern sich selbst zu verändern. </li>
        <li>Beim Erfolg geht es nicht darum, andere zu besiegen, sondern sich selbst zu verändern. </li>
        <li>Beim Erfolg geht es nicht darum, andere zu besiegen, sondern sich selbst zu verändern. </li>
    </ul>
</body>
</html>

Ergebnisdiagramm

Da Sie dies sehen können, bedeutet das, dass Sie es gemeistert haben. list-style-type der Liste ist none . Herzlichen Glückwunsch.

Der Attributwert ist die Datenträgernutzung

Hier erklären wir, dass list-style-type der Liste disc ist. Der Standardwert des Attributs list-style-type der Liste ist disc . Wenn Sie ein sorgfältiger Gärtner sind, haben Sie das bereits entdeckt. Oben gibt es fertige Beispiele, deshalb werde ich sie hier nicht im Detail vorstellen. Dieser Attributwert ist disc und wird übersprungen.

Verwendung des Attributwertkreises

Tragen wir den Attributwert list-style-type der Liste als circle ein, der Übungsinhalt lautet: Setzen Sie den Aufzählungspunkt am Anfang der Liste auf einen hohlen Kreis.

Codeblöcke

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <title>Der Wert des Listenstil-Attributs der Liste lautet „Kreispraxis“</title>
    <Stil>
        .Kasten{
            Listenstiltyp: Kreis;
        }
    </Stil>
</Kopf>
  
<Text>
    <ul Klasse="Box">
        <li>Beim Erfolg geht es nicht darum, andere zu besiegen, sondern sich selbst zu verändern. </li>
        <li>Beim Erfolg geht es nicht darum, andere zu besiegen, sondern sich selbst zu verändern. </li>
        <li>Beim Erfolg geht es nicht darum, andere zu besiegen, sondern sich selbst zu verändern. </li>
    </ul>
</body>
</html>

Ergebnisdiagramm

Der Attributwert ist quadratisch.

Lassen Sie uns list-style-type in der Praxis in square eingeben, indem wir beispielsweise den Aufzählungspunkt am Anfang der Liste auf ein ausgefülltes Quadrat setzen.

Codeblöcke

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <title>Der Attributwert des Listenstiltyps der Liste ist quadratische Praxis</title>
    <Stil>
        .Kasten{
            Listenstiltyp: Quadrat;
        }
    </Stil>
</Kopf>
  
<Text>
    <ul Klasse="Box">
        <li>Beim Erfolg geht es nicht darum, andere zu besiegen, sondern sich selbst zu verändern. </li>
        <li>Beim Erfolg geht es nicht darum, andere zu besiegen, sondern sich selbst zu verändern. </li>
        <li>Beim Erfolg geht es nicht darum, andere zu besiegen, sondern sich selbst zu verändern. </li>
    </ul>
</body>
</html>

Ergebnisdiagramm

Eigenschaft „List-Style-Position“

list-style-position wird verwendet, um die Position des Aufzählungszeichens vor der Liste festzulegen. list-style-position hat zwei Attributwerte: outside und inside . Genauere Beschreibungen finden Sie in der Tabelle mit den Attributwertbeschreibungen weiter unten.

list-style-position Eigenschaftswert Beschreibung Tabelle

Eigenschaftswert beschreiben
draußen Setzt den vorderen Aufzählungspunkt der Liste nach außen.
innen Setzen Sie den vorderen Listenpunkt hinein.

Der Attributwert liegt außerhalb.

  • Bevor wir list-style-position von outside üben, werfen wir einen Blick auf die Standardposition des Aufzählungspunkts vor der Liste. Um Anfängern einen intuitiven Eindruck zu vermitteln, legt der Autor einige Stile für die ul Tags und li Tags auf der HTML Seite fest.
  • ul -Tag-Stil ist wie folgt: width Breite ist auf 300px Pixel eingestellt, height Höhe beträgt 150px Pixel, border ist ( 1px Pixel, als durchgezogene Linie angezeigt, die Rahmenfarbe ist blau), Stil.
  • Das li Tag im ul Tag legt den Stil wie folgt fest: width Breite wird auf 280px Pixel festgelegt, height auf 30px Pixel, line-height Zeilenhöhe auf 30px Pixel, border auf ( 1px Pixel, als durchgezogene Linie angezeigt, die Rahmenfarbe ist rot) und der Stil.
  • Wenn Sie nicht über das Wissen über border verfügen, müssen Sie sich in Zukunft keine Sorgen mehr machen, Artikel über border zu schreiben, wenn Sie gerne lernen. Wenn Sie etwas über border lernen möchten, können Sie zum Lernen die offizielle Website von W3school besuchen.

Codeblöcke

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <title>Verwendung des Attributwertes liegt außerhalb</title>
    <Stil>
        ul {
            Breite: 300px;
            Höhe: 150px;
            Rand: 1px durchgezogen #00F;
        }
         ul li {
          
            Breite: 280px;
            Höhe: 30px;
            Zeilenhöhe: 30px;
            Rand: 1px durchgehend rot;
        }
 
    </Stil>
</Kopf>
  
<Text>
    <ul>
        <li>Beim Erfolg geht es nicht darum, andere zu besiegen, sondern sich selbst zu verändern. </li>
        <li>Beim Erfolg geht es nicht darum, andere zu besiegen, sondern sich selbst zu verändern. </li>
        <li>Beim Erfolg geht es nicht darum, andere zu besiegen, sondern sich selbst zu verändern. </li>
    </ul>
   
</body>
</html>

Ergebnisdiagramm

Jetzt sollte deutlich zu erkennen sein, dass der Aufzählungspunkt vor der Liste standardmäßig zwischen ul Tag und li Tag positioniert ist. Nachdem wir nun die Standardposition des Aufzählungspunkts vor der Liste kennen, üben wir, list-style-position auf outside zu setzen. Übungsinhalt: Setzen Sie den Aufzählungspunkt vor der Liste in HTML Seite nach „outside“.

Codeblöcke

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <title>Verwendung des Attributwertes liegt außerhalb</title>
    <Stil>
        ul {
            Breite: 300px;
            Höhe: 150px;
            Rand: 1px durchgezogen #00F;
        }
         ul li {
          
            Breite: 280px;
            Höhe: 30px;
            Zeilenhöhe: 30px;
            Rand: 1px durchgehend rot;
            Listenstil-Position: außerhalb;
        }
 
    </Stil>
</Kopf>
  
<Text>
    <ul>
        <li>Beim Erfolg geht es nicht darum, andere zu besiegen, sondern sich selbst zu verändern. </li>
        <li>Beim Erfolg geht es nicht darum, andere zu besiegen, sondern sich selbst zu verändern. </li>
        <li>Beim Erfolg geht es nicht darum, andere zu besiegen, sondern sich selbst zu verändern. </li>
    </ul>
   
</body>
</html>

Ergebnisdiagramm

Hinweis: Warum hat sich das laufende Ergebnis nicht geändert, nachdem list-style-position auf outside gesetzt wurde? Weil der Aufzählungspunkt vor der Liste standardmäßig „außen“ steht und die Position außerhalb des Aufzählungspunkts vor der Liste zwischen ul Tag und li Tag liegt.

Der Attributwert befindet sich darin.

  1. Durch die Einführung list-style-position als outside kennt jeder bereits die Position außerhalb des Aufzählungspunkts vor der Liste. Als Nächstes setzen wir den Aufzählungspunkt vor der Liste auf „inside“.
  2. Lassen Sie uns in der Praxis list-style-position auf inside setzen und die Position des Aufzählungspunkts am Anfang der Liste auf „innen“ festlegen.

Codeblöcke

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <title>Attributwert liegt innerhalb der Verwendung</title>
    <Stil>
        ul {
            Breite: 300px;
            Höhe: 150px;
            Rand: 1px durchgezogen #00F;
        }
         ul li {
          
            Breite: 280px;
            Höhe: 30px;
            Zeilenhöhe: 30px;
            Rand: 1px durchgehend rot;
            Listenstil-Position: innen;
        }
 
    </Stil>
</Kopf>
  
<Text>
    <ul>
        <li>Beim Erfolg geht es nicht darum, andere zu besiegen, sondern sich selbst zu verändern. </li>
        <li>Beim Erfolg geht es nicht darum, andere zu besiegen, sondern sich selbst zu verändern. </li>
        <li>Beim Erfolg geht es nicht darum, andere zu besiegen, sondern sich selbst zu verändern. </li>
    </ul>
   
</body>
</html>

Ergebnisdiagramm

Hinweis: list-style-position lautet inside , wodurch die Position des Aufzählungspunkts vor der Liste auf das Tag li festgelegt wird, das die Position „inside“ darstellt.

list-style-image-Eigenschaft

Die Funktion des Attributs list-style-image besteht darin, den Aufzählungspunkt vor der Liste auf ein Bild zu setzen.

list-style-image Eigenschaft Beschreibung Tabelle

Attributwertname beschreiben
URL (URL) Legt den Pfad zum Bild des Aufzählungszeichens am Anfang der Liste fest

Kommen wir nun zur Praxis list-style-image Attributs. Der Übungsinhalt besteht darin, den Aufzählungspunkt am Anfang der Liste durch ein Bild zu ersetzen.

Codeblöcke

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <title>Verwenden des List-Style-Image-Attributs</title>
    <Stil>
        ul {
            Breite: 300px;
            Höhe: 150px;
            Rand: 1px durchgezogen #00F;
        }
         ul li {
          
            Breite: 280px;
            Höhe: 30px;
            Zeilenhöhe: 30px;
            Rand: 1px durchgehend rot;
            Listenstil-Bild: URL (./img/001.png);
        }
 
    </Stil>
</Kopf>
  
<Text>
    <ul>
        <li>Beim Erfolg geht es nicht darum, andere zu besiegen, sondern sich selbst zu verändern. </li>
        <li>Beim Erfolg geht es nicht darum, andere zu besiegen, sondern sich selbst zu verändern. </li>
        <li>Beim Erfolg geht es nicht darum, andere zu besiegen, sondern sich selbst zu verändern. </li>
    </ul>
   
</body>
</html>

Ergebnisdiagramm

Hinweis: Der Bildpfad muss in die Klammern url(./img/001.png); sonst wird er nicht gerendert. Der Bildpfad kann ein relativer oder ein absoluter Pfad sein.

Listenstil-Attribut

list-style ist ein Kurzattribut von (Attribut list-style-type , Attribut list-style-position , Attribut list-style-image ), das die Funktionen von (Attribut list-style-type , Attribut list-style-position , Attribut list-style-image “) integriert.

Lassen Sie uns mit list-style beginnen. Nachdem Sie dies gesehen haben, gehe ich davon aus, dass Sie den Inhalt dieses Kapitels bereits beherrschen.

Codeblöcke

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <title>Verwenden eines Listenstil-Attributs</title>
    <Stil>
        ul {
            Breite: 300px;
            Höhe: 150px;
            Rand: 1px durchgezogen #00F;
        }
         ul li {
          
            Breite: 290px;
            Höhe: 30px;
            Zeilenhöhe: 30px;
            Rand: 1px durchgehend rot;
            Listenstil: keines in der URL (./img/001.png);
        }
 
    </Stil>
</Kopf>
  
<Text>
    <ul>
        <li>Beim Erfolg geht es nicht darum, andere zu besiegen, sondern sich selbst zu verändern. </li>
        <li>Beim Erfolg geht es nicht darum, andere zu besiegen, sondern sich selbst zu verändern. </li>
        <li>Beim Erfolg geht es nicht darum, andere zu besiegen, sondern sich selbst zu verändern. </li>
    </ul>
   
</body>
</html>

Ergebnisdiagramm

Hinweis: list-style kann 1 , 2 oder 3 sein. Es gibt keine Anforderung für die Reihenfolge. Wenn Sie es nicht verstehen, können Sie es mit einem Beispiel versuchen. Um zu lernen, müssen Sie mehr ausprobieren und dürfen nicht faul sein.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

<<:  So benennen Sie die Tabelle in MySQL um und worauf Sie achten müssen

>>:  Inspirierende Designbeispiele für glänzendes und schimmerndes Website-Design

Artikel empfehlen

Detaillierte Erklärung von :key in VUE v-for

Wenn der Schlüssel nicht zum v-for-Tag hinzugefüg...

Beispiel einer Nginx-Standortübereinstimmungsregel

1. Grammatik Standort [=|~|~*|^~|@] /uri/ { ... }...

Detaillierte Erklärung der Beziehung zwischen React und Redux

Inhaltsverzeichnis 1. Die Beziehung zwischen Redu...

JavaScript zur Implementierung eines Sprachwarteschlangensystems

Inhaltsverzeichnis einführen Hauptmerkmale Effekt...

Grafisches Tutorial zur Installation und Konfiguration von mysql5.7.19 winx64 (win10)

Das Installationstutorial für MySQL 5.7.19 Winx64...

Detaillierte Erklärung häufig verwendeter Stile in CSS3 [Grundlegende Text- und Schriftstile]

Zusammenfassung: Damit Ihre Webseite schöner auss...

Detailliertes Tutorial zum Bereitstellen einer benutzerdefinierten Apollo-Umgebung mit Docker-Compose

Inhaltsverzeichnis Was ist das Apollo Configurati...

favico.ico --- Schritte zum Einrichten des Website-ICO-Symbols

1. Laden Sie die erfolgreich generierte Symboldate...

So sichern Sie das Skript für Linux-Server automatisch (MySQL, Sicherung von Anhängen)

1. Erstellen Sie die Skriptdatei backup.sh #!/bin...

So starten Sie die RabbitMq-Software automatisch, wenn CentOS gestartet wird

1. Erstellen Sie ein neues Rabbitmq im Verzeichni...

Ausführliche Erläuterung der HTML-Grundlagen (Teil 1)

1. Das WEB verstehen Webseiten bestehen hauptsäch...

Docker-Verbindung – MongoDB-Implementierungsprozess und Codebeispiele

Nachdem der Container gestartet wurde Melden Sie ...

Fallstudie zu JavaScript Anti-Shake

Prinzip Das Prinzip von Anti-Shake ist: Du kannst...

Detaillierte Erklärung der RPM-Installation in MySQL

Installation und Deinstallation anzeigen # rpm -q...

CSS3-Implementierungscode für einfaches Karussellbildschneiden

Umsetzungsideen Erstellen Sie zunächst einen über...