CSS
tellers
Zoeken…
Syntaxis
counter-set: [<tellernaam> <integer>? ] + | geen
counter-reset: [<tellernaam> <integer>? ] + | geen
counter-increment: [<tellernaam> <integer>? ] + | geen
counter (<counter-name> [, <counter-style>]?)
tellers (<counter-name>, <connector-string> [, <counter-style>]?)
parameters
| Parameter | Details |
|---|---|
| contra-naam | Dit is de naam van de teller die moet worden gemaakt of opgehoogd of afgedrukt. Het kan elke aangepaste naam zijn die de ontwikkelaar wenst. |
| geheel getal | Dit gehele getal is een optionele waarde die, indien opgegeven naast de tellernaam, de initiële waarde van de teller (in counter-set , counter-reset eigenschappen) of de waarde waarmee de teller moet worden verhoogd (in counter-increment ) zal vertegenwoordigen. |
| geen | Dit is de beginwaarde voor alle 3 counter-* eigenschappen. Wanneer deze waarde wordt gebruikt voor counter-increment , wordt de waarde van geen van de tellers beïnvloed. Wanneer dit wordt gebruikt voor de andere twee, wordt er geen teller gemaakt. |
| contra-stijl | Dit specificeert de stijl waarin de tellerwaarde moet worden weergegeven. Het ondersteunt alle waarden die worden ondersteund door de eigenschap list-style-type . Als er none wordt gebruikt, wordt de tellerwaarde helemaal niet afgedrukt. |
| connector-string | Dit vertegenwoordigt de tekenreeks die tussen de waarden van twee verschillende tellerniveaus moet worden geplaatst (zoals de "." In "2.1.1"). |
Opmerkingen
Tellers zijn geen nieuw onderwerp in CSS. Het was een onderdeel van de CSS Level 2-specificaties (Revisie 1 om precies te zijn) zelf en heeft daarom een zeer hoge browserondersteuning.
Alle browsers behalve IE6 en IE7 ondersteunen CSS-tellers.
Stijlen van Romeinse cijfers toepassen op de telleruitgang
CSS
body {
counter-reset: item-counter;
}
.item {
counter-increment: item-counter;
}
.item:before {
content: counter(item-counter, upper-roman) ". "; /* by specifying the upper-roman as style the output would be in roman numbers */
}
HTML
<div class='item'>Item No: 1</div>
<div class='item'>Item No: 2</div>
<div class='item'>Item No: 3</div>
In het bovenstaande voorbeeld wordt de uitvoer van de teller weergegeven als I, II, III (Romeinse cijfers) in plaats van de gebruikelijke 1, 2, 3 omdat de ontwikkelaar de stijl van de teller expliciet heeft opgegeven.
Nummer elk item met behulp van CSS Counter
CSS
body {
counter-reset: item-counter; /* create the counter */
}
.item {
counter-increment: item-counter; /* increment the counter every time an element with class "item" is encountered */
}
.item-header:before {
content: counter(item-counter) ". "; /* print the value of the counter before the header and append a "." to it */
}
/* just for demo */
.item {
border: 1px solid;
height: 100px;
margin-bottom: 10px;
}
.item-header {
border-bottom: 1px solid;
height: 40px;
line-height: 40px;
padding: 5px;
}
.item-content {
padding: 8px;
}
HTML
<div class='item'>
<div class='item-header'>Item 1 Header</div>
<div class='item-content'>Lorem Ipsum Dolor Sit Amet....</div>
</div>
<div class='item'>
<div class='item-header'>Item 2 Header</div>
<div class='item-content'>Lorem Ipsum Dolor Sit Amet....</div>
</div>
<div class='item'>
<div class='item-header'>Item 3 Header</div>
<div class='item-content'>Lorem Ipsum Dolor Sit Amet....</div>
</div>
In het bovenstaande voorbeeld wordt elk "item" op de pagina .item-header en wordt het nummer van het item toegevoegd vóór de koptekst (met behulp content eigenschap content van .item-header element's :before pseudo). Een live demo van deze code is hier beschikbaar.
Nummering op meerdere niveaus implementeren met behulp van CSS-tellers
CSS
ul {
list-style: none;
counter-reset: list-item-number; /* self nesting counter as name is same for all levels */
}
li {
counter-increment: list-item-number;
}
li:before {
content: counters(list-item-number, ".") " "; /* usage of counters() function means value of counters at all higher levels are combined before printing */
}
HTML
<ul>
<li>Level 1
<ul>
<li>Level 1.1
<ul>
<li>Level 1.1.1</li>
</ul>
</li>
</ul>
</li>
<li>Level 2
<ul>
<li>Level 2.1
<ul>
<li>Level 2.1.1</li>
<li>Level 2.1.2</li>
</ul>
</li>
</ul>
</li>
<li>Level 3</li>
</ul>
Het bovenstaande is een voorbeeld van nummering op meerdere niveaus met behulp van CSS-tellers. Het maakt gebruik van het zelf-nestelende concept van tellers. Zelf nestelen is een concept waarbij als een element al een teller heeft met de gegeven naam maar een andere moet maken, het het creëert als een kind van de bestaande teller. Hier neemt het tweede niveau ul de list-item-number van de ouder, maar moet dan zijn eigen list-item-number (voor zijn kinderen li ) en maakt zo list-item-number[1] (teller voor tweede niveau) en nestelt het onder list-item-number[0] (teller voor eerste niveau). Zo bereikt het de nummering op meerdere niveaus.
De uitvoer wordt afgedrukt met behulp van de functie counters() in plaats van de functie counter() , omdat de functie counters() is ontworpen om de waarde van alle tellers met een hoger niveau (bovenliggend) voor te stellen bij het afdrukken van de uitvoer.
