CSS: counter-reset

Võimaldab organiseerida dokumenti vastavalt peatükkidele ja alapealkirjadele. Kasutab korraga mitmeid CSS atribuute ning korrektselt toimib ainult Opera võrgulehitsejaga.

Näited:

Opera võrgulehitsejaga toimiv korrektne näide (allikas).

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="et" lang="et">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css">
h1:before {
  content: "Peatükk " counter(chapter) ". ";
  counter-increment: chapter;
  counter-reset: section;
}
h2:before {
  content: counter(chapter) "." counter(section) " ";
  counter-increment: section;
}
</style>
</head>
<body>

<h1>Lorem ipsum</h1>

<h2>Donec et lacus ac massa congue fermentum</h2>

<p>Mauris pharetra tempus leo. Fusce mollis. Aliquam erat volutpat. Curabitur quis arcu. Aenean vitae 
est. Sed imperdiet eleifend est. Maecenas turpis lectus, tristique at, laoreet et, pellentesque ac, felis. 
Nulla quis dui. Sed metus diam, feugiat vel, laoreet et, sodales eu, turpis. Curabitur in massa et sem 
viverra auctor. Suspendisse aliquam ultrices pede. Nullam risus nibh, ullamcorper non, consequat a, rhoncus 
vitae, eros. Suspendisse scelerisque nisl in tortor. Curabitur iaculis.</p>

<h2>Ut scelerisque mi iaculis est</h2>

<p>Phasellus nisi lacus, auctor non, tincidunt in, egestas ut, metus. Sed feugiat fringilla urna. 
Aenean dignissim. Aenean iaculis, dolor ut pellentesque bibendum, massa mi aliquam orci, sed consequat 
odio lorem a tellus. Nullam pede massa, congue non, nonummy ut, vehicula sit amet, pede. Donec eget nunc. 
Mauris ut nibh ut mi semper dapibus. Morbi hendrerit sem accumsan enim. Ut ut odio. Morbi consequat tortor 
eget mi. Donec vitae justo vel dolor sagittis faucibus. Cras ipsum leo, molestie eu, laoreet eu, dapibus 
id, diam. Nullam erat leo, dapibus quis, vestibulum vitae, ultrices ac, dui. Nam auctor quam eu erat. 
Phasellus tortor nunc, faucibus ac, tristique sit amet, cursus quis, massa. Sed lectus risus, eleifend 
sagittis, fringilla ut, molestie eget, nulla. Nam dapibus felis id pede. Maecenas scelerisque lacinia 
dolor.</p>

<h2>Fusce eleifend luctus augue</h2>

<p>Duis auctor purus vel quam. Ut tincidunt aliquet mauris. Praesent ligula. Ut sed turpis. Ut eu 
ante. Pellentesque enim. Duis laoreet. Proin ornare, ante eget placerat lacinia, nisl pede egestas diam, 
vel facilisis urna pede eu eros. Vestibulum vel eros. Praesent mattis. Maecenas urna nisl, rhoncus vitae, 
varius id, convallis vel, velit. Maecenas sit amet turpis. Maecenas id arcu. Pellentesque vitae eros in 
felis suscipit rutrum. Aliquam nunc velit, vulputate a, viverra faucibus, nonummy ac, nulla. In justo 
sapien, lobortis egestas, cursus sed, vestibulum in, lorem. Nulla facilisi.</p>

<h2>Mauris id lorem et tellus tincidunt porttitor</h2>

<p>Nulla vehicula. Integer felis tortor, suscipit sit amet, ultricies quis, dictum nec, mauris. 
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer 
nulla. Cras facilisis, leo et placerat fermentum, magna erat tincidunt tellus, ut tristique metus urna 
eget purus. Suspendisse rhoncus felis dignissim orci. Integer sed arcu lacinia dui vehicula tristique. 
Maecenas volutpat, arcu ac elementum suscipit, urna mauris sagittis justo, vitae egestas lorem sem at 
lectus. Nam in eros.</p>

<h2>Aliquam in libero et odio mattis interdum</h2>

<p>Vestibulum suscipit ligula non libero. Morbi diam nibh, porttitor at, imperdiet sed, lobortis 
lobortis, diam. Ut adipiscing imperdiet tortor. Nulla accumsan, risus vitae euismod commodo, orci risus 
dignissim nisi, at nonummy lacus arcu iaculis diam. Nunc magna leo, consequat aliquam, egestas non, 
interdum in, lorem. Praesent ornare mattis felis. Vivamus volutpat interdum nunc. Sed vel ante quis eros
faucibus tempor. Suspendisse euismod ante at pede. Pellentesque et neque. Fusce auctor pede. Duis a massa. 
Mauris et felis. Cras malesuada cursus lorem. Aliquam urna. Maecenas non ante ac tellus euismod fringilla.</p>

<h2>Mauris tincidunt gravida lorem</h2>

<p>Cras et nibh ut mauris feugiat consectetuer. Morbi venenatis tristique eros. Duis posuere, 
nibh nec iaculis hendrerit, nisl ipsum elementum felis, et venenatis tortor nunc vel augue. Ut nonummy 
posuere nulla. Aliquam at justo. Phasellus nibh. Etiam eleifend pharetra diam. Nulla facilisi. Etiam 
mauris metus, faucibus at, tempor sit amet, tincidunt nec, odio.</p>

<h1>Edasi...</h1>

</body>
</html>

© Margo Munner | Sisukaart