Web-FrontendCSS-TutorialWie 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?
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 id="Example-to-use-counter-style-to-customize-the-List-Item-Markers-using-CSS">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 id="Example-to-use-counter-style-to-customize-the-List-Item-Markers-using-CSS">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!
Draggin ' und Dropfen ' in ReactApr 17, 2025 am 11:52 AMDas React -Ökosystem bietet uns viele Bibliotheken, die alle auf die Interaktion von Drag & Drop konzentrieren. Wir haben React-Dnd, React-beautiful-dnd,
Schnelle SoftwareApr 17, 2025 am 11:49 AMIn letzter Zeit gab es einige wunderbar miteinander verbundene Dinge über schnelle Software.
Verschachtelte Gradienten mit HintergrundclipApr 17, 2025 am 11:47 AMIch kann nicht sagen, dass ich das all das oft im Hintergrund-Clip verwende. I ' D Wette It ' wird in der täglichen CSS-Arbeit kaum jemals verwendet. Aber ich wurde in einem Posten von Stefan Judis daran erinnert,
Verwenden von RequestAnimationFrame mit React -HooksApr 17, 2025 am 11:46 AMDie Animation mit RequestAnimationFrame sollte einfach sein, aber wenn Sie die Dokumentation von React nicht gründlich gelesen haben, werden Sie wahrscheinlich auf ein paar Dinge stoßen
Müssen Sie nach oben auf der Seite scrollen?Apr 17, 2025 am 11:45 AMVielleicht ist der einfachste Weg, dies dem Benutzer anzubieten, ein Link, der auf eine ID auf das Element abzielt. Also wie ...
Die beste API (GraphQL) ist eine, die Sie schreiben, die Sie schreibenApr 17, 2025 am 11:36 AMHören Sie, ich bin kein GraphQL -Experte, aber ich arbeite gerne damit. Die Art und Weise, wie es mir Daten als Front-End-Entwickler vorstellt, ist ziemlich cool. Es ist wie ein Menü von
Wöchentliche Plattform News: Textabstand Lesezeichen, Top-Level-Erwartung, neuer Verstärker-LadeindikatorApr 17, 2025 am 11:26 AMIn der Roundup in dieser Woche, einem praktischen Lesezeichen für die Inspektion von Typografie, unter Verwendung dessen, wie sich JavaScript -Module gegenseitig importieren, sowie Facebook ' s.
Verschiedene Methoden zur Erweiterung einer Schachtel und gleichzeitig den GrenzradiusApr 17, 2025 am 11:19 AMI ' Ich habe kürzlich eine interessante Änderung auf Codepen bemerkt: Als es ein Rechteck mit abgerundeten Ecken auf der Homepage schwebt, expandieren Sie sich im Rücken.
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
ZendStudio 13.5.1 Mac
Leistungsstarke integrierte PHP-Entwicklungsumgebung
VSCode Windows 64-Bit-Download
Ein kostenloser und leistungsstarker IDE-Editor von Microsoft
MantisBT
Mantis ist ein einfach zu implementierendes webbasiertes Tool zur Fehlerverfolgung, das die Fehlerverfolgung von Produkten unterstützen soll. Es erfordert PHP, MySQL und einen Webserver. Schauen Sie sich unsere Demo- und Hosting-Services an.
SecLists
SecLists ist der ultimative Begleiter für Sicherheitstester. Dabei handelt es sich um eine Sammlung verschiedener Arten von Listen, die häufig bei Sicherheitsbewertungen verwendet werden, an einem Ort. SecLists trägt dazu bei, Sicherheitstests effizienter und produktiver zu gestalten, indem es bequem alle Listen bereitstellt, die ein Sicherheitstester benötigen könnte. Zu den Listentypen gehören Benutzernamen, Passwörter, URLs, Fuzzing-Payloads, Muster für vertrauliche Daten, Web-Shells und mehr. Der Tester kann dieses Repository einfach auf einen neuen Testcomputer übertragen und hat dann Zugriff auf alle Arten von Listen, die er benötigt.
