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

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

Коли ми хочемо використати список на сайті, HTML пропонує три різні типи на вибір: маркований, нумерований та список описів. Який тип списку вибрати для використання і чи використовувати список взагалі залежить від вмісту і семантично найбільш відповідного варіанту для його відображення. CSS. Наприклад, ми можемо вибрати тип маркера для списку. Маркер може бути квадратним, круглим, числом, літерою або, можливо, бути відсутнім. Крім того, ми можемо вирішити, як повинен відображатися список по вертикалі або горизонталі. Всі ці варіанти відіграють важливу роль при стилізації наших веб-сторінок. Створення маркованого списку HTML здійснюється за допомогою блокового елемента списку <ul>. Кожен окремий пункт у списку розмічається за допомогою елемента <li>.

За замовчуванням більшість браузерів додає вертикальний margin і лівий padding до елемента <ul>, а перед кожним елементом <li> ставить однотонну точку. Ця точка називається маркером списку і може бути змінена за допомогою CSS.

<ul> <li>Помаранчевий</li> <li>Зелений</li> <li>Синій</li>
</ul>

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

Нумерований або впорядкований список елементів <ol> дуже схожий на маркований список, окремі пункти списку створюються таким же чином. Основною різницею між списками є те, що для впорядкованого списку важливий порядок представлення пунктів. data-language="html"><ol> <li>Пройдіть Абрикосовою вулицею</li> <li>Зверніть на Виноградну</li> <li>Зупиніться на Тінистій вулиці</li></ol>

У нумерованих списків також є доступні для них унікальні атрибути, включаючи start та reversed.

>

Атрибут start

Атрибут start визначає номер, з якого має починатися нумерований список. За замовчуванням, списки починаються з 1, однак можуть виникнути ситуації, коли список повинен починатися з 30 або з іншого числа. Коли ми використовуємо атрибут start для елемента <ol>, ми можемо точно визначити, з якого номера повинен починатися відлік нумерованого списку.

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

<ol start="30"> <li>Пройдіть Абрикосовою вулицею</li> <li>Зверніть на Виноградну</li> <li>Зупиніться на Тінистій вулиці</li>
</ol>

Атрибут reversed

Атрибут reversed під час додавання до елемента <ol> дозволяє списку відображатися у зворотному порядку. Список з п'яти пунктів пронумерованих від 1 до 5 може бути заданий назад і нумеруватися від 5 до 1. Атрибут reversed є логічним атрибутом і як такий він не приймає жодного значення. Він може бути істиною, або брехнею. Брехня є значенням за промовчанням, значення стає істинним, коли атрибут reversed з'являється у елемента <ol>.

<ol reversed> <li>Пройдіть Абрикосовою вулицею</li> <li>Зверніть на Виноградну</li> <li>Зупиніться на Тінистій вулиці</li>
</ol>

Атрибут value

Атрибут value може застосовуватися до окремих елементів <li> у нумерованому списку, щоб змінити його значення у списку. Номер будь-якого пункту списку, який з'являється нижче за пункт списку з атрибутом value, буде перерахований відповідно.

Як приклад, якщо у другого пункту списку атрибут value заданий як 9, номер цього пункту списку буде виводитися, наче він був дев'ятим. Всі наступні пункти списку будуть пронумеровані від 9.

<ol> <li>Пройдіть Абрикосовою вулицею</li> <li value="9">Зверніть на Виноградну</li> <li>Зупиніться на Тінистій вулиці</li>
</ol>

Списки опису

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

Створення списку опису HTML відбувається за допомогою блокового елемента <dl>. Замість використання елемента <li> для розмітки пунктів списку, список опису вимагає два блокові елементи: <dt> для терміна та <dd> для опису.

Список опису може містити безліч термінів та описів, один за одним. Крім того, такий список може містити кілька термінів одного опису, а також кілька описів термін. Один термін може мати кілька значень та допускати кілька описів. І навпаки, один опис може підходити до кількох термінів.

При додаванні списку опису елемент <dt> повинен йти до елемента <dd>. Термін та опис, який слідує за ним, пов'язані один з одним. Таким чином, порядок цих елементів має важливе значення.

За умовчанням, елемент <dl> включає вертикальні відступи, подібно до елементів <ul> та <ol>. Крім того, елемент <dd> включає за замовчуванням лівий margin.

<dl> <dt>навчання</dt> <dd>Посвята часу та уваги для отримання знань з предмета, що викладається, особливо за допомогою книг.</dd> <dt>проект</dt> <dd>Представлений план або креслення, який показує, як виглядатиме і функціонуватиме будинок, одяг або інший предмет, перш ніж він буде побудований або зроблений.</dd> <dd>Існуючи цілі, плани або наміри до їх втілення або реалізації в матеріальному об'єкті.</dd> <dt>бізнес</dt> <dt>робота</dt> <dd>Регулярні заняття людини, професія або ремесло.</dd>
</dl>

Вкладені списки

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

Трюк із вкладенням списків полягає в тому, що слід знати, де починається та закінчується кожен список та пункт списку. Говорячи конкретно про марковані та нумеровані списки, єдиним елементом, який може знаходитися безпосередньо всередині <ul> та <ol> є елемент <li>. Повторимо — єдиним елементом, який ми можемо поставити як прямий нащадок елементів <ul> і <ol>, є <li>.

Проте, всередині елемента <li> може бути доданий стандартний набір елементів, включаючи будь-які елементи <ul> або <ol>.

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

<ol> <li>Погуляти із собакою</li> <li>Скласти білизну</li> <li> Сходити в магазин і купити: <ul> <li>Молоко</li> <li>Хліб</li> <li>Сир</li>
</ul>
</li> <li>Підстригти газон</li> <li>Приготувати вечерю</li>
</ol>

Оскільки вкладені списки можуть трохи заплутати і відобразити небажані стилі, якщо вони зроблені неправильно — давайте швидко їх переглянемо. Елементи <ul> та <ol> можуть містити лише елементи <li> . Елемент <li> може містити будь-який звичайний елемент, який забажаєте. Однак елемент <li> повинен бути прямим нащадком або елемента <ul>, або <ol>.

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

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

Стилізація пунктів списку

Марковані та нумеровані списки використовують стандартні маркери пунктів списку. Для маркованих списків це, як правило, однотонні точки, у той час як для нумерованих списків зазвичай застосовуються числа. За допомогою CSS стиль і положення цих маркерів можна налаштовувати. для встановлення вмісту маркера пунктів списку. Доступні значення знаходяться в діапазоні від квадратиків і десяткових чисел до вірменської нумерації і стиль CSS може бути доданий до елементів <ul>, <ol> ; або <li>.

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

HTML

<code data-language="html"><ul> <li>Помаранчевий</li> <li>Зелений</li> <li>Синій</li>
</ul>

CSS

ul { list-style-type: square; }

Значення list-style-type

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

Значення list-style-type	Вміст
none	Немає пунктів списку
disc	Однотонний гурток
circle	Порожнє коло
square	Однотонний квадрат
decimal	Десятичні числа
decimal-leading-zero	Десятичні числа, що починаються з нуля
lower-roman	Римські числа рядкові
upper-roman	Великі римські числа
lower-greek	Рядкові грецькі числа
lower-alpha /lower-latin	Мітки латинські літери
upper-alpha /upper-latin	Великі латинські літери
armenian	Традиційна вірменська нумерація
georgian	Традиційна грузинська нумерація

Використання вання зображення як маркера списку

Можна настати час, коли значень за замовчуванням для властивості list-style-type не вистачить і ми побажаємо задати свій власний маркер списку . Найчастіше це робиться шляхом розміщення фонового зображення для кожного елемента <li>.

Процес включає видалення будь-якого значення властивості list-style-type за промовчанням та додавання фонового зображення та полів для елемента <li>.

Докладніше — значення none властивості list-style-type видаляє існуючі маркери списку. Властивість background задасть фонове зображення разом з його положенням і повтором, якщо потрібно. А властивість padding забезпечить простір ліворуч від тексту для фонової картинки.

HTML

<code data-language="html"><ul> <li>Помаранчевий</li> <li>Зелений</li> <li>Синій</li>
</ul>

CSS

li { background: url("arrow.png" ;) 0 50% no-repeat; list-style-type: none; padding-left: 12px; }

Властивість list-style-position

За замовчуванням маркери списку розміщуються зліва від вмісту в елементі <li>. Такий стиль позиціонування описується як outside, це означає, що весь вміст буде відображатися безпосередньо праворуч, поза межами маркера списку. За допомогою властивості list-style-position ми можемо змінити значення за умовчанням outside на inside або inherit.

Значення outside розміщує маркер списку ліворуч від елемента <li> і не дозволяють будь-якому вмісту обтікати нижче цей маркер. Значення inside (яке рідко використовується і можна побачити) розміщує маркер списку в першому рядку елемента <li> і дозволяє вмісту обтікати маркер за необхідності.

HTML

<code data-language="html"><ul> <li>Капкейки...</li> <li>Обсипання...</li>
</ul>

CSS

ul { list-style-position: inside; }

Універсальна властивість list-style

Властивості списку, які ми недавно обговорили, list-style-type і list-style-position, можуть бути об'єднані в одну універсальну властивість list-style. У цій властивості ми можемо використовувати одне чи всі значення властивостей списку одночасно. Порядок цих значень має бути: list-style-type, потім йде list-style-position.

ul { list-style: circle inside; } 
ol { list-style: lower-roman; }

Горизонтальне відображення списку

Іноді ми хочемо відобразити списки горизонтально, а не вертикально. Можливо, ми бажаємо розділити список на кілька стовпчиків, щоб побудувати список навігації або розмістити кілька пунктів списку в один рядок. Залежно від вмісту та бажаного вигляду є кілька способів для відображення списків у вигляді одного рядка, наприклад, шляхом прийняття значення властивості display для елементів < li> як inline або inline-block або через властивість float.

Відображення списку

Найшвидший спосіб відобразити список на одному рядку — це задати елементам <li> властивість display зі значенням inline або inline-block. Це поставить всі елементи <li> в один рядок з однаковим проміжком між кожним пунктом списку.

Якщо проміжки між елементами <li> доставляють проблеми, то вони можуть бути видалені за допомогою тих же методів, що ми обговорювали в уроці 5, «Позиціонування вмісту». class="value">inline-block замість значення inline. Значення inline-block дозволяє легко додавати вертикальні відступи та інший простір до елементів <li>, тоді як значення inline немає.

При зміні значення властивості display на inline або inline-block, маркер списку, будь то точка, число або інше, видаляється.

HTML

<code data-language="html"><ul> <li>Помаранчевий</li> <li>Зелений</li> <li>Синій</li>
</ul>

CSS

li { display: inline-block; margin: 0 10px; }

Списки з float

Зміна значення властивості display на inline або inline-block швидко, але це видаляє маркери списку. Якщо вони необхідні, то додавання float до кожного елемента <li> є кращим варіантом, ніж зміна якості display.

Установка для всіх елементів <li> властивості float як left вирівняє горизонтально всі елементи <li> безпосередньо поруч один з одним без будь-яких проміжків між ними. Коли ми використовуємо float для <li>, маркер списку відображається за замовчуванням і розташовуватиметься поверх елемента <li> поруч із ним. Щоб запобігти відображенню маркера списку поверх інших елементів <li>, необхідно додати горизонтальний margin або padding.

HTML

<code data-language="html"><ul> <li>Помаранчевий</li> <li>Зелений</li> <li>Синій</li>
</ul>

CSS

li { float: left; margin: 0 20px; }

Як і з будь-якими обтічними елементами це порушує потік сторінки. Ми не повинні забувати очищати float і повертати сторінку в звичайний потік — найпоширенішим методом через clearfix.

Приклад навігаційного списку

Ми часто розробляємо та знаходимо навігаційні меню, у яких застосовуються невпорядковані списки. Ці списки зазвичай розташовуються горизонтально за допомогою одного з двох методів, згаданих раніше. Ось, наприклад, горизонтальне навігаційне меню, розмічене за допомогою неупорядкованого списку, в якому елементи <li> відображаються як inline-block.

HTML

<code data-language="html"><nav class="navigation"> <ul> <li><a href="#">Профіль</a></li><!----><li><a href="#"> ;Налаштування</a></li><!----><li><a href="#">Сповіщення</a></li><!--—--><li><a href="#">Вихід</a></li>
</ul>
</nav>

CSS

.navigation ul { font: bold 11px "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0; padding: 0; text-transform: uppercase; } 
.navigation li { display: inline-block; } 
.navigation a { background: #395870; background: linear-gradient(#49708f, #293f50); border-right: 1px solid rgba(0, 0, 0, .3); color: #fff; padding: 12px 20px; text-decoration: none; } 
.navigation a:hover { background: #314b60; box-shadow: inset 0 0 10px 1px rgba(0, 0, 0, .3); } 
.navigation li:first-child a { border-radius: 4px 0 0 4px; } 
.navigation li:last-child a { border-right: 0; border-radius: 0 4px 4px 0; }

На практиці

Тепер, коли ми знаємо, як створювати списки в HTML і CSS, давайте оглянемося на наш сайт Styles Conference і подивимося, де ми могли б використовувати списки.

1. Зараз навігаційні меню в елементах <header> та <footer> на наших сторінках складаються з кількох посилань. Ці елементи можуть бути краще організовані у вигляді неупорядкованого списку.

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

   Ми збираємося змінити значення display для наших елементів < li> на inline-block, щоб усі вони вирівнювалися в рядку по горизонталі. Коли ми це зробимо, також повинні врахувати порожній простір ліворуч між кожним елементом <li>. Згадуючи урок 5, «Позиціонування вмісту», ми знаємо, що відкриття коментаря HTML в кінці елемента <li> і закриття коментаря на початку елемента < ;li> видаляє цей простір.

   Пам'ятаючи про це, розмітка для навігаційного меню всередині нашого елемента <header> виглядатиме так:

   <code data-language="html"><nav class="nav primary-nav"> <ul> <li><a href="index.html">Головна</a></li><!----><li><a href="speakers.html" ;>Спікери</a></li><!----><li><a href="schedule.html">Розклад</a></li& ;!----><li><a href="venue.html">Місце проведення</a></li><!----><li>< ;a href="register.html">Реєстрація</a></li>
   </ul>
   </nav>

   Так само, розмітка для навігаційного меню всередині нашого елемента <footer> виглядатиме так:<code data-language="html"><nav class="nav"> <ul> <li><a href="index.html">Головна</a></li><!----><li><a href="speakers.html" ;>Спікери</a></li><!----><li><a href="schedule.html">Розклад</a></li& ;!----><li><a href="venue.html">Місце проведення</a></li><!----><li>< ;a href="register.html">Реєстрація</a></li> </ul> </nav>

   Не забувайте внести ці зміни до всіх наших HTML-файлів.

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

   Почнемо з того, щоб усі елементи <li> всередині якогось елемента зі значенням nav атрибута class відображалися як inline-block, щоб увімкнути горизонтальні margin і щоб можна було вирівнювати елементи по вертикалі.

   Крім того, ми скористаємося псевдокласом :last-child щоб визначити останній елемент <li> і скинути його правий margin в 0. Це гарантує, що будь-який горизонтальний простір між елементами <li> та краєм його батька зникне.

   У наш файл main.css, нижче стилів навігації додамо наступний CSS:

   .nav li { display: inline-block; margin: 0 10px; vertical-align: top; } 
   .nav li: last-child { margin-right: 0; }

   Ви напевно здивовані, чому наш список не включає будь-які маркери списку або стилів за замовчуванням. Ці стилі були видалені скиданням вгорі нашого стилю. Якщо ми подивимося на скидання, побачимо, що елементи <ol>, <ul> та <li> включають нульові margin і padding, а для <ol> та <ul> значення list-style встановлено як none.

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

   У файлі speakers.html, трохи нижче розділу з вступом, створимо новий розділ, де ми представимо всіх наших спікерів. Повторно задіявши деякі існуючі стилі ми скористаємося елементом <section> з класом row, щоб обернути всіх наших спікерів та застосувати білий фон та поля за ними. Всередині елемента <section> ми додамо елемент <div> з класом grid щоб вирівняти по центру сторінки наших спікерів і це дозволить нам також увімкнути кілька колонок.

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

    <code data-language="html"><section class="row"> <div class="grid">
   </div>
   </section>

4. Всередині grid кожен спікер буде помічений з власним елементом <section>, який включає дві колонки. Перша колонка відміряє дві третини елемента <section> і буде розмічена за допомогою елемента <div>. Друга колонка відміряє третину елемента <section> і буде розмічена за допомогою елемента <aside>, а його вміст вдруге по по відношенню до спікера та його мови.

   Використовуючи наші існуючі класи col-2-3 та col-1-3, схема для розділу зі спікерами буде виглядати так:

   <code data-language="html"><section id="shay-howe"> <div class="col-2-3"> ...
   </div><!----><aside class="col-1-3"> ...
   </aside>
   </section>

   Тут є кілька пунктів, на які варто звернути увагу. По-перше, кожен елемент <section> для кожного спікера включає атрибут id з ім'ям спікера як значення. Пізніше, коли ми створимо розклад для нашої конференції, ці атрибути id послужать якорями, які дозволять нам зв'язати розклад із профілем спікера.

   Крім того, що закриває тег елемента <div> супроводжується відкриттям коментаря в HTML і відкриваючим тегом елемента <aside>, якому передує закриття коментаря.Оскільки класи для колонок будуть відображати ці елементи як рядково-блокові, ми видаляємо порожній простір, який з'явиться між ними. ;div> ми будемо використовувати кілька заголовків та абзаців, щоб показати ім'я спікера, коротку біографію, назву доповіді та її анонс.

   Враховуючи цей вміст, розділ спікера буде виглядати таким чином:

   >

   <section id="shay-howe"> <div class="col-2-3"> <h2>Шей Хоу</h2> <h5>Краще менше, та краще: як обмеження культивують зростання</h5> <p>Встановивши обмеження, ми змушуємо себе...</p> <h5>Про спікера<