CSS tellere
Eksempel 01: Bruke CSS -telleregenskapen for automatisk nummerering av overskrifter i en HTML -fil
I dette eksemplet diskuterer vi motegenskapen, som automatisk tildeler et nummer til ethvert element i hypertekstmarkeringsspråket. Vi vil nummerere overskriftene våre i dette eksemplet ved å bruke forskjellige funksjoner av motegenskapen:
Vi starter med overskriften til filen, hvor vi vil tilordne stylingegenskaper til kroppen og H2 -taggen til filen. For kroppskoden bruker vi mot tilbakestillingsfunksjonen. For H2-taggen vil vi bruke Counter Increment-egenskapen og innholdsegenskapen, som vil tilordne motgenererte tall til H2-taggen i kroppen.
Etter dette vil vi åpne kroppskoden der vi vil gi en tittel på siden ved å bruke H1 -taggen. Da vil vi legge til flere H2 -tagger med stylingegenskapene definert i styling -taggen. Vi har en liste over folks navn og deres ansattes ID-er, som må økes automatisk når et nytt navn blir lagt til i listen. Vi har lagt til et påskudd ved hjelp av innholdseiendom, jeg.e., “Ansatt ID:” og bruk deretter telleren for å øke verdien. Deretter lukker vi alle de gjenværende taggene for å avslutte filen og åpne den i nettleseren vår for å se stylingegenskapene.
I forrige utdrag kan vi se ansattes ID, som var innholdet vi definerte. Verdiene er auto-increment gjennom disken, i.e., 1, 2, 3, 4, etc.
Eksempel 02: Bruke CSS -telleregenskapen for å lage flere overskrifter og underoverskrifter med hierarkiske tall
I dette eksemplet vil vi nummerere overskrifter og underoverskrifter som bruker ulike funksjonaliteter i motegenskapen. I dette eksemplet vil vi se på Counter -egenskapen, som tildeler et nummer til ethvert element i hypertekstmarkeringsspråket.
I dette skriptet vil vi implementere begrepet nestede telleren. Først vil vi definere telleren i kroppsstilklassen, kalt “Seksjon.”Her definerte vi henholdsvis to motnavn, seksjon og underavsnitt. Siden vi har en liste over overskrifter og underoverskrifter, tilbakestiller vi begge tellere for de spesifikke elementene. Nå vil vi utvide H1- og H2 -stylingklassen med før staten. I denne delen av klassen vil vi definere innholdsjusteringen for overskriften og underoverskriften ved å bruke tellerens økning og innholdsegenskaper. Deretter vil vi legge til overskriften og underoverskriften ved hjelp av henholdsvis H1- og H2 -kodene. Vi vil lage to seksjoner med separate overskrifter og underoverskrifter. Deretter vil vi lukke taggene og avslutte filen for å lagre den i ".HTML ”-format slik at vi kan åpne det i nettleseren vår.
I forrige utgang kan vi se at de to seksjonene har forskjellig nummerering som definert i stylingklassen til filen. Overskriftsnummeret øker så vel som underoverskriftenes nummer, som tilbakestilles til ett når de blir kalt til en annen seksjon.
Eksempel 03: Opprette en bestilt liste ved å bruke CSS -telleregenskapen i en HTML -fil
I dette eksemplet vil vi opprette en bestilt liste som vil bli nummerert ved hjelp av Counter -egenskapen og dens relaterte funksjoner, og dele listen i forskjellige seksjoner med forhåndsdefinerte tall per endring av seksjonen.
I dette skriptet vil vi legge til stylingklassene i utgangspunktet når vi velger Style Tag CSS -metoden. Stilkoden vil først ha "OL" -merket for å tilby stylingegenskaper. I denne klassen vil vi starte med Counter Reset -funksjonen, som vil bli satt til seksjonsfunksjonen. Deretter vil vi legge til egenskapen List Style Type, som kan brukes til å legge til hvilken som helst forhåndsdefinert stil eller standardvisningen på listen. Vi vil bare legge til stylingegenskaper til denne tagens "før" -status. I dette avsnittet vil vi legge til egenskapen til mot-increment, som vil bli satt til seksjonsfunksjonen, og definerer innholdsegenskapen med tellerfunksjonen som har innholdet lagt til som Suheadings 'parameter. Denne delen av stilmerket vil tilordne riktig sett med tall med flere underoverskrifter og underhodinger. Så oppretter vi en bestilt liste med fem forskjellige seksjoner ved hjelp av OL- og LI -kodene.
Som vi kan se i forrige utdrag, er overskriftene, underoverskriftene og underhodet perfekt organisert med et distinkt sett med tall angående deres respektive seksjon og er forskjellige fra andre seksjoner samtidig.
Eksempel 04: Opprette en Dynamisk sideliste ved hjelp av CSS Counter -egenskapen i en HTML -fil
Vi oppretter en dynamisk sideliste ved hjelp av CSS Counter -egenskapen i dette eksemplet. Vi vil tilordne sidelistenummerene, tilpasset strømningsendringen på sidekryss på vår webside. Style Tag -tilnærmingen for CSS vil bli brukt i dette eksemplet:
Det forrige skriptet er et eksempel på en liste med dynamisk personsøking gjennom tellere. I UL -taggen til stylingklassen vil vi tilbakestille telleren for Paginate -telleren. Deretter vil vi lage en stylingklasse kollektivt for UL- og LI -taggene der vi vil gi den designegenskaper ved å tilsette polstring, farge og margin, og gi den en solid kant, markørpeker og den flytende eiendommen. Etter dette vil vi flytte til neste og forrige tilstand av UL- og Li-taggene i samme klasse, hvor vi vil legge til mot-increment-egenskapen, som vil bli satt til Paginate-telleren. Vi vil også definere innholdsegenskapen med den paginate tellerfunksjonen som har innholdet som skal legges til som parameter. Etter dette vil vi lage en liste i filens kropp ved hjelp av LI- og UL -kodene. Den første LI -taggen vil ha den forrige klassen som Styling Properties Guide, mens den siste LI -taggen vil ha følgende klasse som Styling Properties Guide, og resten vil være tom.
Vi kan se at listen opprettes i en bestilt serie med tall med en trinnvis tilstand sammen med neste og tidligere knapper og stylingen som definert i styling -taggen.
Konklusjon
I denne artikkelen diskuterte vi de flere funksjonene til CSS Counter -egenskapen på hypertekstmarkeringsspråket. CSS -telleregenskapen brukes til å tilordne tall til ethvert element dynamisk. Ved hjelp av tilhørende funksjoner kan vi virvle rundt merkingsendringene i overskriften i henhold til seksjonen. Telleren Increment og Counter Reset er de vanligste funksjonene når du tildeler tall til et element. Vi implementerte CSS -telleregenskapen og dens relaterte funksjoner i forskjellige scenarier i Notisblokkene ++ miljøet.