Contatori CSS
Esempio 01: Utilizzo della proprietà CSS Counter per le intestazioni di numerazione automatica in un file HTML
In questo esempio, discutiamo della proprietà Counter, che assegna automaticamente un numero a qualsiasi elemento del linguaggio di markup ipertestuale. In questo esempio contatteremo le nostre intestazioni utilizzando diverse funzioni della proprietà
Inizieremo con l'intestazione del file, dove assegneremo proprietà di styling al corpo e tag H2 del file. Per il tag del corpo, utilizzeremo la funzione di ripristino. Per il tag H2, utilizzeremo la proprietà del contatore e la proprietà del contenuto, che assegnerà i numeri contro-generati al tag H2 nel corpo.
Dopo questo, apriremo il tag del corpo in cui forniremo un titolo alla pagina utilizzando il tag H1. Quindi aggiungeremo più tag H2 con le proprietà di styling definite nel tag di styling. Abbiamo un elenco di nomi delle persone e ID dei loro dipendenti, che devono essere aumentati automaticamente quando un nuovo nome viene aggiunto all'elenco. Abbiamo aggiunto un pretesto usando la proprietà del contenuto, i.e., "ID dipendente:" e quindi utilizzare il contatore per incrementare il valore. Successivamente, chiuderemo tutti i tag rimanenti per terminare il file e aprirlo sul nostro browser per visualizzare le proprietà di stile.
Nel frammento precedente, possiamo vedere l'ID dipendente, che era il contenuto che abbiamo definito. I valori sono automatici attraverso il contatore, i.e., 1, 2, 3, 4, ecc.
Esempio 02: Utilizzo della proprietà CSS Counter per creare più intestazioni e sottotitoli con numeri gerarchici
In questo esempio, contatteremo i nostri titoli e sottotitoli che utilizzano varie funzionalità della proprietà. In questo esempio, esamineremo la proprietà Counter, che assegna un numero a qualsiasi elemento nella lingua di markup ipertestuale.
In questa sceneggiatura, implementeremo il concetto del contatore nidificato. Innanzitutto, definiremo il contatore nella classe dello stile del corpo, chiamato "Sezione."Qui, abbiamo definito due nomi di conti, sezione e sottosezione, rispettivamente. Dato che abbiamo un elenco di intestazioni e sottotitoli, ripristiniamo entrambi i contatori per gli elementi specifici. Ora estenderemo la classe di stile H1 e H2 con lo stato prima. In questa parte della classe, definiremo la regolazione del contenuto per l'intestazione e il sottotitolo utilizzando le proprietà del contatore e del contenuto. Quindi, aggiungeremo rispettivamente l'intestazione e la sottotitoli usando i tag H1 e H2. Creeremo due sezioni con titoli e sottotitoli separati. Quindi chiuderemo i tag e finiremo il file per salvarlo in ".Formato HTML "in modo da poterlo aprire nel nostro browser.
Nell'output precedente, possiamo vedere che le due sezioni hanno una numerazione diversa come definito nella classe di styling del file. Il numero di intestazione aumenta e il numero dei sottotitoli, che viene ripristinato a uno quando vengono chiamati in un'altra sezione.
Esempio 03: creazione di un elenco ordinato utilizzando la proprietà CSS Counter in un file HTML
In questo esempio, creeremo un elenco ordinato che verrà numerato utilizzando la proprietà Counter e le sue funzioni correlate, dividendo l'elenco in sezioni diverse con numeri predefiniti per variazione della sezione.
In questo script, aggiungiamo inizialmente le classi di styling mentre optiamo per il metodo CSS Tag Style. Il tag di stile avrà prima il tag "ol" per fornire proprietà di styling. In questa classe, inizieremo con la funzione Counter Reset, che verrà impostata sulla funzione Sezione. Quindi aggiungeremo la proprietà del tipo di stile elenco, che può essere utilizzata per aggiungere qualsiasi stile predefinito o la vista predefinita dell'elenco. Aggiungeremo solo proprietà di styling allo stato "prima" di questo tag. In questa sezione, aggiungeremo la proprietà di contro-incremento, che verrà impostata sulla funzione della sezione e definiremo la proprietà del contenuto con la funzione di contatore che ha il contenuto aggiunto come parametro dei suHeadings. Questa parte del tag Style assegnerà il set corretto di numeri con diversi sottotitoli e sub-subheadings. Quindi creeremo un elenco ordinato con cinque sezioni diverse utilizzando i tag OL e LI.
Come possiamo vedere nello snippet precedente, le intestazioni, le sottotitoli e le sub-sub sono state organizzate perfettamente con una serie distinta di numeri riguardanti la rispettiva sezione e sono distinti dalle altre sezioni contemporaneamente.
Esempio 04: Creazione di a Elenco di pagine dinamiche utilizzando la proprietà CSS Counter in un file HTML
In questo esempio creeremo un elenco di pagine dinamico utilizzando la proprietà CSS Counter. Assegneremo i numeri dell'elenco delle pagine, adattato alla modifica del flusso nella attrazione di pagina sulla nostra pagina web. L'approccio del tag di stile per CSS verrà utilizzato in questo esempio:
Lo script precedente è un esempio di un elenco con il paging dinamico attraverso i contatori. Nel tag UL della classe di styling, ripristineremo il contatore per il contatore paginato. Quindi, creeremo una lezione di stile collettivamente per i tag UL e Li in cui le daremo proprietà di progettazione aggiungendo imbottitura, colore e margine, dandogli un bordo solido, un puntatore del cursore e la proprietà galleggiante. Successivamente, passeremo allo stato successivo e precedente dei tag UL e LI nella stessa classe, dove aggiungeremo la proprietà di Counterincrement, che verrà impostata sul contatore paginato. Definiremo anche la proprietà del contenuto con la funzione di contatore paginato con il contenuto da aggiungere come parametro. Dopo questo, creeremo un elenco nel corpo del file usando i tag Li e UL. Il primo tag Li avrà la classe precedente come Guida alle proprietà dello stile, mentre l'ultimo tag Li avrà la seguente classe come guida delle proprietà di stile e il resto sarà vuoto.
Possiamo vedere che l'elenco è creato in una serie di numeri ordinati con uno stato incrementale insieme ai pulsanti successivi e precedenti e gli stili come definito nel tag di stile.
Conclusione
In questo articolo, abbiamo discusso delle diverse funzioni della proprietà CSS Counter in lingua di markup ipertestuale. La proprietà CSS Counter viene utilizzata per assegnare i numeri a qualsiasi elemento dinamicamente. Con l'aiuto delle sue funzioni correlate, possiamo turbinare i cambiamenti di etichettatura nell'intestazione secondo la sezione. Il contatore incremento e il ripristino del contatore sono le funzioni più comuni quando si assegnano i numeri a un elemento. Abbiamo implementato la proprietà CSS Counter e le sue funzioni correlate in diversi scenari nell'ambiente Notepad ++.