Правильна нумерація у вкладених нумерованих списках HTML за допомогою CSS. Правильна нумерація у вкладених нумерованих списках HTML за допомогою CSS Як зробити нумерований список в css

Досить часто доводиться користуватися нумерацією: при створенні різних списків, переліків, оформленні змісту або змісту і т.п.

У CSS для автоматизації процесу нумерації використовуються лічильники.

Для початку наведемо простий приклад. Потім складніше - створимо вкладений список з автоматизованою нумерацією його пунктів і підпунктів.

ідентифікація лічильника

Спочатку необхідно ідентифікувати лічильник.

За допомогою властивості counter-reset лічильника присвоюється ім'я і початкове значення. Ім'я може бути будь-яким, але не може починатися з цифри.

Фрагмент коду:

Ця запис говорить про те, що для тега встановлений лічильник з ім'ям number і початковим значенням 3.

За замовчуванням початкове значення лічильника дорівнює 0.

приріст лічильника

Для цього служить властивість counter-increment. Також воно використовується для завдання збільшень лічильника - числа, на яке буде збільшуватися значення лічильника.

Фрагмент коду:

body (counter-reset: number 3;)
body p (counter-increment: number 3 ; }

Цей фрагмент коду говорить про те, що абзаци ( тег

) В тілі документа будуть пронумеровані лічильником number з приростом рівним 3.

Перший абзац буде під номером 6, так як початкове значення лічильника 3 і його приріст дорівнює 3.

За замовчуванням значення збільшень лічильника дорівнює 1.

зараз все необхідні параметри лічильника задані: ім'я, початкове значення, приріст і елемент, який нумеруватиметься. Далі ....

відображення лічильника

Тепер необхідно вивести значення лічильника і задати правила його розташування. Це робиться за допомогою властивості content і псевдоелементів before і after.

Властивість content вставляє вміст до ( before) Або після ( after ) Зазначеного елемента.

Фрагмент коду:

body (counter-reset: number 3;)
body p: after (counter-increment: number 3 ; content: "одно" counter (number) "." ;)

Отже, до попереднього фрагменту коду ми додали властивість content, яке виводить слово "дорівнює", потім значення лічильника number і точку "." . Все це вставляється на сторінку після вмісту абзацу ( тега

), Про що говорить псевдоелемент after.

В підсумку...

Нижче представлений описаний приклад.

Фрагмент коду:

2 помножити на 3

3 помножити на 3

4 помножити на 3

5 помножити на 3

результат:

Вкладені списки з автоматичною нумерацією

Давайте розглянемо приклад застосування лічильників для автоматизації процесу нумерації вкладених списків.

Вам повинно бути вже відомо, як з HTML, так і при вивченні списків в CSS, що пункти списку нумеруються автоматично. Але ця нумерація є найпростішою.

А як щодо автоматичної нумерації підпунктів виду 1.1, 1.2, 2.1, 2.2 і т.д.?

Це завдання вирішується за допомогою лічильників, що дозволяють автоматизувати процес нумерації вкладених списків.

Фрагмент коду:

1. Перший пункт списку


1. Перший підпункт 1-го пункту


2. Другий підпункт 1-го пункту


2. Другий пункт списку


1. Перший підпункт 2-го пункту


2. Другий підпункт 2-го пункту


3. Третій пункт списку


1. Перший підпункт 3-го пункту


2. Другий підпункт 3-го пункту


3. Третій підпункт 3-го пункту








результат:

Ось так відбувається автоматизація процесу нумерації вкладених списків!

Підтримує два види списків: нумеровані і ненумеровані. Перші використовуються для впорядкованого перерахування елементів, другі - для створення списку рівнозначних елементів. Є ще списки визначень, які використовуються для створення блоків визначення-опис але, з мого досвіду, використовуються вкрай рідко. Про те, як працювати з цими списками є відео для новачків , Де докладно показано, як працювати з цими списками.

Попрацювавши зі стандартними вкладеними нумерованими списками HTML, кожен рано чи пізно зіткнеться з проблемою її недосконалості. Справа в тому, що при вкладенні списку, нумерація вкладеного списку знову і знову починається з одиниці. І при рівні вкладеності від трьох і при довжині списку більше десяти починаються проблеми зі сприйняттям того, який вкладений елемент, до якого батьківського елементу відноситься.

Розглянемо цю задачу на простому прикладі. У коді нижче елементи складаються з того, що б хотілося бачити:

1. 1.
2. 2.
   1. 2.1.
   2. 2.2.
   1. 2.2.1.
   1. 2.2.1.1.
   2. 2.2.1.2.
   2. 2.2.2.
   3. 2.3.
   4. 2.4.
3. 3.
4. 4.
   1. 4.1.
   2. 4.2.
   1. 4.2.1.
   1. 4.2.1.1.
   2. 4.2.1.2.
   2. 4.2.2.
   3. 4.3.
   4. 4.4.

Однак, при виведенні такого HTML коду на екран отримуємо стандартний висновок нумерованого списку HTML, в якому всі вкладені списки починаються з 1.

На малюнку вище те, що представлено на початку елементів списку (не жирний текстом) - це автоматична нумерація списку

HTML. Правда незручно?

Для того, щоб нумерація була правильною, інтуїтивно зрозумілою, потрібно щоб кожен вкладений список починався з цифри, що позначає його рівень вкладеності. І це можна зробити досить просто застосувавши CSS:

Ol (list-style: none; counter-reset: li;) li: before (counter-increment: li; content: counters (li, ".") ".";)

Застосувавши цей CSS-код до тегам

і
1. нумерованого списку отримаємо те що потрібно: правильно пронумерований вкладений нумерований список HTML:

   

   Формування правильної нумерації у вкладеному нумерованому списку HTML за допомогою CSS

   Розглянемо докладніше властивості елементів нумерованого списку HTML, які можна модифікувати з допомогою CSS.

   • list-style: none;
     • скасуємо всі стилі списку для елементів ol (якщо вони раптом були раніше призначені) за допомогою властивості list-style
   • counter-reset: li;
     • призначимо ідентифікатор li, в якому буде зберігатися лічильник відображень елемента ol за допомогою властивості counter-reset
   • counter-increment: li;
     • позначимо ідентифікатор li як лічильник, який буде підраховувати кількість відображень елементів ol на сторінці і буде виводитися за допомогою властивості content і псевдоелемента: before для li
   • content: counters (li, ".") ".";
     • задамо послідовність виведення лічильника li для всіх елементів нумерованого списку ol.

   Таким чином, змінивши чотири властивості css двох елементів ol і li нумерованого списку можна отримати гарний нумерований список HTML, який легко сприймається і більш звичний нам, так як в ньому наочно простежується вкладеність елементів і приналежність до батьківських елементів списку.

   HTML і CSS код нумерованого списку з правильною нумерацією

   Для того, щоб простіше було розібратися і застосувати описані вище відомості, привожу повністю робочий HTML і CSS код нумерованого списку з правильною нумерацією вкладених елементів:

   1. 1.
   2. 2.
      1. 2.1.
      2. 2.2.
      1. 2.2.1.
      1. 2.2.1.1.
      2. 2.2.1.2.
      2. 2.2.2.
      3. 2.3.
      4. 2.4.
   3. 3.
   4. 4.
      1. 4.1.
      2. 4.2.
      1. 4.2.1.
      1. 4.2.1.1.
      2. 4.2.1.2.
      2. 4.2.2.
      3. 4.3.
      4. 4.4.

   Дякую за увагу! \u003d D

   P.S. Про те, як створити правильну нумерація в змішаних нумерованих і маркованих списках HTML за допомогою CSS, можна прочитати в → цієї статті . Наведено універсальне рішення по створенню css-властивостей для різних типів HTML-списків.

   Для списків, про створення яких засобами HTML розказано тут, передбачені наступні CSS-правила.

   list-style-type

   Задає маркер або нумерацію списків замість атрибута type в HTML-коді. Значення властивостей для маркованих списків можуть бути:

   • disk - гурток, встановлений за замовчуванням.
   • circle - окружність.
   • square - квадрат.

   Для нумерованих списків властивості зазвичай присвоюються значення:

   • decimal - арабські цифри, стандартне значення.
   • lower-roman - маленькі римські цифри.
   • upper-roman - заголовні римські цифри.
   • lower-alpha - малі латинські літери.
   • upper-alpha - прописні латинські букви.

   Також для будь-якого типу списку властивості list-style-type можна вказати значення none, яке взагалі прибере маркер.

   Для нумерованих списків доступні і інші значення, наприклад, cjk-ideographic задає Ідеографічні нумерацію, Armenian - традиційну вірменську, а decimal-leading-zero встановить нумерацію римськими цифрами, але з нулем на початку: 01, 02, 03 ... 09, однак на практиці ці та подібні до них значення використовуються вкрай рідко.

   Приклад нижче відображає три списки: нумерований з традиційною вірменської нумерацією, маркований з окружністю і нумерований, елементи в якому нумеруються идеографически.

   1. Перший пункт
   2. другий пункт
   3. третій пункт
   • Перший пункт
   • другий пункт
   • третій пункт
   1. Перший пункт
   2. другий пункт
   3. третій пункт
   
   
   

   Результат.

   Колір маркерів збігається з кольором тексту в списку, зазначеного властивістю color.

   list-style-image

   Дозволяє встановити в якості маркера списку власне зображення. Наприклад, якщо в папці з містить список сторінкою знаходиться файл marker.png, Який ви і хочете використовувати, то код оформлення буде наступним:

   Ul (list-style-image: url ( "marker.png");)

   list-style-position

   Визначає положення маркера: або він винесений за кордон елемента списку ( list-style-position: outside), Або текст його обтікає ( list-style-position: inside).

   У прикладі нижче показана різниця між цими значеннями. У першому випадку маркер всередині списку, в другому випадку він винесений за його межі.

   • Ви просто подивіться, чим відрізняються inside від outside.
   • У випадку з inside маркер прямо-таки вписується в список, не виходячи за його межі і не заважаючи верстці. Текст обтікає його, маркер як би всередині.
   • Значення outside виносить маркер за межі списку.
   
   
   

   В результаті створюється така сторінка:

   

   list-style

   Дозволяє скоротити код, записавши все три перерахованих властивості одним рядком. Записуються правила через пробіл:

   Ul (list-style: square inside;)

   Розглянемо приклад сторінки з трьома списками. Перший нумерується цифрами у форматі 01, 02, другий маркується призначеним для користувача малюнком (файл marker.png в папці зі сторінкою), маркер третього списку відключений.

   HTML-код приведений нижче.

   1. Перший пункт
   2. другий пункт
   3. третій пункт
   • Перший пункт
   • другий пункт
   • третій пункт
   1. Перший пункт
   2. другий пункт
   3. третій пункт
   
   
   

   Браузер відобразить наступну сторінку.

   Доброго вам дня!

   У цій статті ви дізнаєтеся про всі можливості списків, зрозумієте як зробити нумерований список, освоїте теги, які допоможуть зробити з простого маркованого списку більш цікавий і помітний з довільними маркерами. Після проходження уроку у вас прийде розуміння того, де застосовуються списки і за яких обставин їх можна використовувати.

   Дана стаття - третя в даному невеликому курсі по основам HTML. Перед прочитанням даного уроку рекомендую пройти попередні два:

   Тільки почалася стаття, а ви вже можете помітити використання стандартного маркованого списку. У мене на сайті він виглядає досить просто: зліва є невеликий відступ з лінією і квадратний маркер. Далі в статті ми детально розглянемо які бувають маркери, як зробити цифри, а також як зробити власний маркер.

   У кожній частині статті створення тих чи інших списків буде супроводжуватися детальними поясненнями по вставці того чи іншого списку.

   1. Маркери в HTML

   Даний вид списків використовується для перерахування в тексті набору схожих за значенням елементів. Це може бути перерахування посилань, які пов'язані однією тематикою, детальне пояснення для окремих частин тексту. Але давайте подивимося як в коді виглядає марковані списки:

   А ось так виглядає в браузері:

   Мал. 1.1. Стандартний вид маркованого ненумерованого списку HTML в браузері

   1.1 Стандартні маркери для маркованого списку

   На зображенні вище (Рис 1.1.) Можна помітити гуртки на початку кожного елементу меню. Це і є маркер. За замовчуванням він в браузері у вигляді закрашеного кола. Всього є кілька видів маркерів в HTML: зафарбований круг, порожній коло і квадрат. Вони не вимагають ні CSS ні підключення сторонніх зображень:

   1.2 Маркер списку у вигляді порожнього кола

   Значення атрибута ви знаєте, а зараз подивимося як зробити маркований список HTML в коді. З таблиці вище ми вибрали друге значення "circle" для атрибута type і задали його нашому маркованому списку:

   <html\u003e <head\u003e <title\u003eПриклад маркованого списку з маркером у вигляді порожнього кола</ Title\u003e </ Head\u003e <body\u003e <p\u003eзірки:</ P\u003e <ul type \u003d "circle"\u003e <li\u003eСіріус</ Li\u003e <li\u003eАрктур</ Li\u003e <li\u003eПоллукс</ Li\u003e <li\u003eБетельгейзе</ Li\u003e <li\u003eсонце</ Li\u003e </ Ul\u003e </ Body\u003e </ Html\u003e

   Відразу дивимося як цей код буде виглядати в браузері:

   Мал. 1.2. Вид маркера для списку у вигляді кола в браузері

   1.3 Маркер списку у вигляді квадрата

   Подивимося також і останній приклад з квадратним маркером для HTML списку:

   Зверніть увагу на маркер, він став квадратним:

   Мал. 1.3. Вид маркера для списку у вигляді квадрата в браузері

   Важливе зауваження: Зараз вже не використовується такий спосіб для створення стилів маркованих списків. Існує чіткий поділ CSS (що таке CSS читайте) і HTML. HTML - для розмітки, а CSS - для створення привабливого зовнішнього вигляду.

   Код, який містить даний атрибут, при вказівки типу поточного документа як HTML5 ( ""), Видасть помилку при валідації. Якщо не чули що таке валідація, то вам сюди -.

   Помилка буде наступна:

   Мал. 1.4. Помилка на валідаторі при використанні атрибута "type" у списку

   З маркованими списками розібралися. Зараз перейдемо до нумерованим, а потім розглянемо вкладені списки і кілька готових прикладів, які використовуються найчастіше на реальних сайтах.

   2. Нумеровані списки в HTML

   На відміну від попереднього виду списків, в нумерованих списків є одна важлива особливість: вони автоматично проставляють нумерацію. Це буває корисно коли необхідно пронумерувати великий список. Вручну це займе дуже багато часу, при цьому ще можна збитися. Нумерований список задається за допомогою тега. Як це виглядає на практиці:

   Приклад нумерованого списку:

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

   <html\u003e <head\u003e <title\u003eПриклад стандартного нумерованого списку</ Title\u003e </ Head\u003e <body\u003e <p\u003eВід одного до п'яти:</ P\u003e <ol\u003e <li\u003eперший</ Li\u003e <li\u003eдругий</ Li\u003e <li\u003eтретій</ Li\u003e <li\u003eчетвертий</ Li\u003e <li\u003eп'ятий</ Li\u003e </ Ol\u003e </ Body\u003e </ Html\u003e

   Таким чином виглядає нумерований список з стандартними настройками в браузері:

   Мал. 2.1. Нумерований список в браузері за стандартних параметрів

   Як і у його попередника (маркованого списку) у нього є свої стилі для виводу чисел. Звичайна нумерація - це не єдиний вид маркерів у нумерованого списку в HTML.

   2.1 Стандартні маркери для нумерованого списку

   Тут у нас є вибір не з трьох видів маркерів, а з п'яти:

   Назва маркера	Значення атрибута "type"	приклад списку
   Маркери у вигляді арабських чисел	1	бадмінтон бейсбол
   Маркери у вигляді малих латинських букв	a	Джомолунгма Чогорі Канченджанґа
   Маркери у вигляді заголовних латинських букв	A	Summit Plummet Tantrum Alley Insano
   Маркери у вигляді римських цифр в нижньому регістрі	i	Філіппінське море Аравійське море коралове море
   Маркери у вигляді римських цифр у верхньому регістрі	I	червоний зелений синій

   2.2 Своя нумерація в списку HTML

   Крім звичайного виведення нумерованого списку ми також можемо почати свою нумерацію з будь-цифри. Для цього необхідно задати додатковий атрибут "start". Така нумерація працює на всіх видах маркерів у нумерованих списків. Як це виглядає на практиці:

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

   <html\u003e <head\u003e <title\u003eДовільна нумерація для нумерованого списку</ Title\u003e </ Head\u003e <body\u003e <p\u003eПочинаємо нумерацію з дванадцяти:</ P\u003e <ol type \u003d "a" start \u003d "12"\u003e <li\u003eдванадцять</ Li\u003e <li\u003eтринадцять</ Li\u003e <li\u003eЧотирнадцять</ Li\u003e <li\u003eп'ятнадцять</ Li\u003e <li\u003eШістнадцять</ Li\u003e </ Ol\u003e </ Body\u003e </ Html\u003e

   Ось як це буде відображатися на реальному сайті:

   Мал. 2.2. Нумерація з довільного числа в нумерованому списку

   На зображенні вище ми пронумерували список починаючи з дванадцяти, при цьому зробили маркери у вигляді малих латинських букв. Зараз, я думаю, стало зрозуміло як використовувати дані атрибути в своїх проектах.

   Ну а зараз перейдемо до вкладених списків HTML.

   3. Як зробити багаторівневий (вкладений) список в HTML

   Багаторівневі списки використовуються на сайті в побудові меню. Це меню найчастіше виглядає випадає або вниз (урок по), або випадає вліво або вправо. Такі меню дозволяють зберігати в собі інші елементи меню в компактному вигляді.

   На прикладі моделей автомобілів ми побудуємо багаторівневий список в HTML:

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

   <html\u003e <head\u003e <title\u003eВкладений маркований список HTML</ Title\u003e </ Head\u003e <body\u003e <ul\u003e <li\u003eCitroen<ul\u003e <li\u003eBerlingo</ Li\u003e <li\u003eC1</ Li\u003e <li\u003eC2</ Li\u003e <li\u003eC3 Picasso</ Li\u003e <li\u003eC4 Grand Picasso</ Li\u003e </ Ul\u003e </ Li\u003e <li\u003eKIA</ Li\u003e <li\u003eToyota</ Li\u003e <li\u003eAudi</ Li\u003e <li\u003eLexus</ Li\u003e </ Ul\u003e </ Body\u003e </ Html\u003e

   Зверніть увагу, як виглядає багаторівневий список в браузері:

   Мал. 3.1. Приклад багаторівневого списку в HTML

   Ми робили багаторівневий список за допомогою маркованого (тег

   ). Багаторівневий список з моделями Citroen з'явився з іншими маркерами. Основний список з зафарбованими маркерами, а список на 2-му рівні - з порожніми кружками. Але, як пам'ятаєте, за допомогою атрибута "type" ми можемо перевизначити маркери (краще ставити).

   Але ми можемо об'єднати багаторівневі списки з нумерований і маркованими наступним чином:

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

   <html\u003e <head\u003e <title\u003eНумеровані, маркіровані та багаторівневі списки в HTML</ Title\u003e </ Head\u003e <body\u003e <ul\u003e <li\u003eПерша група тюльпанів<ol\u003e <li\u003eПерший клас<ul\u003e <li\u003eПрості ранні тюльпани</ Li\u003e </ Ul\u003e </ Li\u003e <li\u003eДругий клас<ul\u003e <li\u003eмахрові тюльпани</ Li\u003e </ Ul\u003e </ Li\u003e </ Ol\u003e </ Li\u003e </ Ul\u003e </ Body\u003e </ Html\u003e

   В наведеному вище прикладі у нас подвійна вкладеність (2 рівня). Спочатку вкладається список з двох класів тюльпанів, він у нас нумерований. Потім в кожен з елементів нумерованого списку вкладається маркований список.

   Дивимося його вид в браузері:

   Мал. 3.2. Приклад багаторівневого нумерованого списку в маркований список в браузері

   4. Корисні матеріали за списками HTML

   Тут знаходиться інформація, для якої необхідне розуміння властивостей CSS. Для цього рекомендую вивчити наступні уроки:. Всі приклади будуть відразу з вихідним кодом і розбиті по вкладках HTML (структура), CSS (стилі) і Result (результат).

   4.1 Як зробити список HTML в рядок

   Зробити список HTML в рядок може знадобитися при створенні горизонтального меню. Зробити його дуже просто:

   4.2 Як зробити список HTML без значка

   За це відповідає властивість list-style-type в CSS (докладніше):

   4.3 Як зробити список в HTML по центру

   Приклад - це блоковий елемент, Тому по центру його необхідно вирівнювати за допомогою зовнішніх відступів. Але є один важливий момент - ми повинні явно вказати ширину, щоб вирівнювання спрацювало:

   4.4 Як зробити список в HTML з картинками

   Досить лише одного властивості CSS list-style-image. Усередині url вказати адресу до іконки. Хочу лише зауважити, що зображення краще відразу підбирати маленьке, тому що від нього залежить висота рядка списку:

   4.5 Маркований список HTML свій маркер

   В цьому випадку необхідно заздалегідь підключити шрифтові іконки (наприклад, FontAwesome). Тоді можна зробити будь-яку іконку замість стандартного маркера:

   4.6 Як зробити список в HTML в декілька стовпців

   Щоб зробити список в декілька стовпців ми скористаємося властивістю CSS column-count (властивість підтримується тільки в наступних браузерах: IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5 +). Також необхідно задати висоту для списку, щоб побачити розбиття на декілька стовпців:

   5. Комбінований список HTML

   Щоб зробити комбінований список в HTML краще всього використовувати іконочние шрифти. Наприклад, Flaticon або Fontawesome.

   Ця інформація вже для просунутих, тому для початку необхідно буде.

   6. Практика роботи зі списками

   На відео нижче ви можете побачити всю роботу зі списками HTML на практиці:

   Щоб закріпити отриману інформацію, я рекомендую всі дії виконати вручну. Спробувати різні маркери для списків, створити нумеровані списки, а після перейти до багаторівневим (вкладеним) списками і поекспериментувати з ними.

   На цьому зі списками закінчуємо і переходите до наступного уроку по зображеннях.

   Якщо вам потрібно більше, ніж просто основи сайтобудування, а хочете освоїти професію Front-end розробника, То зверніть увагу на курс від онлайн-школу Нетологія - «» і онлайн-школу Skillbox і курс ««.

   Курс триває довго, але знання ви отримаєте структуровані, з якими можна відразу влаштується на роботу, якщо вам цікаво цей напрям.