Counter – licznik css
Counter – licznik css
wartość ustawiana poprzez: counter-reset i counter-increment
wyświetlanie poprzez funkcję counter(), counters()
css:
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) " "; }
html:
<h1>Asia Summits</h1> <h2>Mount Everest - 8848 m n.p.m.</h2> <h2>K2 - 8611 m n.p.m.</h2> <h2>Kanczendżanga - 8598 m n.p.m.</h2> <h1>Europe Summits</h1> <h2>Mont Blanc - 4810 m n.p.m.</h2> <h2>Mont Blanc de Courmayeur - 4748 m n.p.m.</h2> <h2>Dufourspitze - 4634 m n.p.m.</h2>
efekt:
Section 1. Asia Summits
1.1 Mount Everest – 8848 m n.p.m.
1.2 K2 – 8611 m n.p.m.
1.3 Kanczendżanga – 8598 m n.p.m.
Section 2. Europe Summits
2.1 Mont Blanc – 4810 m n.p.m.
2.2 Mont Blanc de Courmayeur – 4748 m n.p.m.
2.3 Dufourspitze – 4634 m n.p.m.
lub:
dl { counter-reset: dtcount 2 } dt:before { content: counter(dtcount)". "; counter-increment: dtcount 4; }
gdzie:
- liczba 2 – wartość początkowa licznika
- liczba 4 – krok licznika
efekt:
- 6. Coffee
- Black hot drink
- 10. Milk
- White cold drink
Hope this helps and happy coding :)
Zobacz jeszcze
css3 gradient
- background-image: linear-gradient(red, yellow); background-image: linear-gradient(to left, red, yellow); background-image: linear-gradient(30deg, red, yellow); background-image:...
css3
elementy html
elementy html blokowe: <div> <h1> - <h6> <p> <form> elementy html liniowe: <span> <a> <img> - należy zawsze podawać atrybut alt...