CSS laskuri

Pizza

Hamburger

Hot dogs

CSS-laskurit ovat CSS:n ylläpitämiä "muuttujia", niiden arvot voidaan lisätä CSS-säännöissä (ja ne seuraavat käyttötapojaan).

Laskurit mahdollistavat ulkoasun mukauttamisen dokumentin sisällön sijainnin mukaan.

Laskurilla varustetut automaattiset numerot

CSS-laskurit ovat kuin "muuttujia". Muuttujien arvot voidaan lisätä CSS-säännöissä (ja ne seuraavat käyttötapojaan).

Jos haluat käyttää CSS-laskuria, käytämme seuraavia ominaisuuksia:

  • counter-reset - luo tai aseta laskuri alkuun
  • counter-increment - lisää laskurin arvoa
  • content - lisää luotua sisältöä
  • counter() tai counters() funktiota - lisää laskurin arvo elementtiin

Jos haluat käyttää CSS-laskuria, sinun on ensin käyttää counter-reset Luo se.

Alla oleva esimerkki luo sivulle (body-valitsimessa) laskurin ja lisää laskurin arvoa jokaiselle <h2>-elementille ja lisää "Section <laskurin arvo>:" jokaisen <h2>-elementin alkuun:

esimerkki

body {
  counter-reset: section;
}
h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

Kokeile itse

Sisennetyt laskurit

Alla oleva esimerkki luo sivulle (section) laskurin ja luo laskurin jokaiselle <h1>-elementille (subsection).

"section"-laskuri laskee jokaiselle <h1>-elementille ja kirjoittaa "Section" sekä section-laskurin arvon, "subsection"-laskuri laskee jokaiselle <h2>-elementille ja kirjoittaa section-laskurin arvon sekä subsection-laskurin arvon:

esimerkki

body {
  counter-reset: section;
}
h1 {
  counter-reset: subsection;
}
h1::before {
  counter-increment: section;
  content: "Section " counter(section) ". ";
}
h2::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

Kokeile itse

Laskurit ovat hyödyllisiä myös yhteenvedonlyölistojen luomiseen, koska ne luovat automaattisesti uuden laskurin instanssin alaesimerkeissä. Tässä käytämme counters() Lisää merkkijono eri tasoisten laskurien välille:

esimerkki

ol {
  counter-reset: section;
  list-style-type: none;
}
li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}

Kokeile itse

CSS-laskinominaisuudet

Ominaisuus Kuvaus
content Käytetään ::before- ja ::after-seudoelementtien kanssa sisällyttääkseen luotua sisältöä
counter-increment Lisää yksi tai useita laskinarvoja
counter-reset Luo tai nollaa yksi tai useita laskin