Heim > Artikel > Web-Frontend > Wie kann ich Listenelemente mithilfe von CSS mithilfe von @counter-Style-Regeln anpassen?
Wie kann ich Listenelemente mithilfe von CSS mithilfe von @counter-Style-Regeln anpassen?
- PHPznach vorne
- 2023-09-10 21:25:021466Durchsuche
Listen sind ein wesentlicher Bestandteil der Webentwicklung und werden verwendet, um Informationen organisiert und strukturiert darzustellen. In HTML gibt es drei Arten von Listen: geordnete Listen, ungeordnete Listen und Definitionslisten. Allerdings kann die Gestaltung dieser Listen eine Herausforderung sein, wenn wir die Listen gemäß den Anforderungen entwerfen müssen. CSS bietet die @counter-style-Regel, die es uns ermöglicht, das Markup von Listenelementen flexibler und kreativer anzupassen.
In diesem Artikel erfahren Sie, wie Sie mithilfe von @counter-Stilregeln Listenelemente mithilfe von CSS anpassen. Die @counter-style-Regel wird zum Definieren von Zählerstilen verwendet, die nicht Teil eines vordefinierten Stilsatzes sind, und definiert, wie der Zählerwert in eine Zeichenfolgendarstellung konvertiert wird.
Was ist @counter-style?
Die @counter-style-Regel wird verwendet, um einen Zählerstil zu definieren, der in Verbindung mit der CSS-Zählereigenschaft verwendet werden kann. Diese Regel wird verwendet, um einen benutzerdefinierten Listenelement-Markierungsstil zu definieren , das zum Generieren von Inhalten für Pseudoelemente wie :before und :after.
verwendet wirdGrammatik
@counter-style name {
// write all the CSS styles properties and values
}
Der Namensparameter wird verwendet, um den Namen des Zählerstils anzugeben, den wir definieren. Innerhalb der geschweiften Klammern können wir eine Reihe von Eigenschaften und Werten definieren, die das Erscheinungsbild des Zählers steuern Verwenden Sie include −
System - Gibt das zu verwendende Nummerierungssystem an, z. B. Dezimalzahlen, Kleinbuchstaben, römische Großbuchstaben usw.
Symbol – Gibt das Symbol an, das für jede Ebene des Zählers verwendet wird.
Suffix – Gibt das Suffix an, das nach dem Zählerwert hinzugefügt wird.
Prefix – Gibt das Präfix an, das vor dem Zählerwert hinzugefügt werden soll.
Pad – Gibt die Mindestanzahl von Ziffern an, die bei der Anzeige des Zählerwerts verwendet werden sollen.
Schritte zur Verwendung der @counter-styles-Regel in CSS
Hier sind die Schritte zur Verwendung von @counter-styles-Regeln in CSS -
Schritt 1: Erstellen Sie eine geordnete Liste
Der erste Schritt besteht darin, eine geordnete Liste zu erstellen und diese mit unseren eigenen Listenelement-Tags anzupassen. Im folgenden Beispiel möchten wir römische Ziffern anstelle des Standard-Nummerierungssystems verwenden. Unten finden Sie den HTML-Code für unsere Liste −
<ol> <li>Learn to code in python</li> <li>Learn to code in java</li> <li>Learn to code in c++</li> </ol>
Schritt 2: Definieren Sie den @counter-Stil
@counter-style my-numerals {
system: upper-roman;
symbols: I II III IV V VI VII VIII IX X;
}
Im obigen Code haben wir einen Zählerstil namens „my-numerals“ definiert und die Systemeigenschaft auf „upper-roman“ gesetzt, was bedeutet, dass der Zähler so eingestellt wird, dass er die römischen Großbuchstaben in der Liste verwendet. Darüber hinaus haben wir Folgendes festgelegt die Eigenschaft des Symbols auf eine Folge römischer Ziffern von I bis X.
Schritt 3: CSS-Stile
ol {
counter-reset: section;
}
li {
counter-increment: section;
list-style: none;
}
li:before {
content: counter(section, my-numerals) ". ";
margin-right: 10px;
}
Im obigen Code ist das Attribut zum Zurücksetzen des Zählers auf den Abschnitt des ol-Elements festgelegt, was bedeutet, dass der Zähler bei 0 beginnt. Hier legen wir auch das Zählerinkrementattribut des Abschnitts für jedes li-Element fest.
Beispiel 1
wird übersetzt als:Beispiel 1
<html>
<head>
<title>Example to use @counter-style to customize the List Item Markers using CSS</title>
<style>
/* Defining a custom counter style to have the list as upper roman numerals */
@counter-style roman-numerals {
system: upper-roman;
symbols: I II III IV V VI VII VIII IX X;
}
/* applying the custom counter style to the ordered list */
ol {counter-reset: section; }
/* incrementing the counter for each list item */
li {counter-increment: section; list-style: none;}
/* using the counter value to display the custom list item marker */
li:before {
content: counter(section, roman-numerals) ". ";
margin-right: 8px;
color: green;
font-size: 15px;
}
</style>
</head>
<body>
<h3>Example to use @counter-style to customize the List Item Markers using CSS</h3>
<p>In this example, we have used the @counter-style rule to customize the list item markers of an ordered list.</p>
<ol>
<li>Learn to code in python</li>
<li>Learn to code in java</li>
<li>Learn to code in c++</li>
</ol>
</body>
</html>
Im obigen Beispiel haben wir mithilfe der @counter-style-Regel einen benutzerdefinierten Zählerstil mit dem Namen „my-roman“ definiert. Hier haben wir die Systemeigenschaft auf „upper-roman“ festgelegt, um die römischen Großbuchstaben zu verwenden, und auch die Eigenschaft des Symbols auf „ eine Folge römischer Ziffern von I bis X.
Danach haben wir den benutzerdefinierten Zählerstil mithilfe des Attributs „counter-reset“ auf die geordnete Liste angewendet, den Zähler für jedes Listenelement mithilfe des Attributs „counter-increment“ erhöht und die Standardmarkierung für Listenelemente mithilfe des Attributs „list-style“ entfernt.
Um schließlich das benutzerdefinierte Listenelement-Markup mit römischen Ziffern anzuzeigen, verwenden wir das :before-Pseudoelement über das Inhaltsattribut und die Zählerfunktion (die zwei Argumente benötigt: den Namen des Zählers (in diesem Fall Abschnitt) und den Name des Zählerstils (in diesem Fall römische Ziffern)).
Die chinesische Übersetzung vonBeispiel 2
lautet:Beispiel 2
<html>
<head>
<title>Example to use @counter-style to customize the List Item Markers using CSS</title>
<style>
/* removing the default list item markers */
ul { list-style: none;}
/* using images as list item markers */
li:before {
content: "";
display: inline-block;
width: 25px;
height: 25px;
background-image: url("yourimage.png");
background-repeat: no-repeat;
margin-right: 8px;
}
</style>
</head>
<body>
<h3>Example to use @counter-style to customize the List Item Markers using CSS</h3>
<p>In this example, we have used the @counter-style rule to customize the list item markers of an ordered list.</p>
<ol>
<li>Learn to code in python</li>
<li>Learn to code in java</li>
<li>Learn to code in c++</li>
</ol>
</body>
</html>
Im obigen Beispiel haben wir das list-style-Attribut verwendet, um das Standard-Listenelement-Markup aus dem ungeordneten Listenelement zu entfernen. Darüber hinaus verwenden wir auch das Pseudoelement :before, um die Listenelemente mithilfe des Inhaltsattributs und des leeren Strings anzuzeigen.
Wir haben das Anzeigeattribut auf Inline-Block gesetzt, um sicherzustellen, dass das Bild korrekt angezeigt wird, und die Breiten- und Höhenattribute auf die Größe des Markierungsbilds. Wir verwenden das Attribut „Hintergrundbild“, um die URL des getaggten Bildes anzugeben, und das Attribut „Hintergrundwiederholung“, um Bildduplizierungen zu verhindern. Schließlich haben wir mit der Eigenschaft „margin-right“ einen Rand auf der rechten Seite des Bildes hinzugefügt.
Fazit
Beim Arbeiten mit HTML-Listen können Sie die @counter-style-Regel in CSS verwenden, um das Erscheinungsbild des Listenelement-Markups anzupassen. Diese Regel bietet eine einfache und flexible Möglichkeit, benutzerdefinierte Stile für geordnete Listen zu definieren. Die Syntax von Regeln im @counter-Stil umfasst mehrere Parameter, wie z. B. System, Symbole, Suffix, Präfix und Pad. Mit diesen Parametern können Sie das Erscheinungsbild von Listenelementmarkierungen ändern. Die Verwendung der @counter-style-Regel erleichtert das Erstellen von Listenelement-Markups, die Ihren aktuellen Projektdesignanforderungen entsprechen.
Das obige ist der detaillierte Inhalt vonWie kann ich Listenelemente mithilfe von CSS mithilfe von @counter-Style-Regeln anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
In Verbindung stehende Artikel
Mehr sehen- Wie erstelle ich ein Mehrfachauswahl-Dropdown mit Kontrollkästchenoptionen?
- Wie kann ich verhindern, dass die Navigationsleiste den Seiteninhalt in Bootstrap verdeckt?
- Wie steuere ich horizontale Bildlaufleisten in CSS-'div'-Elementen?
- Was ist der Unterschied zwischen „overflow-wrap“ und „word-break“ in CSS und wie wirken sie zusammen, um lange Links zu unterbrechen?
- Wie kann ich die Sichtbarkeit der Bildlaufleiste in CSS-Div-Elementen anpassen?