русс | укр

Языки программирования

ПаскальСиАссемблерJavaMatlabPhpHtmlJavaScriptCSSC#DelphiТурбо Пролог

Компьютерные сетиСистемное программное обеспечениеИнформационные технологииПрограммирование

Все о программировании


Linux Unix Алгоритмические языки Аналоговые и гибридные вычислительные устройства Архитектура микроконтроллеров Введение в разработку распределенных информационных систем Введение в численные методы Дискретная математика Информационное обслуживание пользователей Информация и моделирование в управлении производством Компьютерная графика Математическое и компьютерное моделирование Моделирование Нейрокомпьютеры Проектирование программ диагностики компьютерных систем и сетей Проектирование системных программ Системы счисления Теория статистики Теория оптимизации Уроки AutoCAD 3D Уроки базы данных Access Уроки Orcad Цифровые автоматы Шпаргалки по компьютеру Шпаргалки по программированию Экспертные системы Элементы теории информации

Списки в CSS. Управление списками CSS

CSS предоставляет возможность управления нумерацией (счётчиками) разделов, списков, перечней иллюстраций ... Для этого используются функции counter() и counters(). Счётчики объявляются с помощью свойства content, потом могут обнуляться (свойство counter-reset) и прибавляться (свойство counter-increment). Например, для автоматической нумерации заголовков первого и второго уровней (h1 - главы и h2 - разделы) необходимо использовать стиль:

h1:before	{
	content: "Глава " counter(chapter) ". ";
	counter-increment: chapter;
	counter-reset: section;
}
h2:before	{
	content: counter(chapter) "." counter(section) " ";
	counter-increment: section;
}

Применение такого стиля даёт нумерацию глав в виде Глава 1., Глава 2., а для разделов в виде 1.1, 1.2 и т.д.

Для символов нумерации нумерованных списков и маркеров ненумерованных списков есть возможность выбрать стиль свойством list-style-type.

Расположение маркера по отношению к тексту элемента списка регулируется с помощью свойств list-style-position и marker-offset.

Таблица 2.7. Свойства управления списком
Свойство Описание Умолчание Применение
content Генерация содержимого Пустая строка К псевдоэлементам before и after
counter-reset Сброс счётчика none Ко всем элементам
counter-increment Приращение счётчика none Ко всем элементам
list-style-type Стиль нумерации/маркирования disk К элементам с display:list-item
list-style-image Символ маркирования none К элементам с display:list-item
list-style-position Положение маркера outside К элементам с display:list-item
marker-offset Смещение маркера auto К элементам с display:marker

Генерация содержимого

content:URI|counter()|attr(X)|open-quote|close-quote|no-open-quote|no-close-quote

  • URI - адрес внешнего ресурса, используемого для генерации,
  • couter()|counters() - определение счётчиков,
  • attr(X) - функция, возвращающая значение атрибута Х элемента, выбранного селектором,
  • open-quote - открывающая кавычка, замещается соответствующими символами из свойства quotes,
  • close-quote - закрывающая кавычка, замещается соответствующими символами из свойства quotes,
  • no-open-quote - пустая строка, увеличивает уровень вложения кавычек на 1,
  • no-close-quote - пустая строка, уменьшает уровень вложения кавычек на 1.

Сброс счётчика

counter-reset:имя_счётчика Vv|none

Vv - начальное зачение счётчика.

Приращение счётчика

counter-increment:имя_счётчика Vv|none

Vv - величина приращения счётчика.

Стиль нумерации/маркирования

list-style-type:disk|circle|square
list-style-type:decimal|decimal-leading-zero|lower-roman|upper-roman
list-style-type:lower-greek|lower-latin|upper-latin

  • disk - диск в качестве маркера для маркированных списков,
  • circle - круг,
  • square - квадрат,
  • decimal - десятичная нумерация 1 2 3,
  • decimal-leading-zero - десятичная нумерация с ведущим нулём 01 02 03,
  • lower-roman - малые римские i ii iii iv,
  • upper-roman - большие римские I II III IV,
  • lower-greek - малые греческие буквы,
  • lower-latin - малые латинские буквы a b c,
  • upper-latin - большие латинские буквы A B C.

Положение маркера

list-style-position:inside|outside

<ul>
<li>
<code>outside</code> - маркер списка располагается<br> вне текста,
</li>
<li style="list-style-position:inside">
<code>inside</code> - маркер списка располагается<br> внутри текста.
</li>
</ul>
  • outside - маркер списка располагается
    вне текста,
  • inside - маркер списка располагается
    внутри текста.

Просмотров: 18258

Вернуться воглавление


Карта сайта Карта сайта укр


Уроки php mysql Программирование

Онлайн система счисления Калькулятор онлайн обычный Инженерный калькулятор онлайн Замена русских букв на английские для вебмастеров Замена русских букв на английские

Аппаратное и программное обеспечение Графика и компьютерная сфера Интегрированная геоинформационная система Интернет Компьютер Комплектующие компьютера Лекции Методы и средства измерений неэлектрических величин Обслуживание компьютерных и периферийных устройств Операционные системы Параллельное программирование Проектирование электронных средств Периферийные устройства Полезные ресурсы для программистов Программы для программистов Статьи для программистов Cтруктура и организация данных


 


Полезен материал? Поделись:

Не нашли то, что искали? Google вам в помощь!

 
 

© life-prog.ru При использовании материалов прямая ссылка на сайт обязательна.