You can generate the number of headers(h1 ... h6) in HTML using couner-reset, counter-increment, content properties and :before pseudo element of CSS2.
But this feature is not supported with Internet Explorer 6 and 7.
To localize the numbering, you can demarcate the area using division which has id provperty.
The following sample shows how you can do it very intuitively.
<style type="text/css">
#go-out-with-her { counter-reset:step; }
#go-out-with-her h5:before{
content:counter(step) ". ";
counter-increment:step;
}
</style>
<div id="go-out-with-her">
<h5>Choose a movie</h5>
<p>The movie maybe one of the most common ...</p>
<h5>Choose time</h5>
<p>
... Friday or Saturday would be the most proper day.
Avoid Sunday or too hot day. A slightly rainy day could be positive...
</p>
<h5>Choose a theater</h5>
<p>
... You should think in advance where to go after the movie.
A nice restaurant or a park ...
</p>
<h5>Call her</h5>
<p>
... Avoid Monday.... Three or four days before would be nice...
</p>
<h5>Prepare a small gift</h5>
<p>
The present should not too expensive, big or uncommon.
Well-known book, CD could be nice.
</p>
</div>
The above source would be look like the following in the browser.
Choose a movie
The movie maybe one of the most common ...
Choose time
... Friday or Saturday would be the most proper day. Avoid Sunday or too hot day. A slightly rainy day could be positive...
Choose a theater
... You should think in advance where to go after the movie. A nice restaurant or a park ...
Call her
... Avoid Monday.... Three or four days before would be nice...
Prepare a small gift
The present should not too expensive, big or uncommon. Well-known book, CD could be nice.
The following CSS rules can be applied more generally.
div.post-body {
counter-reset:step-for-h4
}
div.post-body h4:before{
content:counter(step-for-h4) ". ";
counter-increment:step-for-h4;
}
div.post-body h4 {
counter-reset:step-for-h5
}
div.post-body h5:before{
content:counter(step-for-h4) ". " counter(step-for-h5) ". ";
counter-increment:step-for-h5;
}
div.post-body h5 {
counter-reset:step-for-h6
}
div.post-body h6:before{
content:counter(step-for-h4) ". " counter(step-for-h5) ". " counter(step-for-h6) ". ";
counter-increment:step-for-h6;
}
For more readings.
0 comments:
Post a Comment