CSS -Listenstiltyp

Ein Kaskadenstilblatt enthält das Codestück, das für das Hinzufügen der Effekte und Eigenschaften zu dem von HTML entwickelten Inhalt verantwortlich ist. Sowohl HTML als auch CSS werden verwendet, um eine statische Webseite oder eine dynamische Website zu erstellen. CSS enthält mehrere Effekte, eine davon ist eine Style -Eigenschaft, die auf die Liste der HTML angewendet wird. Diese Eigenschaft soll die Listenelemente verbessern, dh höchstwahrscheinlich Text, indem die Auswirkungen auf die Kugeln hinzugefügt werden. In unserer Diskussion geht es heute um den Stiltyp der Liste. In dem Artikel erwähnen wir einige Beispiele, um die Kugeln der Liste einzigartig zu stylen.

Ein HTML -Code enthält zwei grundlegende Teile: und . Der Kopfteil enthält das Titel -Tag und das Tag, wenn wir ein internes CSS verwenden. Das Tag enthält die Tags aller Inhalte, die wir auf der Webseite erstellen möchten. Das Listen -Tag ist auch im Body -Tag geschrieben.

In ähnlicher Weise wird der CSS -Code als Inline-, interne und externe CSS eingestuft. Der Effekt, der mit dem Tag im Inhalts -Tag geschrieben wurde, ist das Inline -CSS. Der interne CSS ist der interne CSS, der im HTML -Kopfabschnitt geschrieben ist. Und der dritte, das externe CSS, wird in der Datei eines anderen Texteditors mit einem "deklariert".CSS ”Erweiterung.

Was ist eine HTML -Liste?

Hypertext Markup Sprache Erstellt Inhalte, um eine Website mit Text, Bildern, Tabellen, Formen, Absätzen usw. zu bilden. Der Text ist der Baustein einer beliebigen Website. Dies kann auf verschiedene Weise geschrieben werden und ein Ansatz ist die HTML -Liste "Liste". Die Liste ist die vertikale Demonstration eines Textes zusammen mit oder ohne Kugeln. Die HTML -Liste wird einfach genauso angezeigt, wie wir eine manuelle Liste erstellen. Eine Liste ist in weitere Kategorien unterteilt. Wenn der Text mit Zahlen dargestellt wird, erfolgt er durch eine geordnete Liste

. Wenn die Darstellung durch ein Symbol oder eine Form erfolgt, handelt es sich um eine ungeordnete Liste
. Die Syntax, mit der eine Liste erstellt wird, wird wie folgt erwähnt:


• Gegenstand 1


• Item2



Die ungeordnete Listensyntax ist im vorherigen Beispiel angegeben. Die ersten Eröffnungs- und Schließungs -Tags für die Liste werden deklariert. Diese äußeren Tags entscheiden, ob die Liste bestellt oder ungeordnet ist. In beiden Tags die Tags, die

• Tag wird verwendet, um die Elementnamen hinzuzufügen, die wir Teil der Liste sein möchten.

  Listenstil -Eigenschaft auflisten

  Die CSS -Listenstil -Eigenschaft sind die Effekte, die auf die List -Kugeln angewendet werden. Es gibt verschiedene Arten von Stileigenschaften von Listen. Einige von ihnen werden hier erklärt. Die grundlegende Syntax ist geschrieben als:

  Lassen Sie uns die Arbeit dieser Eigenschaft implementieren und erklären.

  Listenstiltyp für ungeordnete Liste

  Erstens wenden wir einige Effekte auf die Kugeln der ungeordneten Liste an. Diese Kugeln sind Symbole und Formen. Zum Beispiel Kreise, Quadrate, Discs usw.

  Eigenschaftswert: Disc

  Wir erstellen eine einfache Webseite, auf der eine Überschrift im Körperteil angegeben ist. Wir verwenden ein Absatz -Tag, um einen Text zu schreiben. Dann wird eine ungeordnete Liste erstellt, wie wir zuvor beschrieben haben. Die gleiche Syntax folgt. In der

  Tag, wir deklarieren den Klassennamen, der dem internen CSS gehört. Alle Effekte, die in der Klasse erwähnt werden, werden hier auf diese Liste angewendet:

  Innerhalb des Tags werden drei Elemente der Liste deklariert. Schließen Sie die Liste und das äußere Tag. Das ist alles aus dem Körperabschnitt des HTML -Code.

  Jetzt führen wir zum Kopfabschnitt. Im Kopf geben wir der Seite einen Titel. Dann wird das interne CSS -Style -Tag deklariert. Im Inneren wird eine „Sub“ -Klasse, der Name, der in dem ungeordneten Listen -Tag verwendet wird, deklariert. Alle Effekte werden in dieser Klasse angewendet.

  Die IDs und Klassen werden erstellt, um die Auswirkungen gemeinsam zu verwenden, die Sie anwenden möchten. Verwenden Sie dann diese Namen in den Tags, an denen wir diese Effekte anwenden möchten.

  .sub
  Listenstil-Typ: Disc;
  

  Der hier verwendete Listenstil ist eine CD. Wenn wir diese Eigenschaft in der Listenerstellung nicht verwenden, sind die gebildeten Standard-Kugeln disköse.

  Weitere Effekte sind in der Überschrift. Die Schriftfarbe wird der Überschrift hinzugefügt. Zusätzlich zum Körper werden die Hintergrundfarbe und die Schriftfarbe angewendet.

  Speichern Sie den Code im Texteditor mit einer HTML -Erweiterung, um eine Webseite zu erstellen, die im Browser ausgeführt werden soll. Durch die Verwendung dieser Erweiterung werden Sie feststellen, dass das Symbol der von Ihnen gespeicherten Textdatei in das Symbol des Browsers geändert wird. Es ist der Hinweis darauf, dass dies eine Webseite ist.

  In der Ausführung sehen Sie, dass die erstellte Webseite die Liste der Namen der Probanden enthält und diese Elemente über die CD -Kugeln deklariert werden.

  Eigenschaftswert: Kreis

  Nachdem wir den Standardwert des Standard -CD -Kugelwerts verwendet haben, verwenden wir eine andere Form, um eine ungeordnete Liste zu stylen. Diesmal enthält die Style -Eigenschaft die Klasse mit dem Listenstiltyp des Kreises. Während der Rest des Codes, ob der Kopfabschnitt oder der Körperabschnitt, gleich ist, ist dieselbe. Nehmen Sie nur Änderungen im Stiltyp vor, um zu sehen, dass die Effekte funktionieren.

  Listenstil-Typ: Kreis;

  CSS -Code:	Ausgang:

  Schließen Sie das Style -Tag und führen Sie den Code im Browser aus. Sie werden sehen, dass die gefüllten Disc-Kugeln durch die kreisförmigen Kugeln ersetzt werden.

  Listenstiltyp für die bestellte Liste auflisten

  Jetzt verwenden wir die numerischen und alphabetischen Werte, um die Auswirkungen auf die Kugeln der geordneten Liste anzuwenden.

  Eigenschaftswert: Dezimal

  In Bezug auf die erstellte Liste verwenden wir einen numerischen Wert. Der, der normalerweise in der manuellen Zählung oder Nummerierung verwendet wird, ist die Dezimalnotation. Wir werden zuerst die Dezimalzahlen entscheiden. Der gesamte HTML -Code ist der gleiche und der CSS -Code wird nur durch den Aufzählungsnamen unterhalten, der als „dezimal“ bezeichnet wird. Der in der CSS -Klasse erwähnte Listenstil -Typeffekt ist die Dezimalzahlung.

  Listenstil-Typ: Dezimal;

  CSS -Code	Ausgang:

  Bei der Ausführung sehen Sie, dass die Kugeln von einem Kreis zu den Dezimalzahlen geändert werden.

  Eigenschaftswert: niedrigerer Griechler
  Die Listenstil-Eigenschaft wird in niedrigerer Griechler benannt, um diesen Effekt anzuwenden und die Listenstileigenschaft der Liste zu ändern.

  CSS -Code	Ausgang:

  Eigenschaftswert: Keine

  Wir können die Listenkugeln auch ausblenden, indem wir die Schlüsselwörter "None" in der Eigenschaft zum Typ Listenstil verwenden.

  CSS -Code	Ausgang

  Immobilienwert: Georgisch

  Das letzte, aber nicht zuletzt, der verwendete Wert ist der „georgische“ Wert, der den Kugeln der Liste hinzugefügt wird.

  CSS -Code	Ausgang

  Abschluss

  CSS List Style -Eigenschaft ist der Effekt, der auf den Kugeln der Liste angewendet wird, ob die Liste bestellt oder nicht ordnungsgemäß ist. Wir haben mit einer einfachen Einführung sowohl HTML- als auch CSS -Sprachen einschließlich ihrer Tags -Erklärung begonnen. Dann haben wir die Struktur von HTML -Listen zusammen mit ihren Typen ausgearbeitet. Die Listenstil -Eigenschaft ist ausgearbeitet und wir haben einige Stile implementiert, um zu sehen, wie diese Eigenschaft funktioniert. Wir haben einige Beispiele sowohl für die geordneten als auch für ungeordnete Listen getrennt verwendet.