CSS-Listenmarkierung. Setzen der Listenmarkierung auf verschiedene Arten. Bilder für Listenelemente list-style-image

Die Eigenschaft list-style-position gibt an, ob die Markierung innerhalb oder außerhalb der Listenelemente platziert werden soll. Diese Eigenschaft kann zwei Werte annehmen:

• außen - der Marker wird links vom Inhalt positioniert (ist die Voreinstellung)
• inside - Die Markierung befindet sich zusammen mit dem Inhalt innerhalb des Listenelements

Jetzt können wir das vorherige Beispiel so umschreiben, dass die Polsterung auf der linken Seite entfernt wird, aber die Markierungen nicht über den Rand des Browsers hinausgehen:

• Kaffee
• Tee

• Kaffee
• Tee

• Kaffee
• Tee

In dem Beispiel wurde jedem Listenelement ein Rahmen hinzugefügt, um die Grenzen der Listenelemente visuell darzustellen.

Nachdem die Grundlagen aus dem Weg geräumt sind, werden wir uns nun die Elemente genauer ansehen, die verwendet werden, um den verschiedenen Teilen eines Designs Struktur und Bedeutung zu verleihen. Wenn jemand es nicht weiß, dann sind ul und li eine viel bessere Option als reiner Texttext, denn wenn der Text umbrochen wird, insbesondere in Handy, es ist perfekt eingerückt und wickelt sich nicht um den Marker.

Listen gelten als eine großartige Möglichkeit, Informationen auf Seiten zu präsentieren, da sie leicht zu lesen sind und gut aussehen. Viele Leute scheinen zu denken, dass Aufzählungszeichen kleine Bilder sind, aber tatsächlich werden sie alle durch ziemlich einfachen HTML-Code erstellt. Sie können einfügen verschiedene Typen Listen ineinander übergehen, wenn Sie möchten, denken Sie nur daran, sie richtig zu schließen. Sie können in all diesen Listenbefehlen mit dem gewünschten Text spielen.

Sie müssen auch wissen, dass Listen zunächst mehrere Elemente enthalten:

1 . ungeordnete Informationen.
2 . Bestellte Informationen.
3 . Definitionen.

Beginnen wir mit der Installation:

1. Möglichkeit:

• Listenpunkt


• Einzigartige Liste


• Ursprüngliche Auflistungen


• ZORNET.RU - Webmaster


• Eine andere Liste

(Ksangelopan)
Rand: 19px 0 0;
Polsterung: 0;
Listenstil: keiner;
Zähler zurücksetzen:li;
}
.ksangelopan li (
Rand: 2 Pixel solid #3575ad;
Hintergrund: #d7dee4;
Position: relativ;
Rand unten: 17px;
Polsterung: 15px 9px;
}
.ksangelopan li:hover(
Z-Index: 1;
}
.ksangelopan li:before (
Rand: 2px solide #2270b3;
Position: absolut;
oben: -14px;
Polsterung: 3px 9px;
Schriftgröße: 11px;
Schriftdicke: fett;
Farbe: #246eaf;
Hintergrund: #f2f4f7;
Zählerinkrement: li;
Inhalt: Zähler(li);
-webkit-Übergangsdauer: 0,4s;
Übergangsdauer: 0,4s;
}
.ksangelopan li:schweben:bevor (
Hintergrund: #2672b3;
Farbe: #f7f9fb;
-webkit-transform: translate(-11px, 0);
-ms-transform: translate(-11px, 0);
-o-transformieren: übersetzen (-11px, 0);
transform: translate(-11px, 0);
}
.ksangelopan li:nachher (
Inhalt: "";
Position: absolut;
Übergangsdauer: 0,3s;
-webkit-transition-property: Breite;
Übergangseigenschaft: Breite;
Z-Index: -1;
Hintergrund: #FFF;
Höhe: 100 %;
links: 0;
oben: 0;
Breite: 0;
}
.ksangelopan li:schweben:nachher (
Breite: 100%
}

2 Zweite Möglichkeit:

• Listenpunkt


• Einzigartige Liste


• Ursprüngliche Auflistungen


• ZORNET.RU - Webmaster


• Eine andere Liste

Beleduzlopamges (
Rand unten: 8px;
Polsterung: 0;
Listenstil: keiner;
Zähler zurücksetzen:li;
}
.beleduzlopamges li (
Position: relativ;
Rand: 2px solide #195588;
Hintergrund: #eff3f7;
Polsterung: 15px 19px 15px 27px;
Rand: 12px 0 12px 40px;
-Webkit-Übergangsdauer: 0,3s;
Übergangsdauer: 0,3s;
}
.beleduzlopamges li:hover(
Hintergrund: #FFF;
}
.beleduzlopamges li:before (
Zeilenhöhe: 32px;
Position: absolut;
oben: 4px;
links: -39px;
Breite: 39px
Textausrichtung: Mitte;
Schriftgröße: 16px;
Schriftdicke: fett;
Farbe: #f9f5f5;
Hintergrund: #275b88;
Zählerinkrement: li;
Inhalt: Zähler(li);
Übergangsdauer: 0,2s;
}
.beleduzlopamges li:hover:before (
Breite:46px;
}
.beleduzlopamges li:nachher (
Position: absolut;
links: 0;
oben: 4px;
Inhalt: "";
Höhe: 0;
Breite: 0;
Rand: 16px solide transparent;
Rahmenfarbe links: #275b88;
-webkit-Übergangsdauer: 0,2s;
Übergangsdauer: 0,2s;
}
.beleduzlopamges li:hover:after (
Rand links: 6px;
}

3 Dritte Möglichkeit:

• Skripte für uCoz


• Vorlagen für uCoz


• Website design


• Stile für die Website


• Styling in CSS

Nizualisanelag (
Polsterung: 0;
Listenstil: keiner;
Zähler zurücksetzen:li;
}
.nizualisanelag li(
Position: relativ;
Polsterung: 9px 17px 17px 25px;
Rand links: 39px;
Übergangsdauer: 0,2s;
Cursor: Zeiger;
Schriftdicke: fett;
Farbe: #343638;
}
.nizualisanelag li:before (
Rand: 3px durchgehend transparent;
Zeilenhöhe: 35px;
Position: absolut;
oben: 0;
links:-29px;
Breite: 41 Pixel;
Textausrichtung: Mitte;
Schriftgröße: 14px;
Schriftdicke: fett;
Farbe: #619dce;
Zählerinkrement: li;
Inhalt: Zähler(li);
Übergangsdauer: 0,3s;

Box-Größe: Border-Box;
}
.nizualisanelag li:hover:before (
Farbe: #337AB7;
}
.nizualisanelag li:nachher (
Position: absolut;
oben: 0;
links: -29px;
Breite: 41px
Höhe: 41px;
Rand: 5px solide #468bd0;
Grenzradius: 50%
Inhalt: "";
Deckkraft: 0,5
-Webkit-Box-Größe: Border-Box;
-Moz-Box-Sizing: Border-Box;
Box-Größe: Border-Box;
}
.nizualisanelag li:hover:after (
Animation: 500ms Ease-In-Out 0s BounceIn;
Deckkraft: 1
}

@keyframes BounceIn(
0% {
Deckkraft: 0
transformieren: scale3d(.3, .3, .3);
}
20% {
transformieren: scale3d(1.3, 1.3, 1.3);
}
40% {
transformieren: scale3d(.9, .9, .9);
}
60% {
Deckkraft: 1
transformieren: scale3d(1.03, 1.03, 1.03);
}
80% {
transformieren: scale3d (.97, .97, .97);
}
zu(
Deckkraft: 1
transformieren: scale3d(1, 1, 1);
}
}

4 Vierte Möglichkeit:

• Das erste Element für die Website


• Das zweite Element für die Website


• Das dritte Element für die Website


• Das vierte Element für die Website


• Das fünfte Element für die Website

Polsterung: 0;
Listenstil: keiner;
}
.kudezamuden li(
Polsterung: 6px;
}
.kudezamuden li:before (
Polsterung rechts: 11px;
Schriftdicke: fett;
Farbe: #4979a0;
Inhalt: "\2606";
Übergangsdauer: 0,4s;
}
.kudezamuden li:hover:before (
Farbe: #235e90;
Inhalt: "\2605";
}

Im Allgemeinen ist dies eine kleine Auswahl an Listen, die es dem Webmaster ermöglichen, eine schöne Liste auf dem Portal zu erstellen, in der er selbst mehr ordnen kann, als er es selbst sehen möchte.

Wenn Sie Elemente in eine nummerierte Liste anstatt in eine Liste mit Aufzählungszeichen einfügen müssen, wird hier geordnetes HTML verwendet. Diese Liste wird mit dem ol-Tag erstellt. Die Nummerierung beginnt bei eins und erhöht sich um eins für jedes nachfolgende geordnete Listenelement mit einem li-Tag.

Die Standardansicht von Aufzählungs- und Nummerierungslisten bietet bei weitem nicht alle Möglichkeiten für deren Darstellung. Dank CSS ist es möglich, solche Listen beliebig zu transformieren. Es gibt eine Reihe von Eigenschaften, die verwendet werden können, um den Stil für Listen anzupassen. Im Folgenden betrachten wir jede Eigenschaft separat.

list-style-type: Aufzählungszeichen/Nummernänderung

Wenn Sie die standardmäßigen Punktmarkierungen oder arabischen Ziffern durch etwas anderes ersetzen müssen, können Sie die CSS-Eigenschaft list-style-type und zusätzliche Werte dafür verwenden (siehe Tabelle):

Notiz: die Tabelle zeigt nur die Hauptwerte. Eine umfangreichere Liste (georgische und armenische Numerierung, Numerierung in römischen Zahlen, griechische Buchstaben etc.) ist verfügbar.

Ein Beispiel für das Schreiben von CSS-Code:

Ul ( Listentyp: Kreis; )

Screenshot: Nummerierungsoptionen für Aufzählungszeichen/Listen

List-style-image: Bildmarkierung

Zusätzlich zu den oben genannten Markierungen können Sie Ihre eigenen grafischen Markierungen setzen, indem Sie eine Datei mit dem erforderlichen Bild verwenden. Dazu benötigen Sie die CSS-Eigenschaft list-style-image und einen Wert, der angibt URLs Bilder. Beispiel für die Stileingabe:

Ul ( list-style-image: url(images/star.png); )

Screenshot: Beispiele für benutzerdefinierte Grafikmarkierungen

List-style-position: Position der Aufzählungszeichen/Nummerierung

Die CSS-Eigenschaft list-style-position, die die Position der Aufzählungszeichen/Zahlen relativ zum Text angibt, hat zwei Werte – outside und inside . Der Standardwert ist außen - das bedeutet, dass die Markierung / Zahl wie getrennt vom Text der Liste angezeigt wird, während bei dem Wert innen die Markierung / Zahl innerhalb des Textblocks liegt und um den Text gewickelt wird.

Das Folgende ist ein Beispiel für einen Stileintrag:

Ul ( Listenstil-Position: innen; )

Screenshot zum besseren Verständnis der Bedeutung von außen und innen

Listenstil: alle zusammen

Mit einer einzigen CSS-Eigenschaft im Listenstil können Sie alle oben genannten Elemente in einer Zeile schreiben – das heißt, Sie können sofort die Art der Aufzählungszeichen / Nummerierung und ihre Position relativ zum Text festlegen. Ein solcher Code wird prägnanter und bequemer sein. Nachfolgend zwei Beispiele, wie ein solcher Stil geschrieben wird:

/* Lateinische Nummerierung in Großbuchstaben innerhalb des Textblocks: */ ol ( Listenstil: Großbuchstaben innen; ) /* Grafikmarkierungen außerhalb des Textblocks: */ ul ( Listenstil: url(images/star.png) außen ; )

Dieser Artikel des Tutorials konzentriert sich auf die Arbeit mit Listen in CSS. Sie erfahren, wie Sie den Markierungstyp und die Position der Markierung relativ zum Listenelement ändern, Ihre eigenen Markierungen erstellen und sogar die Farbe der Markierung ändern.

Ich denke, Sie wissen bereits, dass es in HTML 5 zwei Haupttypen von Listen gibt (abgesehen von Beschreibungslisten und Menüelementen):

• nummerierte (geordnete) Liste - HTML-Element
  1. Liste mit Aufzählungszeichen (ungeordnet) - HTML-Element

     CSS gibt uns viele Möglichkeiten, das Erscheinungsbild dieser Listen zu formatieren, schauen wir uns die wichtigsten an.

     Markierungstyp ändern

     Die erste Eigenschaft, die ich betrachten möchte, ist diese Eigenschaft list-style-type , gibt es den Markierungstyp des Listenelements an.

     Navigationsmenüs zum Beispiel bestehen oft aus regulären Aufzählungslisten (HTML element

     ), deren Markierung standardmäßig in Form eines gefüllten Kreises angezeigt wird, müssen Sie verwenden, um sie zu entfernen CSS-Eigenschaft m list-style-type mit dem Wert none :
     Ul( Listenstiltyp : keine ; /* Markierung aus der Liste entfernen */ }

     Für Listen mit Aufzählungszeichen (ungeordnete) (HTML-Element

     ) gibt es drei Arten von Markern: in Form eines gefüllten Kreises (Disc ist der Standardwert), eines Markers in Form eines Hohlkreises (Circle) und in Form eines Quadrats (Quadrat) und für nummerierte ( geordnete) Listen (element
     ) alle verbleibenden Optionen. Die vollständige Liste finden Sie in der folgenden Tabelle:

     Bedeutung	Beschreibung
     keiner Listenpunkt Listenpunkt Listenpunkt	Die Markierung wird nicht angezeigt.
     Rabatt Listenpunkt Listenpunkt Listenpunkt	Markierung in Form eines gefüllten Kreises. Dies ist der Standardwert.
     Armenisch Listenpunkt Listenpunkt Listenpunkt	Numerische Markierung (traditionelle armenische Nummerierung).
     Kreis Listenpunkt Listenpunkt Listenpunkt	Markierung in Form eines Kreises.
     cjk-ideographisch Listenpunkt Listenpunkt Listenpunkt	Einfache ideografische Zahlen.
     Dezimal Listenpunkt Listenpunkt Listenpunkt	Numerischer Marker (arabische Dezimalzahlen beginnend mit 1).
     Dezimal-führende Null Listenpunkt Listenpunkt Listenpunkt	Numerische Markierung (arabische Dezimalzahlen beginnend mit 1 und aufgefüllt mit einer führenden Null - 01, 02, 03...).
     georgisch Listenpunkt Listenpunkt Listenpunkt	Numerische Markierung (traditionelle georgische Nummerierung - an, ban, gan, ..., he, tan, in, in-an ...).
     hebräisch Listenpunkt Listenpunkt Listenpunkt	Numerische Markierung (traditionelle hebräische Nummerierung.).
     Hiragana Listenpunkt Listenpunkt Listenpunkt	Numerischer Marker (japanische Hiragana-Silbenschrift - a, i, u, e, o, ka, ki...).
     Hiragana-Iroha Listenpunkt Listenpunkt Listenpunkt	Numerische Markierung (japanische Silbenschrift Hiragana iroha - i, ro, ha, ni, ho, he, to, ...).
     Katakana Listenpunkt Listenpunkt Listenpunkt	Numerischer Marker (japanische Katakana-Silbenschrift - A, I, U, E, O, KA, KI, ...).
     katakana-iroha Listenpunkt Listenpunkt Listenpunkt	Zahlenmarker (japanische Silbenschrift Katakana iroha - I, RO, HA, NI, HO, HE, TO, ...).
     niedrigeres Alpha Listenpunkt Listenpunkt Listenpunkt	ASCII-Kleinbuchstaben (a, b, c, d...z).
     Niedergriechisch Listenpunkt Listenpunkt Listenpunkt	Griechische Kleinbuchstaben (α, β, γ, δ usw.).
     Niederes Latein Listenpunkt Listenpunkt Listenpunkt	Lateinische Kleinbuchstaben (a, b, c, d, ... z).
     niederrömisch Listenpunkt Listenpunkt Listenpunkt	Römische Ziffern in Kleinbuchstaben (i, ii, iii, iv, v usw.).
     Quadrat Listenpunkt Listenpunkt Listenpunkt	Quadratische Markierung.
     oberes Alpha Listenpunkt Listenpunkt Listenpunkt	ASCII-Großbuchstaben (A, B, C, D, ... Z).
     Oberlateinisch Listenpunkt Listenpunkt Listenpunkt	Lateinische Großbuchstaben (A, B, C, D, ... Z).
     Oberröm Listenpunkt Listenpunkt Listenpunkt	Römische Ziffern in Großbuchstaben (I, II, III, IV, V usw.).

     Bitte beachten Sie, dass die Werte hebrew , cjk-ideographic , hiragana , hiragana-iroha , katakana , katakana-iroha vom Browser nicht unterstützt werden Internet Explorer .

     Sehen wir uns ein Beispiel für die Verwendung der list-style-type-Eigenschaft in Text an:

     /* Liste mit Standard-Markertypwert (Disc). */
     • Listenpunkt
     • Listenpunkt
     • Listenpunkt
     /* nummerierte Liste mit Markierungstyp niederrömisch */
     1. Listenpunkt
     2. Listenpunkt
     3. Listenpunkt
     /* Aufzählungsliste mit Markierungstyp Kreis */
     • Listenpunkt
     • Listenpunkt
     • Listenpunkt

     In diesem Beispiel haben wir zwei Stile erstellt, der erste setzt den Aufzählungszeichentyp auf römische Ziffern in Kleinbuchstaben (Wert Lower-Roman ), wir haben ihn auf die nummerierte Liste angewendet (HTML-Element

     ), sondern in eine Liste mit Aufzählungszeichen (HTML-Element
     ) haben wir einen Stil angewendet, der den Markierungstyp auf Hohlkreis setzt (der Wert ist Kreis ).

     Das Ergebnis unseres Beispiels:

     Ich mache Sie darauf aufmerksam, dass Sie die Eigenschaft list-style-type auch auf ein einzelnes Listenelement (HTML-Element

     • ), um einen benutzerdefinierten Markierungstyp festzulegen oder Stile zu erstellen, die eine bestimmte Markierung auf gerade oder ungerade Listenelemente anwenden, wie im folgenden Beispiel gezeigt:
       • Listenpunkt
       • Listenpunkt
       • Listenpunkt
       • Listenpunkt
       • Listenpunkt
       • Listenpunkt
       • Listenpunkt
       • Listenpunkt

       In diesem Beispiel haben wir alles gestaltet seltsam Listenelemente - angegebener Markierungstyp Quadrat, und die Farbe des Textes wird angegeben grün. Selbst Die Listenelemente erhalten den folgenden Stil: rot Textfarbe u Abwesenheit Marker.

       Das Ergebnis unseres Beispiels:

       Markierungsposition relativ zum Listenelement

       Das Ergebnis unseres Beispiels:

       Reis. 71 Ein Beispiel für die Verwendung der List-Style-Position-Eigenschaft (Position eines Markers / einer Nummer in Listen).

       Erstellen Sie Ihre eigenen Markierungen

       Früher oder später müssen Sie Listenmarkierungen mit Ihrem eigenen Design erstellen, dank der CSS-Eigenschaft list-style-image können wir diesen Wunsch in Ihrem Projekt umsetzen.

       Die Eigenschaftssyntax lautet wie folgt:

       ol( list-style-image : url("images/primer.png") ; /* setze den relativen Pfad zum Bild */ } Ul( list-style-image : ; /* den absoluten Pfad zum Bild angeben */ }

       Der Wert in Klammern entspricht dem Pfad zu dem Bild, das Sie als Markierung verwenden möchten. Der Pfad zum Bild kann entweder absolut oder relativ sein. Bei der Angabe eines relativen Pfads ist der wichtige Punkt, dass es sich um einen muss relativ zur Platzierung des Stylesheets angegeben werden, nicht zur Seite.

       Wenn Sie Ihre eigenen Marker entwerfen möchten, müssen Sie ein Grafikbearbeitungsprogramm verwenden oder fertige Sets verwenden. Achten Sie auf einen solchen Moment, der passieren kann, auch wenn Sie alles richtig gemacht haben. Das Bild wird möglicherweise nicht auf die Seite geladen. In diesem Fall müssen Sie das Bild so bearbeiten, dass sein Hintergrund transparent wird.

       Sehen wir uns ein Beispiel für die Verwendung benutzerdefinierter Markierungen in einem Dokument an:

       .Prüfung( list-style-image : URL ("http://site/images/mini5.png"); /* Geben Sie den absoluten Pfad zu dem Bild an, das als Markierung verwendet wird */ }
       • Listenpunkt
       • Listenpunkt
       • Listenpunkt

       In diesem Beispiel geben wir an absoluter Pfad zu dem Bild, das als Markierung verwendet werden soll.

       Das Ergebnis unseres Beispiels:

       Markierungsfarbe in CSS ändern

       Sehen wir uns am Ende dieses Artikels eine fortgeschrittene Möglichkeit an, die Farbe der Markierung zu ändern, ohne die Farbe des Elements zu ändern, mit mit CSS die Inhaltseigenschaft und das zuvor besprochene :before-Pseudoelement:

       • Listenpunkt
       • Listenpunkt
       • Listenpunkt

       Das Wesentliche dieser Methode ist, dass wir uns vor jedem Element der Liste befinden (HTML-Element

     • ) Pseudo-Element (:before) generierten Inhalt (CSS-Eigenschaft Inhalt) einfügen, der identisch ist mit das Auftreten Markierung in einer Aufzählungsliste (HTML-Element
       ), nur die Farbe, die für unsere Aufgabe bereits notwendig ist.

       Ich mache Sie darauf aufmerksam, dass in diesem Beispiel die Eigenschaft padding-right verwendet wurde, die es uns ermöglichte, in jedem Listenelement (HTML-Element

       • ). Wenn diese Eigenschaft in diesem Fall nicht verwendet wird, befindet sich der Marker in unmittelbarer Nähe zum Text, was optisch unschön ist. Das Arbeiten mit internen und externen Einzügen von Elementen wird im nächsten Artikel des Tutorials "" ausführlich behandelt.

         Fragen und Aufgaben zum Thema

         Bevor Sie zum nächsten Thema übergehen, gehen Sie die praktischen Aufgaben durch:

         
         

         Wenn Sie Schwierigkeiten haben, dies zu tun praktische Aufgabe, Sie können das Beispiel jederzeit in öffnen separates Fenster und überprüfen Sie die Seite, um zu sehen, welches CSS verwendet wurde.

         2016-2019 Denis Bolshakov, Sie können Kommentare und Vorschläge auf der Website an [email protected] senden