Генерируем нумерацию заголовков используя CSS
Posted on Сентябрь 19, 2007
Filed Under generated content, :before, css, html |
Этот способ работает только в адекватных браузерах, которые понимают как минимум :before и поддерживают генерацию контента средствами CSS
Итак, имеем следующий HTML:<h1>Заголовок</h1>
<h2>Заголовок</h2>
<h2>Заголовок</h2>
<h1>Заголовок</h1>
<h2>Заголовок</h2>
<h2>Заголовок</h2>
Начнем работать над стилями. Первое,что сделаем, объявим счётчики для заголовков:h1 {
counter-increment: h1;
}
h2{
counter-increment: h2
}
Счётчики объявлены, теперь их надо как то выводить на страницу:h1:before {
content: counter(h1) ". "
}
h2:before {
content: counter(h1) "." counter(h2) " ";
}
Для заголовка первого уровня выводим счётчик, который для него объявили, а для заголовка второго уровня выводим так сказать родной счётчик и счётчик заголовков первого уровня. пример
Последнее что нам осталось сделать - обнулят счётчик второго уровня:h1 {
counter-reset: h2 0;
}
Окончательный вид таблици стилей:h1 {
counter-increment: h1;
counter-reset: h2 0;
}
h1:before {
content: counter(h1) ". "
}
h2{
counter-increment: h2
}
h2:before {
content: counter(h1) "." counter(h2) " ";
}
пример
Comments
3 Responses to “Генерируем нумерацию заголовков используя CSS”
Leave a Reply
-
Поиск
-
Счетчики
-
-
На правах рекламы:
НумЕрация 8)
ЗЫ вспоминаю учителя по русскому в школе и его слова “хватить в точки играть”
Вот это да….
А я вообще впервые про counter-increment тут прочитал.. Во ламер, а :(.
Спасибо.