Як у html змінити стиль нумерації. Правильна нумерація у вкладених нумерованих списках HTML за допомогою CSS. Вкладені списки з автоматичною нумерацією

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

арабські цифри (1, 2, 3, ...);
арабські цифри з нулем попереду цифр менше десяти (01, 02, 03, ...,10);
великі латинські літери (А, В, С, ...);
малі латинські літери (а, b, с, ...);
римські цифри в верхньому регістрі(I, II, III, ...);
римські цифри у нижньому регістрі (i, ii, iii, ...);
вірменська нумерація;
грузинська нумерація.

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

Нумерація списку

Допускається починати список із будь-якого номера; для цієї мети застосовується атрибут start елемента

. Як значення вказується будь-яке ціле додатне число. При цьому неважливо, який тип нумерації встановлений, навіть як список використовуються латинські літери. Якщо одночасно для списку застосовуються атрибути start і value , останній має більшу перевагу, і нумерація відображається з числа, вказаного value , як показано в прикладі 1.

Приклад 1. Зміна нумерації списку

Списки

Слід ретельно подбати про своє робоче місце.
Освітлення в приміщенні відрегулювати таким чином, щоб джерело світла знаходилося збоку або позаду оператора.
Для уникнення медичних ускладнень стілець рекомендується вибирати з м'яким сидінням.

Перший елемент списку в даному прикладі буде починатися з римської цифри IV, оскільки вказано атрибут start = "4", потім йде номер V, а останній елемент слідує не по порядку і призначається номером X (рис. 1).

Мал. 1. Римські цифри у списку

Написання чисел

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

Мал. 2. Вид нумерованого списку зі дужкою

Стилі дозволяють поміняти вид нумерації списків за допомогою властивостей content та counter-increment. Спочатку для селектора ol потрібно встановити counter-reset : item , це потрібно для того, щоб нумерація в кожному новому списку починалася заново. В іншому випадку нумерація буде продовжена і замість 1,2,3 можна буде побачити 5,6,7. Значення item – це унікальний ідентифікатор лічильника, ми його вибираємо самі. Далі необхідно сховати вихідні маркери через стильову властивість list-style-type зі значенням none.

Властивість content, як правило, працює у поєднанні з псевдоелементами :: after і :: before. Так конструкція li::before говорить про те, що перед кожним елементом списку необхідно додати якийсь зміст (приклад 2).

Приклад 2. Створення власної нумерації

Li:: before (content: counter(item) ")"; /* Додаємо до числа дужку */ counter-increment: item; /* Задаємо ім'я лічильника */ )

Властивість content із значенням counter(item) виводить число; додаючи дужку, як показано в даному прикладі, отримаємо необхідний вид нумерації. counter-increment необхідний збільшення номера списку на одиницю. Зверніть увагу, що скрізь використовується той самий ідентифікатор з ім'ям item . Остаточний код показаний у прикладі 3.

Приклад 3. Зміна вигляду списку

Списки

Перший
Другий
Третій
Четвертий

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

Content: "[" counter(item) "] ";

Список із російськими літерами

Нумерований список є з латинськими літерами, а ось російських літер для списку немає. Їх можна додати штучно, скориставшись наведеним вище прийомом. Оскільки нумерація виробляється через стилі, сам список залишається вихідним, до нього лише додається обраний клас, назвемо його cyrilic (приклад 4).

Приклад 4. Код створення списку

Один
Два
Три

Додавання літер здійснюється за допомогою псевдоелементу :: before та властивості content. Оскільки у кожному рядку має бути своя буква, скористаємося псевдокласом :nth-child(1) , у дужках пишеться номер букви. Першою літерою, природно, йде А, другою - Б, третьою - В і т. д. Весь цей набір додається до селектора наступним чином (приклад 5).

Приклад 5. Застосування псевдокласу: nth-child

Cyrilic li:nth-child(1)::before (content: "а)"; ) .cyrilic li:nth-child(2)::before (content: "б)"; ) .cyrilic li:nth-child(3)::before ( content: "в)"; )

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

Остаточно налаштовуємо вирівнювання та положення літер, за бажанням вказуємо розмір шрифту, колір та інші параметри (приклад 6).

Приклад 6. Список із російськими літерами

перелік

Борщ
Котлети із щуки
Кулеб'яка
Гриби у сметані
Млинці з ікрою
Квас

Результат цього прикладу показано на рис. 3.

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

, як показано нижче.

Перший пункт
Другий пункт
Третій пункт

Якщо не вказувати додаткових атрибутів і просто написати тег

Приклад 11.3. Створення нумерованого списку

Нумерований список

Робота з часом

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

Результат цього прикладу показано на рис. 11.3.

Мал. 11.3. Вигляд нумерованого списку

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

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

арабські числа (1, 2, 3, ...);
великі латинські літери (A, B, C, ...);
малі латинські літери (a, b, c, ...);
великі римські числа (I, II, III, ...);
малі римські числа (i, ii, iii, ...).

Для вказівки типу нумерованого списку застосовується атрибут type тега

Тип списку	Код HTML	приклад
Арабські числа		1. Чебурашка 2. Крокодил Гена 3. Шапокляк
Великі літери латинського алфавіту		A. Чебурашка B. Крокодил Гена C. Шапокляк
Рядкові літери латинського алфавіту		a. Чебурашка b. Крокодил Гена c. Шапокляк
Римські числа у верхньому регістрі		I. Чебурашка ІІ. Крокодил Гена ІІІ. Шапокляк
Римські числа у нижньому регістрі		i. Чебурашка ii. Крокодил Гена iii. Шапокляк

Щоб почати список із певного значення, використовується атрибут start тега

Приклад 11.4. Нумерація списку

Римські числа

Король Магнум XLIV
Король Зігфрід XVI
Король Сигізмунд XXI
Король Хусбрандт I

Результат цього прикладу показано на рис. 11.4.

Мал. 11.4. Нумерований список із римськими числами

Для списків, про створення яких засобами 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, проте на практиці ці та подібні до них значення використовуються вкрай рідко.

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

<a href="https://128gb.ru/uk/oformlenie-spiskov-list-style-pravila-css-dlya-nastroiki-vneshnego-vida-spiska-na-html.html">Списки CSS</a>

Перший пункт
Другий пункт
Третій пункт

Перший пункт
Другий пункт
Третій пункт

Перший пункт
Другий пункт
Третій пункт

Результат.

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

list-style-image

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

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

list-style-position

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

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

list-style-position

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

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

list-style

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

Ul ( list-style: square inside; )

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

HTML-код наведено нижче.

list-style

Перший пункт
Другий пункт
Третій пункт

Перший пункт
Другий пункт
Третій пункт

Перший пункт
Другий пункт
Третій пункт

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

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

У 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 тощо?

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

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

Автоматична нумерація в CSS

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

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

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

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

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

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

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

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

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

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

Результат:

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

Від автора:Веб-браузери дозволяють вам змінити зовнішній виглядбагатьох елементів на сторінці з допомогою CSS. Але при відображенні деяких елементів на сторінці, браузери вперто не хочуть змінювати їхнє оформлення. Наприклад, такі елементи форми, як списки (select), радіокнопки (radio) і чекбокси (checkbox) мають свій певний зовнішній вигляд у кожній операційній системі, та браузери намагаються нав'язати цей вид для веб-форм.

Веб-браузери також вказують, яким чином мають відображатися ненумеровані та нумеровані списки. Наприклад, через браузер дуже складно змінити зовнішній вигляд маркерів у ненумерованих списків і чисел у нумерованих списків. Звичайно, існує кілька CSS властивостей для роботи зі списками, наприклад, list-style-type, list-style-image та list-style-position. Але навіть для того, щоб зробити щось просте (наприклад, змінити колір у чисел списку), потрібно вдатися до витончених обхідних шляхів HTML/CSS.

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

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

1. Додаємо клас або ідентифікатор (ID) для нумерованого списку. Це хороша ідея, яка дозволяє вам ідентифікувати надалі кожен список, для якого ви захочете створити свої лічильники:

Це перший елемент
Це другий елемент
Це третій елемент
Це четвертий елемент
Це п'ятий елемент
Це шостий елемент

< ol class = "custom-counter" >

< / ol >

Якщо ви просто будете використовувати селектори тегів, наприклад, ol або li, то, зрештою, у вас будуть однакові, з тим самим зовнішнім оформленням, лічильники для всіх нумерованих списків на сторінці.

2. Скасуємо вигляд у маркера списку за замовчуванням. Спочатку, вам потрібно переконатися, що браузер не буде додавати стандартне оформлення для лічильників. Зробити це вам допоможе таке правило:

Custom-counter ( margin-left: 0; padding-right: 0; list-style-type: none; )

Custom - counter (

margin-left: 0;

padding-right: 0;

list-style-type: none;

Це правило також видаляє відступ, який браузери додають на початку нумерованих списків. Оскільки деякі браузери використовують для відступів властивість margin, а інші – padding, вам необхідно обнулити обидві ці властивості.

3. Введіть ім'я для властивості counter-increment у елементів списку. У CSS є властивість, яка називається counter-increment. Воно дозволяє встановити ім'я для вашого лічильника. Це не дає нам нічого особливого, за винятком того, що ми зможемо ідентифікувати наш лічильник при використанні псевдо-елемента::before (що ми зробимо в наступному кроці). Ось простий приклад коду для вказівки імені лічильника:

Custom-counter li ( counter-increment: step-counter; )

Custom - counter li (

counter-increment: step-counter;

У цьому прикладі ім'я step-counter не означає нічого особливого. Воно не є ні значенням для CSS властивості, ні чимось іншим. Це просто ім'я, яке ми будемо використовувати надалі. Ви можете придумати будь-яке ім'я: step, counter, або навіть bottles-of-root-beer-on-the-wall (прим. пров.: пляшки з-під рутбіру (пиво з коренеплодів) на стіні).

4. Використовуйте псевдо-елемент::before для додавання чисел лічильника та їх стилізації:

Custom-counter li::before ( content: counter(step-counter); margin-right: 5px; font-size: 80%; background-color: rgb(200,200,200); color: white; font-weight: bold; padding : 3px 8px; border-radius: 3px;

Custom - counter li :: before (

content: counter (step-counter);

margin - right : 5px ;

padding: 3px 8px;

border-radius: 3px;

Псевдо-елемент ::before дозволяє вам вставити контент перед елементом. У разі він вставить контент перед елементом списку. Ви використовуєте CSS властивість content, щоб повідомити браузеру, який контент він має помістити на початок елемента списку. Це можуть бути реальні слова або щось автоматично згенероване браузером.

Тут ми використовуємо значення counter(), яке використовує як параметр ідентифікатор, отриманий з якості counter-increment. Пам'ятайте, що в кроці 2 ми вказали ім'я step-counter для властивості counter-increment, задавши цим ім'я для лічильника і повідомляючи браузеру про те, що потрібно використовувати лічильник для кожного елемента списку. Лічильник буде збільшуватися на одиницю кожного елемента списку, тобто. у результаті з'явиться число 1 перед першим елементом списку, число 2 перед другим елементом списку тощо.

Звичайно, зазвичай браузери так і роблять. Однак, використовуючи псевдо-елемент::before ми також можемо встановити стильове оформлення для цих чисел, що було б неможливо для стандартних нумерованих елементів списку. По суті, всі інші властивості у наведеному вище правилі використовуються для того, щоб просто створити класний зовнішній вигляд для лічильника (наприклад, фоновий колір, закруглені кути, інший колір шрифту і т.д.). Ці стилі демонструють лише деякі способи зміни зовнішнього оформлення чисел у нумерованих списків. А ви можете зробити ще більше, тому не соромтеся використовувати відомі вам CSS прийоми, щоб створити цікаві, кумедні та красиві нумеровані списки.

Ви можете подивитися готовий приклад використання даної техніки на сайті