Генерирование заголовков для таблицы
Исходный HTML код таблицы:<table summary=”Значение атрибута summary” title=”Значение атрибута title”>
<tr>
<td>Пример </td>
<td>Таблицы</td>
</tr>
</table>
CSS:table[summary]:after {
content: “Таблица ” counter(table) “: ” attr(summary);
counter-increment: table;
display: table-caption;
caption-side: bottom;
font-size: 10px;
font-style: italic;
white-space: nowrap;
margin-top: 5px;
margin-bottom: 20px;
}
table[title]:before {
display: table-caption;
caption-side: top;
content: attr(title);
font-size: 12px;
font-weight: bold;
white-space: nowrap;
}
Правило content: “Таблица ” counter(table) “: ” attr(summary); выводит номер таблицы и содержание атрибута summary. Правило counter-increment: table; инициализирует счётчик, который […]
Генерируем нумерацию заголовков используя CSS
Этот способ работает только в адекватных браузерах, которые понимают как минимум :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) ” “;
}
Для заголовка первого уровня […]
