Як зробити нумерований список у CSS. Оформлення списків у CSS. Марковані списки в HTML

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

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

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

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

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

1. Це перший елемент
2. Це другий елемент
3. Це третій елемент
4. Це четвертий елемент
5. Це п'ятий елемент
6. Це шостий елемент

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

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

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; )

У цьому прикладі ім'я 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;

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

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

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

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

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

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

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

, який застосовується для створення списку. Кожен пункт нумерованого списку позначається тегом
1. , як показано нижче.
   1. Перший пункт
   2. Другий пункт
   3. Третій пункт

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

   , то за замовчуванням застосовується список арабськими числами (1, 2, 3,...), як показано у прикладі 11.3.

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

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

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

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

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

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

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

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

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

   . Його можливі значення наведено у табл. 11.2.
   Табл. 11.2. Типи нумерованого списку

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

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

   . При цьому немає значення, який тип списку встановлений за допомогою type , атрибут start однаково працює і з римськими і з арабськими числами. У прикладі 11.4 показано створення списку з використанням римських цифр у верхньому регістрі, що починаються з восьми.

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

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

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

   

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

   
   

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

   У 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-го пункту
   
   

   
   

   Результат:

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

   Якщо ви коли-небудь намагалися змінювати css-стилі номерів рядків (цифр) в упорядкованих списках

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

   Ось найпростіший приклад нестилізованого списку:

   html

   1. Посадити дерево
   2. Збудувати дім
   3. Виростити сина

   Давайте розморимо кілька способів розв'язання вищеописаного завдання.

   Традиційно незграбний спосіб.

   Традиційний спосіб вирішення цієї проблеми зводиться до того, щоб приховати номери рядків автоматично розставлені браузером. У цьому використовується властивість list-style: none; .

   css

   li( list-style: none; ) .num( color: white; background: #2980B9; display: inline-block; text-align: center; margin: 5px 10px; 40px;

   html

   1. 1Посадити дерево
   2. 2Збудувати дім
   3. 3Виростити сина

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

   Давайте подивимося, як можна досягти такого ж результату, не засмічуючи верстку і використовуючи псевдоелемент::before і css-властивості content, counter-increment, counter-reset.

   Гарний та правильний спосіб.

   Спочатку ми наведемо код та демку, а потім розберемося, що до чого.

   css

   ol( counter-reset: myCounter; ) li( list-style: none; ) li:before ( counter-increment: myCounter; content:counter(myCounter); color: white; background: #2980B9; display: inline-block; text-align: center; margin: 5px 10px; line-height: 40px; width: 40px; height: 40px;

   html

   1. Посадити дерево
   2. Збудувати дім
   3. Виростити сина

   Як бачите, html-код залишається чистим та красивим. При цьому вся стилізація елементів списку переноситься до css.

   Давайте розберемо за пунктами:

   • li::before- Створює всередині списку псевдоелемент, який стає на місце першого нащадка.
   • counter-reset: myCounter;– обнулює css-лічильник myCounter всередині кожного
     .
     1. counter-increment: myCounter;– інкрементує css-лічильник myCounter для кожного псевдоелемента :: before .
     2. content:counter(myCounter);- Виводить поточне значення лічильника myCounter всередині псевдоелемента :: before .

   докладніше про css-лічильники можна подивитися в