русс | укр

Мови програмуванняВідео уроки php mysqlПаскальСіАсемблерJavaMatlabPhpHtmlJavaScriptCSSC#DelphiТурбо Пролог

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


Linux Unix Алгоритмічні мови Архітектура мікроконтролерів Введення в розробку розподілених інформаційних систем Дискретна математика Інформаційне обслуговування користувачів Інформація та моделювання в управлінні виробництвом Комп'ютерна графіка Лекції


Шановні українці! Матеріал був перекладений з російської мови. Тому можуть бути незначні помикли...

Списки в 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) &".quot; counter(section) " ";
 counter-increment: section;
}

Застосування такого стилю дає нумерацію голів у вигляді роздiл 1., роздiл 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 ()|(attrX)|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 - маркер списку розташовується
    всередині тексту.

Переглядів: 1223

Повернутися взміст


Онлайн система числення Калькулятор онлайн звичайний Науковий калькулятор онлайн