Тег ol використовується для реалізації. Стилізація номерів рядків (цифр) у впорядкованих списках ol. Гарний та правильний спосіб

Здрастуйте, шановні читачі! Сьогодні як продовження циклу статей рубрики « Основи html» я хочу познайомити вас з алгоритмом створення списків htmlза допомогою тегів ul та li (маркований список), ol та li (нумерований список), dl, dt, dd (список визначень).

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

Марковані HTML списки - теги ul та li

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

За замовчуванням зовнішній виглядмаркера є зафарбованим кружком. Однак можна змінити його зовнішній вигляд, застосувавши атрибут type, який має наступні значення: disc, circle, square. Значення disc (яке визначає зовнішній вигляд маркера як зафарбованого кружка) застосовується за замовчуванням. Тобто якщо атрибут type не прописаний, зовнішній вигляд маркера буде виглядати як зафарбований кружок. Якщо доповнити даними атрибутами тег ul, то отримаємо такі варіанти:

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

Нумеровані HTML списки - теги ol та li

Тепер подивимося, як утворюється нумерований список за допомогою тегів ol (блоковий та парний тег за аналогією з ul). Як тег, що визначає елементи нумерованого списку html, тут також виступає тег li. Нумерований список – сукупність пронумерованих елементів. Тип нумерації визначається атрибутом type, який може приймати такі значення:

• A - великі латинські букви;
• a - малі латинські літери;
• I - великі римські цифри;
• i - малі римські цифри;
• 1 – арабські цифри

Також можна забезпечити нумерований список, де нумерація елементів здійснюється у зворотному порядку, наприклад: 3, 2, 1. Це здійснюється за допомогою атрибуту reserve тега ol.

Існує також можливість розпочати маркований список не з 1, а з будь-якого іншого числа. Для цього можна скористатися атрибутом start, причому зовсім не важливе, яке значення атрибута type встановлено. Перегляньте приклад використання атрибуту name в сукупності з різними значеннями атрибута type (1 і I):

HTML списки визначень – теги dl, dd, dt

Ще один вид списків html – список визначень. Він формується в такий спосіб. Зміст цього списку полягає між відкриваючим та закриваючим тегами dl, які утворюють контейнер. Тег dt визначає якийсь термін, а dd - опис цього терміна.

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

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

У мові розмітки гіпертексту HTML є тег

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

Синтаксис тега

• Елемент #1
• Елемент #2
• Елемент #3
• ...

Цей код перетворюється на маркований список на сайті:

• Елемент #1
• Елемент #2
• Елемент #3

Тег

вимагає обов'язкового використання тега, що закриває
.

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

Що може бути вмістом маркованого списку?

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

Кожен елемент маркованого списку відступає за замовчуванням на 40 пікселів праворуч. Використовуючи стилі CSS, ми можемо змінити відображення даного спискуна свій розсуд. Тег

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

Наприклад

• Елемент #1
• • Елемент #2-1
  • Елемент #2-2
  • Елемент #2-3
• Елемент #3
• ...

Атрибути та властивості тега

Широко поширеним атрибутом тега

є атрибут type , що вказує на те, як виглядатиме маркер списку. Може приймати такі значення

1. type="disc" - маркер у вигляді зафарбованого кружка (це значення стоїть за замовчуванням). Приклад із диском був трохи вищим.

2. type="circle" - маркер у вигляді прозорого кружка

Наприклад:

• Елемент #1
• Елемент #2

• Елемент #1
• Елемент #2

3. type="square" - маркер у вигляді квадратика

Наприклад:

• Елемент #1
• Елемент #2

А ось як це виглядає на сторінці:

• Елемент #1
• Елемент #2
Примітка 1

У CSS тип маркера визначається за допомогою атрибуту list-style-type :

• ...

Розглянемо які значення може набувати list-style-type :

• disc - маркер у вигляді гуртка (приклад був вищим)
• circle - маркер у вигляді прозорого кружка (приклад був вищим)
• square - маркер у вигляді квадратика (приклад був вищим)
• decimal - маркер у вигляді нумеренного списку арабськими цифрами: 1, 2, 3, ...
• decimal-leading-zero - маркер у вигляді нумеренного списку арабськими цифрами з нулем на початку: 01, 02, 03, ...
• lower-roman - маркер у вигляді нумеренного списку римським алфавітом маленькими літерами: i, ii, iii, iv, v
• upper-roman - маркер у вигляді нумеренного списку римським алфавітом великими літерами: I, II, III, IV, V
• lower-latin - маркер у вигляді списку латинським алфавітом маленькими літерами: a, b, c, d, ...
• upper-latin - маркер у вигляді списку латинським алфавітом великими літерами: A, B, C, D, ...
• lower-greek - маркер у вигляді списку грецьким алфавітом маленькими літерами
• upper-greek - маркер у вигляді списку грецьким алфавітом великими літерами
Примітка 2

Атрибут можна призначити як самому тегу

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

  Код при цьому виглядає так:

  • Елемент #1
  • Елемент #2
  • Елемент #3

  • Елемент #1
  • Елемент #2
  • Елемент #3

  Зміна маркерів тега

  за допомогою CSS

  Елементи маркованого списку, створювані тегом

  , можуть маркуватися довільними зображеннями. Для зміни типу маркера використовується CSS. Наприклад

  • Елемент #1
  • Елемент #2
  • Елемент #3

  А так це виглядає на сторінці:

  • Елемент #1
  • Елемент #2
  • Елемент #3

  C допомогою CSSми можемо встановити й інші типи відображення маркерів. Але слід пам'ятати, що при заданні будь-якого стилю тегу

  він поширюється на всі елементи списку.

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

  Синтаксис тега

  1. Елемент #1
  2. Елемент #2
  3. Елемент #3
  4. ...

  Де атрибут type="value" може приймати такі значення

  • A – задає маркери у вигляді великих латинських літер (A, B, C..);
  • a - задає маркери у вигляді малих латинських літер (a, b, c.);
  • I – задає маркери у вигляді великих римських цифр (I, II, III, IV..);
  • i - задає маркери як маленьких римських цифр (i, ii, iii, iv..);
  • 1 (за замовчуванням) – задає маркери у вигляді арабських цифр (1, 2, 3..);

  Атрибут start="value" визначає початкове значення (стартове значення) звіту.

  Атрибут reversed задає зворотний рахунок (у разі потреби).

  Тег

  вимагає обов'язкового використання тега, що закриває

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

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

    Примітка

    У списку є можливість змінювати рахунок на свій. Для цього є спеціальний атрибут value="" у тега

  • , якому надається якесь числове значення. Наприклад

    1. Елемент #1
    10. Елемент #2
    11. Елемент #3

  Приклади з нумерованими списками в html (

  )

  Приклад 1. Нумерований список HTML у вигляді латинських букв

  Приклад із великими літерами

  1. Елемент #1
  2. Елемент #2
  3. Елемент #3

  1. Елемент #1
  2. Елемент #2
  3. Елемент #3

  Приклад із малими літерами

  1. Елемент #10
  2. Елемент #11
  3. Елемент #12

  Ось як це виглядає на сторінці:

  1. Елемент #1
  2. Елемент #2
  3. Елемент #3

  Приклад 2. Нумерований список HTML у вигляді римських букв

  Приклад із великими літерами

  1. Елемент #1
  2. Елемент #2
  3. Елемент #3

  Ось як це виглядає на сторінці:

  1. Елемент #1
  2. Елемент #2
  3. Елемент #3

  Приклад із малими літерами

  1. Елемент #1
  2. Елемент #2
  3. Елемент #3

  Ось як це виглядає на сторінці:

  1. Елемент #1
  2. Елемент #2
  3. Елемент #3

  Приклад 3. Нумерований список html різна позиція старту

  Приклад, який показує можливості атрибута start, що дозволяє задавати стартове значення лічильника.

  50. Елемент #1
  51. Елемент #2
  52. Елемент #3

  Ось як це виглядає на сторінці:

  1. Елемент #1
  2. Елемент #2
  3. Елемент #3

  Приклад 4. Зміна рахунку в списках нумерованих html

  Нижче наведено приклад з можливістю змінювати значення лічильника за допомогою атрибуту value при виведенні нових елементів у тегах

  • .

    10. Елемент #1
    11. Елемент #2
    100. Елемент #3
    101. Елемент #4

    Ось як це виглядає на сторінці:

    1. Елемент #1
    2. Елемент #2
    3. Елемент #3
    4. Елемент #4

    Приклад 5. Реверсивний нумерований список у html

    Нижче наведено приклад нумерованого реверсивного списку (рахунок у зворотному порядку).

    10. Елемент #1
    11. Елемент #2
    12. Елемент #3
    13. Елемент #4

    Ось як це виглядає на сторінці:

    1. Елемент #1
    2. Елемент #2
    3. Елемент #3
    4. Елемент #4
    Якщо вирішили змінити стандартні списки ul і li, це тема вам буде цікаво. Бо тут дізнаєтесь про кілька оригінальних рішень. Які вам, безумовно, допоможуть змінити стандартний виглядна унікальну, де йде стилістика CSS, для оформлення списків. Плюс у тому, що ми будемо використовувати у всьому лише один клас, який кардинально змінить вигляд. На додаток до цих параметрів, ви можете вказати, на якому номері повинен починатися список, тут все можна зробити самостійно. Початкове значення за промовчанням для пронумерованих списків знаходиться на першому або літера A.

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

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

    Також потрібно знати, що списки спочатку містять кілька елементів:

    1 . Невпорядкована інформація.
    2 . Впорядкована інформація.
    3 . Визначення.

    Приступаємо до встановлення:

    1 варіант:

    
    
    • Елемент списку
    
    
    • Унікальний список
    
    
    • Оригінальні списки
    
    
    • ZORNET.RU - Вебмайстру
    
    
    • Ще один список
    
    
    
    CSS

    Ksangelopan (
    margin: 19px 00;
    padding:0;
    list-style: none;
    counter-reset: li;
    }
    .ksangelopan li (
    border: 2px solid #3575ad;
    background: #d7dee4;
    position: relative;
    margin-bottom: 17px;
    padding: 15px 9px;
    }
    .ksangelopan li:hover (
    z-index: 1;
    }
    .ksangelopan li:before (
    border: 2px solid #2270b3;
    position: absolute;
    top: -14px;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: bold;
    color: #246eaf;
    background: #f2f4f7;
    counter-increment: li;
    content: counter(li);
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    }
    .ksangelopan li:hover:before (
    background: #2672b3;
    color: #f7f9fb;
    -webkit-transform: translate(-11px, 0);
    -ms-transform: translate(-11px, 0);
    -o-transform: translate(-11px, 0);
    transform: translate(-11px, 0);
    }
    .ksangelopan li:after (
    content: "";
    position: absolute;
    transition-duration: 0.3s;
    -webkit-transition-property: width;
    transition-property: width;
    z-index: -1;
    background: #FFF;
    height: 100%;
    left: 0;
    top: 0;
    width: 0;
    }
    .ksangelopan li:hover:after (
    width: 100%;
    }

    
    На цьому вся установка.

    2 Другий варіант:

    

    
    
    • Елемент списку
    
    
    • Унікальний список
    
    
    • Оригінальні списки
    
    
    • ZORNET.RU - Вебмайстру
    
    
    • Ще один список
    
    
    
    CSS

    Біле uzlopamges (
    margin-bottom: 8px;
    padding:0;
    list-style: none;
    counter-reset: li;
    }
    .beleduzlopamges li (
    position: relative;
    border: 2px solid #195588;
    background: #eff3f7;
    padding: 15px 19px 15px 27px;
    margin: 12px 0 12px 40px;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    }
    .beleduzlopamges li:hover (
    background: #FFF;
    }
    .beleduzlopamges li:before (
    line-height: 32px;
    position: absolute;
    top: 4px;
    left: -39px;
    width: 39px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #f9f5f5;
    background: #275b88;
    counter-increment: li;
    content: counter(li);
    transition-duration: 0.2s;
    }
    .beleduzlopamges li:hover:before (
    width:46px;
    }
    .beleduzlopamges li:after (
    position: absolute;
    left: 0;
    top: 4px;
    content: "";
    height: 0;
    width: 0;
    border: 16px solid transparent;
    border-left-color: #275b88;
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
    }
    .beleduzlopamges li:hover:after (
    margin-left: 6px;
    }

    
    Центрову гаму можна самостійно виставити під основний стиль сайту.

    3 Третій варіант:

    

    
    
    • Скрипти для uCoz
    
    
    • Шаблони для uCoz
    
    
    • Дизайн для сайту
    
    
    • Стилі для сайту
    
    
    • Стилістика на CSS
    
    
    
    CSS

    Nizualisanelag (
    padding:0;
    list-style: none;
    counter-reset: li;
    }
    .nizualisanelag li (
    position: relative;
    padding: 9px 17px 17px 25px;
    margin-left: 39px;
    transition-duration: 0.2s;
    cursor: pointer;
    font-weight: bold;
    color: #343638;
    }
    .nizualisanelag li:before (
    border: 3px solid transparent;
    line-height: 35px;
    position: absolute;
    top: 0;
    left:-29px;
    width:41px;
    text-align:center;
    font-size: 14px;
    font-weight: bold;
    color: #619dce;
    counter-increment: li;
    content: counter(li);
    transition-duration: 0.3s;
    
    box-sizing: border-box;
    }
    .nizualisanelag li:hover:before (
    color: #337AB7;
    }
    .nizualisanelag li:after (
    position: absolute;
    top: 0;
    left: -29px;
    width: 41px;
    height: 41px;
    border: 5px solid #468bd0;
    border-radius: 50%;
    content: "";
    opacity: 0.5;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }
    .nizualisanelag li:hover:after (
    animation: 500ms ease-in-out 0s bounceIn;
    opacity: 1;
    }

    @keyframes bounceIn (
    0% {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
    }
    20% {
    transform: scale3d(1.3, 1.3, 1.3);
    }
    40% {
    transform: scale3d(.9, .9, .9);
    }
    60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
    transform: scale3d(.97, .97, .97);
    }
    to (
    opacity: 1;
    transform: scale3d(1, 1, 1);
    }
    }

    
    Йде з гарною анімацією.

    4 Четвертий варіант:

    

    
    
    • Перший елемент для сайту
    
    
    • Другий елемент для сайту
    
    
    • Третій елемент для сайту
    
    
    • Четвертий елемент для сайту
    
    
    • П'ятий елемент для сайту
    
    
    
    CSS

    Padding:0;
    list-style: none;
    }
    .kudezamuden li(
    padding:6px;
    }
    .kudezamuden li:before (
    padding-right: 11px;
    font-weight: bold;
    color: #4979a0;
    content: "\2606";
    transition-duration: 0.4s;
    }
    .kudezamuden li:hover:before (
    color: #235e90;
    content: "\2605";
    }

    
    Аналогічний попередньої версійтільки сам значок змінено.

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

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

    HTML-спискивикористовуються для угруповання пов'язаних між собою фрагментів інформації. Існує три види списків:

    маркований список —

    - Кожен елемент списку
    • відзначається маркером,
      нумерований список —
      - Кожен елемент списку
      1. відзначається цифрою,
         список визначень— складається з пар термін
         —
         визначення.

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

         Створення HTML-списків

         1. Маркований список

         Маркований списокє невпорядкованим списком (Від англ. Unordered List). Створюється за допомогою парного тегу

         . Як маркер елемента списку виступає мітка, наприклад, зафарбований кружок.

         За замовчуванням браузери додають наступне форматування блоку списку:

         Кожен елемент списку створюється за допомогою парного тега

      2. (Від англ. List Item).
      доступні.
      • Microsoft
      • Google
      • Apple
      Мал. 1. Маркований список

      2. Нумерований перелік

      Нумерований списокстворюється за допомогою парного тега. Кожен пункт списку також створюється за допомогою елемента

    • . Браузер нумерує елементи по порядку автоматично і якщо видалити один або кілька елементів такого списку, інші номери будуть автоматично перераховані.

      Блок списку також має стилі браузера за промовчанням:

    • доступний атрибут value , який дозволяє змінити стандартний номер для вибраного елемента списку. Наприклад, якщо для першого пункту списку встановити
    • , то решта нумерації буде перерахована щодо нового значення.

      Для тега

      доступні такі атрибути:
      Таблиця 1. Атрибути тега

      Атрибут	Опис, прийняте значення
      reversed	Атрибут reversed задає відображення списку у зворотному порядку (наприклад, 9, 8, 7…).
      start	Атрибут start визначає початкове значення, від якого піде відлік нумерації, наприклад, конструкція першому пункту надасть порядковий номер «10». Також можна одночасно задавати тип нумерації, наприклад, .
      type	Атрибут type задає вид маркера для використання у списку (у вигляді букв або цифр). Значення, що приймаються: 1 — значення за промовчанням, десяткова нумерація. A - нумерація списку в алфавітному порядку, великі літери (A, B, C, D). a - нумерація списку в алфавітному порядку, малі літери (a, b, c, d). I - нумерація римськими великими цифрами (I, II, III, IV). i - нумерація римськими малими цифрами (i, ii, iii, iv).

      1. Microsoft
      2. Google
      3. Apple
      Мал. 2. Нумерований перелік

      3. Список визначень

      Списки визначеньстворюються за допомогою тега

      . Для додавання терміна застосовується тег
      , а для вставки визначення - тег
      .

      Блок списку визначень має такі стилі браузера за промовчанням:

      Для тегів

      ,

      і

      доступні.

      Режисер:

      Петро Точилін

      В ролях:

      Андрій Гайдулян

      Олексій Гаврилов

      Віталій Гогунський

      Марія Кожевнікова

      
      Мал. 3. Список визначень

      4. Вкладений список

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

      • Пункт 1.
      • Пункт 2.
        • Підпункт 2.1.
        • Підпункт 2.2.
          • Підпункт 2.2.1.
          • Підпункт 2.2.2.
        • Підпункт 2.3.
      • Пункт 3.

      
      Мал. 4. Вкладений список

      5. Багаторівневий нумерований список

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

      1. пункт
      2. пункт
         1. пункт
         2. пункт
         3. пункт
            1. пункт
            2. пункт
            3. пункт
         4. пункт
      3. пункт
      4. пункт

      Така стандартна розмітка створить для кожного вкладеного списку нову нумерацію, що починається з одиниці. Щоб створити вкладену нумерацію, необхідно використовувати такі характеристики:
      counter-reset скидає один або кілька лічильників, задаючи значення для скидання;
      counter-increment задає значення збільшення лічильника, тобто. з яким кроком нумеруватиметься кожен наступний пункт;
      content — вміст, що генерується, в даному випадку відповідає за виведення номера перед кожним пунктом списку.

      Ol ( /* прибираємо стандартну нумерацію */ list-style: none; /* Ідентифікуємо лічильник і даємо йому ім'я li. Значення лічильника не вказано - за умовчанням воно дорівнює 0 */ counter-reset: li; ) li:before ( /* Визначаємо елемент, який нумеруватиметься - li.. Псевдоелемент before вказує, що вміст, що вставляється за допомогою властивості content, буде розташовуватися перед пунктами списку. * За допомогою властивості content виводиться номер пункту списку counters() означає, що генерований текст являє собою значення всіх лічильників з таким ім'ям. counters(li,".") ". ";
      Мал. 5. Багаторівневий нумерований список