Hallo, liebe Leser der Blogseite. Heute gibt es einen weiteren Artikel im Sparschwein. Der Schwerpunkt liegt auf dem Design unter Verwendung der Regeln kaskadierender Stylesheets. Hier ist alles sehr einfach, dennoch habe ich beschlossen, diesem Thema einen eigenen Beitrag zu widmen.
Etwas früher haben wir bereits herausgefunden, wie, wie und wie man damit arbeiten kann. Nun, etwas früher haben wir uns alle Arten und ihre verschiedenen Kombinationen im Detail angesehen, um genau das HTML-Codeelement anzugeben, für das bestimmte Stileigenschaften angewendet werden müssen.
Listenstil – Gestaltung von Listen im HTML-Code
In der Style-Markup-Sprache gibt es also drei separate Regeln, beginnend mit list-style, die der Konfiguration dienen Aussehen Listen (nummeriert oder mit Aufzählungszeichen) im Code von Webdokumenten. Darüber hinaus gibt es eine vorgefertigte CSS-Regel im Listenstil, mit der Sie den Codeumfang etwas reduzieren können. Aber das Wichtigste zuerst.
Was wir jetzt betrachten, kann sowohl für HTML-LI-Elemente als auch für Ul- und Ol-Elemente (Bullet- bzw. Nummerierungslisten) verwendet werden. Was ist der Unterschied zwischen der Verwendung des Listenstils für diese Tags?
Ob eine Eigenschaft vererbt wird oder nicht, können Sie tatsächlich auf der Website des Validators (lesen Sie mehr darüber unter dem bereitgestellten Link) im Abschnitt über die Spezifikation von Cascading Style Sheets herausfinden. In der Spalte „Geerbt“ erscheint neben den geerbten Regeln „Ja“:
Lass uns beginnen mit Listenstiltyp, mit dem Sie die Art der Markierung für einzelne Elemente festlegen können HTML auflisten. Für diese Regel gelten folgende Werte:
- Keine – es wird überhaupt keine Markierung durchgeführt (list-style-type:none; wird auf dieses Element angewendet und hat daher keine Markierung)
- Disc ist ein gefüllter Kreis (list-style-type:disc; wird für diese Zeile verwendet)
- Kreis – Kreis als Markierung
- Quadrat – ein Quadrat als Markierung
- Dezimal – Arabische Ziffern (list-style-type:decimal;)
- Kleinalphabet - Kleinbuchstaben
- Großbuchstaben – lateinische Großbuchstaben
- Lower-Roman – kleingeschriebene römische Ziffern
- Upper-Roman – römische Ziffern in Großbuchstaben
Was wurde Ihrer Meinung nach zur Erstellung der obigen Liste verwendet, Ul oder Ol? Knifflige Frage. Es stellt sich heraus, dass dies nicht mehr wichtig ist, obwohl ich in diesem speziellen Fall Ol verwendet habe, aber durch die Änderung in Ul bleibt das Erscheinungsbild gleich, da es für jedes Element ein eigenes festgelegt hat CSS-Wert Regeln für Listenstiltypen.
Tatsächlich unterscheiden sich Ul und Ol nur in ihrem Standardverhalten (Ul-Markierungen und Ol-Nummern). Wenn Sie möchten, können Sie mithilfe von list-style-type ganz einfach einen Listenstil in einen anderen umwandeln. Die zur Kennzeichnung von Zahlen oder Buchstaben verwendete Schriftart ist genau die gleiche, die Sie für den Inhalt der LI-Tags definiert haben. Wenn wir beispielsweise die Schriftfarbe für die Liste ändern, ändern wir und Markierungsfarbe:
- Die Textfarbe (list-style-type:lower-roman;color:red) und die Markierungsfarbe wurden geändert
Fahren wir mit der folgenden CSS-Eigenschaft fort: Listenstil-Position. Damit können Sie die Position (Platzierung) des Bereichs mit der Markierung festlegen. Es gibt dafür nur zwei mögliche Werte:
Diese. Im Wesentlichen geben wir in list-style-position an, wo der Bereich mit Markierungen platziert werden soll – außerhalb des LI-Elements (outside) oder innerhalb desselben (inside). Standardmäßig wird der Bereich mit der Markierung außerhalb der Grenzen genommen, d. h. der Wert außerhalb wird verwendet.
Sehen wir uns das anhand eines Beispiels an. Im ersten Element der Liste werde ich speziell list-style-position:inside schreiben und wir werden sehen, was passiert:
- Hier ist alles Standard
- So sieht das Platzieren eines Markierungsbereichs mit der Innenseite aus. Bitte beachten Sie, dass sich die zweite Zeile in diesem Element und der Marker auf derselben Ebene befinden
- Hier ist alles Standard
List-Style-Image und vorgefertigte CSS-Regel
Als nächstes haben wir List-style-image – hier können Sie ein Bild angeben, das als Markierung verwendet wird. Diese Regel ist standardmäßig auf „Keine“ eingestellt (d. h. es wird kein Bild als Markierung verwendet), aber Sie können die Url()-Funktionalität schreiben, indem Sie den Pfad zum Bild angeben, das anschließend in dieser Liste als Markierung fungiert:
Es könnte so aussehen:
Bild im Listenstil: url(https://site/images/list_star.png);
- Hier ist alles Standard
- So könnte die Verwendung eines Bildes als Markierung aussehen. Es ist klar, dass Sie für diesen Zweck ein passenderes Bild auswählen können.
- Zum Beispiel wie hier.
Wie Sie sich erinnern, habe ich im Artikel darüber gesagt, dass Bilder zu Inline-Elementen gehören (eigentlich ist dies für den Browser derselbe Buchstabe, aber manchmal sehr groß).
Hier ersetzt das Bild die Markierung (Buchstaben oder Zahlen). In diesem Fall wird die Höhe der Zeile mit dem Listenelement erhöht, wenn Sie ein großes Bild als Markierung einfügen (wie es im zweiten Element des Beispiels oben geschehen ist).
In der Funktionalität für Listenbildbilder können Sie beide Bilder angeben. Wenn das Bild nicht geladen wird, wird die Standardmarkierung oder -nummerierung verwendet oder das, was im Listenstiltyp für dieses Listenelement angegeben ist.
Um alle drei oben beschriebenen CSS-Regeln in eine einzige zu schreiben, können Sie den List-Stil verwenden, einen vorgefertigten Stil zum Entwerfen von Listen. Die Reihenfolge, in der die Werte angegeben werden, spielt keine Rolle. Die Werte, die Sie nicht im Listenstil angeben, werden vom Browser explizit mit Standardwerten interpretiert.
Wo kann ich die Standardwerte sehen? Ja, es ist alles da – in der CSS-Spezifikation des W3C-Validators in der Spalte „Anfangswert“ gegenüber den Eigenschaften, die Sie interessieren:
Die Werte für einzelne Eigenschaften in der Fertighausregel im Listenstil werden durch Leerzeichen getrennt. Der Standort ist, wie bereits erwähnt, nicht wichtig:
In der Praxis könnte es so aussehen:
List-style:inside Upper-Roman URL (https://site/images/list_star.png);
Sie können Werte in beliebiger Reihenfolge und beliebiger Anzahl (beginnend bei eins) verwenden. Übrigens werden Menüs auf Websites am häufigsten mithilfe von Listen erstellt, und die List-Style-Eigenschaft wird hierfür verwendet um Markierungen aus Menülisten zu entfernen, die dort völlig unnötig sind:
Listenstiltyp:none;
Listenstil:none;
Viel Erfolg! Bis bald auf den Seiten der Blog-Site
Du könntest interessiert sein
Anzeige (Block, Keine, Inline) in CSS – Legen Sie den Anzeigetyp von HTML-Elementen auf der Webseite fest So richten Sie die Rotation ein Hintergrundfarbe Zeilen von Tabellen, Listen und anderen HTML-Elementen auf der Site mithilfe der nth-child-Pseudoklasse 
Float und Clear in CSS – Blocklayout-Tools 
Positionierung mit Z-Index und CSS-Cursorregel zum Ändern des Mauszeigers 
Position (absolut, relativ und fest) – Möglichkeiten zur Positionierung von HTML-Elementen in CSS (Regeln links, rechts, oben und unten) 
Wozu dient CSS, wie verbindet man Cascading Style Sheets damit? HTML-Dokument und die grundlegende Syntax dieser Sprache 
CSS Textdekorationseigenschaften, Vertical-Alignment, Text-Alignment, Text-Indent zum Formatieren von Text in HTML 
Regeln für Schriftart (Stärke, Familie, Größe, Stil) und Zeilenhöhe für die Gestaltung von Schriftarten in CSS 
Hintergrund in CSS (Farbe, Position, Bild, Wiederholung, Anhang) – alles zum Festlegen der Hintergrundfarbe oder des Hintergrundbilds von Html-Elementen 
CSS – was ist das und wie stellen Cascading Style Sheets eine Verbindung her? HTML Quelltext mit Style und Link 
Prioritäten in CSS und ihre Erhöhung aufgrund von Wichtigkeit, Kombination und Gruppierung von Selektoren, Benutzer- und Autorenstilen
| Browser | Internet Explorer | Netscape | Oper | Safari | Mozilla | Feuerfuchs | |||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Ausführung | 5.5 | 6.0 | 7.0 | 6.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 1.0 | 1.7 | 1.0 | 2.0 |
| Unterstützt | Ja | Ja | Ja | Ja | Ja | Ja | Ja | Ja | Ja | Ja | Ja | Ja | Ja |
Brief Information
Beschreibung
Ein Attribut, mit dem Sie gleichzeitig den Stil der Markierung, ihre Position und das Bild angeben können, das als Markierung verwendet wird. Weitere Einzelheiten zu den Argumenten finden Sie in den separaten Eigenschaften list-style-type , list-style-position und list-style-image der einzelnen Parameter.
Syntax
Listenstil: Listenstiltyp || Listenstil-Position || Bild im Listenstil
Argumente
Eine beliebige Kombination aus drei Werten, die den Markierungsstil definieren, in beliebiger Reihenfolge. Die Werte werden durch ein Leerzeichen getrennt. Keines der Argumente ist erforderlich, daher können nicht verwendete Werte weggelassen werden.
- Lorem ipsum dolor sit amet
- Consectetuer adipiscing elit
- Sed diem nonummy nibh euismod
- Tincidunt ut laacret dolore magna aliguam erat volutpat. Obwohl wir uns auf ein Mindestmaß beschränken müssen, müssen wir uns auf die Aufgabe verlassen, die Lobortis zu übernehmen, aber nicht von einer Kommode übernommen werden.
Das Ergebnis dieses Beispiels ist in Abb. dargestellt. 1.
Reis. 1. Verwendung des Listenstilparameters
Legt die Adresse eines Bildes fest, das als Listenmarkierung dient. Diese Eigenschaft wird vererbt, daher wird für einzelne Listenelemente der Wert none verwendet, um die Markierung wiederherzustellen.
Brief Information
Syntax
Listenstil-Bild: keines | URL(<адрес>)
Bezeichnungen
| Beschreibung | Beispiel | |
|---|---|---|
| <тип> | Gibt den Typ des Werts an. | <размер> |
| A && B | Die Werte müssen in der angegebenen Reihenfolge ausgegeben werden. | <размер> && <цвет> |
| A | B | Zeigt an, dass Sie nur einen der vorgeschlagenen Werte (A oder B) auswählen müssen. | normal | Small-Caps |
| Ein || B | Jeder Wert kann unabhängig oder zusammen mit anderen in beliebiger Reihenfolge verwendet werden. | Breite || zählen |
| Gruppiert Werte. | [ Zuschneiden || kreuzen ] | |
| * | Null oder mehrmals wiederholen. | [,<время>]* |
| + | Wiederholen Sie dies einmal oder mehrmals. | <число>+ |
| ? | Der angegebene Typ, das Wort oder die Gruppe ist optional. | Einsatz? |
| (A, B) | Wiederholen Sie mindestens A, aber nicht mehr als B-Mal. | <радиус>{1,4} |
| # | Wiederholen Sie dies einmal oder mehrmals, getrennt durch Kommas. | <время># |
Werte
none Deaktiviert das Bild als Markierung für das übergeordnete Element. URL Relativer oder absoluter Pfad zur Grafikdatei. Der Wert kann einfach, doppelt oder ohne Anführungszeichen angegeben werden.
Beispiel
- Es ist leicht zu überprüfen, ob eine affine Transformation monoton ist.
- Der Beweis stabilisiert das negative Kurvenintegral entscheidend und zeigt deutlich den Unsinn des oben Gesagten.
- In erster Näherung verzerrt die Potenzreihe verschwenderisch das mehrdimensionale Möbius-Band, aus dem die zu beweisende Gleichheit folgt.
Das Ergebnis dieses Beispiels ist in Abb. dargestellt. 1.
Reis. 1. Verwendung der list-style-image-Eigenschaft
Objektmodell
Ein Objekt.style.listStyleImage
Spezifikation
Jede Spezifikation durchläuft mehrere Genehmigungsstufen.
- Empfehlung – Die Spezifikation wurde vom W3C genehmigt und wird als Standard empfohlen.
- Kandidatenempfehlung ( Mögliche Empfehlung) – Die für den Standard verantwortliche Gruppe ist davon überzeugt, dass sie ihre Ziele erreicht, benötigt jedoch Hilfe von der Entwicklungsgemeinschaft, um den Standard umzusetzen.
- Vorgeschlagene Empfehlung Vorgeschlagene Empfehlung) – zu diesem Zeitpunkt wird das Dokument dem W3C-Beirat zur endgültigen Genehmigung vorgelegt.
- Arbeitsentwurf – Eine ausgereiftere Version eines Entwurfs, der zur Überprüfung durch die Community diskutiert und geändert wurde.
- Entwurf des Herausgebers ( Redaktioneller Entwurf) – eine Entwurfsversion des Standards, nachdem von den Projektredakteuren Änderungen vorgenommen wurden.
- Entwurf ( Entwurf einer Spezifikation) – die erste Entwurfsversion des Standards.
Browser
Browser
Die folgenden Notationen werden in der Browsertabelle verwendet.
Material aus dem Directory of Web Languages
Verwendete Werte
sStandort Linie, das einen der folgenden Werte definieren und annehmen kann:Diese Eigenschaft ist für alle Objekte außer currentStyle (schreibgeschützt) lesbar/schreibbar. Der Standardwert ist keiner. Das Cascading Style Sheets (CSS)-Attribut wird vererbt.
Anmerkungen
Eigentum listStyleImage gilt für alle Elemente, für die Marge Und Anzeige:Listenpunkt.
Wenn ein Bild verfügbar ist, ersetzt es das in festgelegte Markierungsbild listStyleType.
Um ein Listenmarkierungsbild für eine Eigenschaft anzuzeigen Marge muss auf Minimum eingestellt werden 30 Pkt.
Beispiele
Die folgenden Beispiele veranschaulichen die Nutzung der Eigenschaft listStyleImage und Attribut Bild im Listenstil um das Listenmarkierungsbild festzulegen.
Das erste Beispiel verwendet den Selektor ul und Attribut Bild im Listenstil.
Das zweite Beispiel verwendet die Eigenschaft listStyleImage um den Markierungsstil zu ändern, wenn ein Ereignis auftritt onmouseover.
