CSS -Zähler

Dieser Artikel konzentriert sich auf die CSS -Zählereigenschaft, mit der wir das Erscheinungsbild des Inhalts basierend auf seinem Standort auf einer Webseite anpassen können. Zum Beispiel können wir einen Zähler verwenden, um die Anzahl der Überschriften auf der Webseite zu automatisieren. Wir können unsere eigenen benannten Zähler erstellen und das Standardlistenelement ändern, indem wir die Gegeneigenschaft und ihre zugehörigen Funktionen und Eigenschaften verwenden, die Gegenaufnahmen, Gegenstaatsanlage, Inhalt und Zähler sind.

Beispiel 01: Verwenden der CSS -Zählereigenschaft zum automatischen Nummern von Überschriften in einer HTML -Datei

In diesem Beispiel diskutieren wir die Gegeneigenschaft. Wir werden unsere Überschriften in diesem Beispiel nummerieren, indem wir verschiedene Funktionen der Zählereigenschaft verwenden:

Wir beginnen mit dem Header der Datei, in dem wir dem Körper- und H2 -Tag der Datei Stylingeigenschaften zuweisen werden. Für das Body -Tag werden wir die Funktion der Zähler Reset verwenden. Für das H2-Tag verwenden wir die Eigenschaft der Zählerinkrement und die Inhaltseigenschaft, mit der die Zählernummern dem H2-Tag im Körper zugewiesen werden.

Danach werden wir das Body -Tag öffnen, in dem wir mit dem H1 -Tag einen Titel für die Seite geben werden. Dann werden wir mehrere H2 -Tags mit den im Styling -Tag definierten Stylingeigenschaften hinzufügen. Wir haben eine Liste der Namen ihrer Mitarbeiter und der ID ihrer Mitarbeiter, die automatisch erhöht werden müssen, wenn ein neuer Name zur Liste hinzugefügt wird. Wir haben einen Vorwand mithilfe der Inhaltseigenschaft hinzugefügt, ich.e., "Mitarbeiter -ID:" und verwenden Sie den Zähler dann, um den Wert zu erhöhen. Als nächstes schließen wir alle verbleibenden Tags, um die Datei zu beenden und in unserem Browser zu öffnen, um die Styling -Eigenschaften anzuzeigen.

Im vorherigen Snippet können wir die Mitarbeiter -ID sehen, die der Inhalt war, den wir definiert haben. Die Werte sind automatisch durch den Zähler, ich.e., 1, 2, 3, 4 usw.

Beispiel 02: Verwenden der CSS -Zählereigenschaft, um mehrere Überschriften und Unterblätter mit hierarchischen Zahlen zu erstellen

In diesem Beispiel werden wir unsere Überschriften und Unterblätter unter Verwendung verschiedener Funktionalitäten der Gegeneigenschaft nummerieren. In diesem Beispiel werden wir uns mit der Zählereigenschaft befassen, die jedem Element in der Hypertext -Markup -Sprache eine Nummer zuweist.

In diesem Skript werden wir das Konzept des verschachtelten Zählers implementieren. Erstens werden wir den Zähler in der Klasse Style -Klasse mit dem Namen „Abschnitt definieren.Hier haben wir zwei Zählernamen, Abschnitt bzw. Unterabschnitt definiert. Da wir eine Liste von Überschriften und Unterblättern haben, setzen wir beide Zähler für die spezifischen Elemente zurück. Jetzt werden wir den H1- und H2 -Styling -Kurs mit dem Vorstaat erweitern. In diesem Teil der Klasse definieren wir die Inhaltseinstellungen für die Überschrift und Unterstellung mit den Eigenschaften des Zählerinkrements und der Inhalte. Dann werden wir mit den H1- bzw. H2 -Tags die Überschrift und Unterschrift hinzufügen. Wir erstellen zwei Abschnitte mit separaten Überschriften und Unterschreitungen. Dann schließen wir die Tags und beenden die Datei, um sie in der “zu speichern.HTML ”-Format, damit wir es in unserem Browser öffnen können.

In der vorherigen Ausgabe können wir feststellen, dass die beiden Abschnitte eine unterschiedliche Nummerierung haben, wie in der Styling -Klasse der Datei definiert. Die Überschriftenzahl nimmt ebenso zu und die Anzahl der Unterblätter, die auf einen zurückgesetzt wird, wenn sie in einen anderen Abschnitt gerufen werden.

Beispiel 03: Erstellen einer nummer bestellten Liste mithilfe der CSS -Zählereigenschaft in einer HTML -Datei

In diesem Beispiel werden wir eine geordnete Liste erstellen, die mithilfe der Countereigenschaft und ihrer zugehörigen Funktionen nummeriert wird, um die Liste in verschiedene Abschnitte mit vordefinierten Zahlen gemäß der Änderung des Abschnitts zu teilen.

In diesem Skript werden wir zunächst die Styling -Klassen hinzufügen, da wir uns für die Style Tag CSS -Methode entscheiden. Das Style -Tag hat zuerst das „OL“ -Tag für die Bereitstellung von Stylingeigenschaften. In dieser Klasse beginnen wir mit der Funktion der Zähler Reset, die auf die Abschnittsfunktion festgelegt wird. Anschließend werden wir die Eigenschaft zum Listenstiltyp hinzufügen, mit der ein beliebiger Stil oder die Standardansicht der Liste hinzugefügt werden kann. Wir werden dem „Before“ -Zustand dieses Tags nur Styling -Eigenschaften hinzufügen. In diesem Abschnitt fügen wir die Gegenineigeneigenschaft für die Increment-Eigenschaft hinzu, die auf die Abschnittsfunktion festgelegt wird, und definieren die Inhaltseigenschaft mit der Zählerfunktion, in der der Inhalt als Parameter der Suheadings hinzugefügt wird. Dieser Teil des Style-Tags weist die korrekte Anzahl von Zahlen mit mehreren Unterblöcken und Unterhandheiten zu. Dann erstellen wir eine bestellte Liste mit fünf verschiedenen Abschnitten mit den OL- und Li -Tags.

Wie wir im vorherigen Snippet sehen können.

Beispiel 04: Erstellen a Dynamische Seitenliste unter Verwendung der CSS -Zählereigenschaft in einer HTML -Datei

Wir erstellen in diesem Beispiel eine dynamische Seitenliste mit der CSS -Zählereigenschaft. Wir werden die Seitenlistennummern zuweisen, die an die Flow -Änderung auf der Seitenquelle auf unserer Webseite angepasst sind. Der Style -Tag -Ansatz für CSS wird in diesem Beispiel verwendet:

Das vorherige Skript ist ein Beispiel für eine Liste mit dynamischem Paging -Through -Zähler. Im UL -Tag der Styling -Klasse werden wir den Zähler für den paginierten Zähler zurücksetzen. Dann erstellen wir gemeinsam eine Stylingklasse für die UL- und Li -Tags. Danach wechseln wir in den nächsten und den vorherigen Zustand der UL- und Li-Tags in derselben Klasse, wo wir die Gegenineigeneigenschaft hinzufügen, die dem Paginat-Zähler festgelegt wird. Wir werden auch die Inhaltseigenschaft mit der paginierten Zählerfunktion definieren, wobei der Inhalt als Parameter hinzugefügt werden soll. Danach erstellen wir eine Liste im Körper der Datei mit den Li- und UL -Tags. Das erste Li -Tag wird die vorherige Klasse als Leitfaden für Styling -Eigenschaften haben, während das letzte Li -Tag die folgende Klasse als Leitfaden für Styling -Eigenschaften hat und der Rest leer ist.

Wir sehen.

Abschluss

In diesem Artikel haben wir die verschiedenen Funktionen der CSS -Zählereigenschaft in der Hypertext -Markup -Sprache erörtert. Die CSS -Zählereigenschaft wird verwendet, um jedem Element dynamisch Zahlen zuzuweisen. Mit Hilfe der damit verbundenen Funktionen können wir die Kennzeichnungsänderungen in der Überschrift gemäß dem Abschnitt umgehen. Das Zählerinkrement und das Zähler Reset sind die häufigsten Funktionen, wenn Sie einem Element Zahlen zuweisen. Wir haben die CSS -Zählereigenschaft und ihre damit verbundenen Funktionen in verschiedenen Szenarien in der Notepad ++ - Umgebung implementiert.