Многоуровневые списки
Стилевое свойство counter-increment предназначено для увеличения значения счетчика приращений, который задается свойством counter-reset. Такой счетчик подсчитывает количество отображений элементов на странице и может выводиться с помощью свойства content и псевдоэлементов :after и :before. Это позволяет создавать списки (в том числе многоуровневые), в которых нумерация и вид задаются через стили.
Значения
none
Запрещает увеличение счетчика для текущего селектора.
inherit
Наследует значение родителя.
идентификатор
Задает одну или несколько переменных, для которых требуется изменить значение счетчика. Переменные разделяются между собой пробелом.
целое число
Определяет значение приращения счетчика. По умолчанию оно равно 1. Допускается использовать отрицательные и нулевые значения.
Пример
<html>
<head>
<style type="text/css">
BODY {
counter-reset: heading; /* Инициируем счетчик */
}
H2:before {
counter-increment: heading; /* Указываем идентификатор счетчика */
content: "Глава " counter(heading) ". "; /* Выводим текст перед содержимым тега <H2> */
}
</style>
</head>
<body>
<h2>Теория информационных технологий</h2>
<h2>Метод наименьших квадратов</h2>
<h2>Основы JAVASCRIPT </h2>
</body>
</html>
counter-reset
counter-reset: none | inherit | идентификатор | целое число
Значения
none
Запрещает инициацию счетчика для текущего селектора.
inherit
Наследует значение родителя.
идентификатор
Задает одну или несколько переменных, в которых будет храниться значение счетчика. Значения разделяются между собой пробелом.
целое число
Начальное значение каждого идентификатора. По умолчанию равно 0.
<style type="text/css">
LI { list-style-type: none; } /* Убираем исходную нумерацию у списка */
OL { counter-reset: list1; } /* Инициируем счетчик */
OL LI:before {
counter-increment: list1; /* Увеличиваем значение счетчика */
content: counter(list1) ". "; /* Выводим число */
}
OL OL { counter-reset: list2; } /* Инициируем счетчик вложенного списка */
OL OL LI:before {
counter-increment: list2; /* Увеличиваем значение счетчика вложенного списка */
content: counter(list1) "." counter(list2) ". "; /* Выводим число */
}
</style>
В CSS также существует несколько псевдоклассов. С помощью псевдоклассов можно задать стиль в зависимости от состояния элемента или его положения в документе.
Для ссылок определено 4 псевдокласса:
link – ссылки, которые не посещались пользователем;
visited – посещенные ссылки;
active – активная (нажатая) ссылка;
hover – ссылка, на которую наведен курсор.
Пример:
<html>
<head>
<title>Пример</title>
<style>
A:link, A:visited {
color: black;
font-family: Verdana, sans-serif;
text-decoration: none;
}
A:hover {
color: #de7300;
text-decoration: underline;
}
</style>
</head>
<body>
<a href="index.html">Главная</a><br>
<a href="hobby.html">Мое хобби</a><br>
<a href="photo.html">Фотоальбом</a><br>
</body>
</html>
Псевдокласс (или псевдоэлемент) first-line – применяется для блочных элементов. Задает форматирование первой строки текста.
P:first-line {text-decoration: underline}
Псевдокласс (или псевдоэлемент) first-letter – позволяет задать форматирование первой буквы текста.
P:first-letter {
color: red;
font-size: 200%;
border: red solid 1px;
padding: 2px;
margin: 2px;
}
Тег <iframe>
Тег <iframe> создает плавающий фрейм, который находится внутри обычного документа, он позволяет загружать в область заданных размеров любые другие независимые документы.
Тег <iframe> является контейнером, содержание которого игнорируется браузерами, не поддерживающими данный тег. Для таких браузеров можно указать альтернативный текст, который увидят пользователи. Он должен располагаться между элементами <iframe> и </iframe>.