Оформлення маркерів (буллетів) html-списків

Встановлення та завантаження ОС Віндовс

Оформлення маркерів (буллетів) html-списків

Місце розташування булетів списку

Оформлення зовнішнього виглядубулетів (маркерів) списку починається із зазначення їхнього розташування щодо тексту списку. Булети (маркери) списку розташовуються або в тексті списку, або за його межами. За розташування булетів відповідає CSS-властивість елемента спискуlist-style-position. Цей тег, що мало застосовується, може наробити багато проблем, наприклад – з обтіканням картинки списком. Властивістьlist-style-position має два значення,outside – маркер (булет) знаходиться за кордоном елементів списку таinside – маркер розташований усередині елемента та обтікається його текстом . За умовчанням, list-style-position дорівнює outside – маркер поза текстом списку. До цього всі давно звикли і забули проlist-style-position:inside; Для наочності того, що відбувається, я взяв текст елемента списку в рамку (властивість border:2px solid #000;).

Для наочності елементи списку взяті в рамку (border:2px solid #000;).

Виглядає у браузері:

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

Виглядає у браузері:

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

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

Виглядає у браузері:

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

Як видно на «живих» прикладах, ширина списку та його лівийвідступ залишаються незмінними. Булети списку, перебуваючи за його межами (outside), можуть «налазити» на сусідні елементи веб-сторінки (блоки, зображення). Часто при обтіканні картинки списками – саме так і відбувається.

Відстань від булета (маркера) до списку

Відстань від булета (маркера) до тексту списку задається дефолтними налаштуваннями у кожного браузера. Відступи від маркера до тексту елемента можуть бути різними для різних видів і версій браузерів. Невеликий css-код дозволяє досягти кросбраузерного відображення списків і змінити значення дефолтних відступів на власні. Примітно, що вигляд списку разюче змінюється, залежно від призначеного властивості outside/inside. Тут саме час для сміливих дослідів та експериментів:

Відстань від булета до сусіднього об'єкту

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

Залежність коду від місця розташування буллета (outside/inside) пояснюється тим, що по-

Зовнішній вигляд булету

Булети html-списків можуть набувати числового вигляду, простих маркерів, не відображатися зовсім або мати вигляд довільної картинки-зображення.

Маркери списку

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

Списки без булетів (Немарковані та ненумеровані списки)

Найбільш важливі та застосовувані атрибути тега і в XHTML start – задає число, з якого починатиметься нумерований список. Використовується для початку нумерованого списку ззаданого номера. value - задає число, з якого буде починатися або продовжуватися нумерований список. Використовується для розриву нумерованого списку і нового початку нумерації із заданого номера>class – визначає ім'я класу, що використовується (для CSS) type – встановлює вид маркера для нумерованого або маркованого списку. Атрибут type вважається застарілим та підтримується не всіма браузерами. Для завдання виду маркера рекомендується використовувати атрибут style та каскадні таблиці стилів CSS, де прописувати потрібний вид маркера. Тому, наведені нижче приклади можуть відображатися некоректно.

Значення type для нумерованого списку A – великі латинські літери a – малі латинські літери I – великі римські цифри i – малі римські цифри 1 – арабські цифри (за замовчуванням)

Примітивний приклад використання вищеописаних атрибутів: (взято для прикладу вкладений список, щоб більше варіантів увійшло за один раз)

Раз елемент (основний список)
Два елементи (основний список)
Три елементи (основний список)
Раз елемент (вкладений список)
Два елементи (вкладений список)
Три елементи (вкладений список)
Чотири елементи (другий вкладений список)
П'ять елемент (другий вкладений список)
Шість елементів (другий вкладений список)
Сім елемент (другий вкладений список)
Вісім елемент (другий вкладений список)

Раз елемент (другий вкладений список)
Два елементи (другий вкладений список)
Три елементи (другий вкладений список)
Чотири елементи (другий вкладений список)
П'ять елемент (другий вкладений список)
Шість елементів (другий вкладений список)
Сім елемент (другий вкладений список)
Вісім елемент (другий вкладений список)

Виглядає у браузері, приблизно так:

Раз елемент (основний список) Два елемент (основний список) Три елемент (основний список) Раз елемент (вкладений список) Два елемент (основний список) Три елемент (вкладений список) ) Чотири елемент (другий вкладений список) П'ять елемент (другий вкладений список) Шість елемент (другий вкладений список) Сім елемент (другий вкладений список) Вісім елемент (другий вкладений список) ) Раз елемент (другий вкладений список) Два елемент (другий вкладений список) Три елемент (другий вкладений список) Чотири елемент (другий вкладений список) П'ять елемент (другий вкладений список) ) Шість елемент (другий вкладений список) Сім елемент (другий вкладений список) Вісім елемент (другий вкладений список) Тепер згадаємо про вкладені списки і підкоригуємо код брейком, щоб уникнути повторення та наїзду пунктів.

Вийде приблизно такий код:

Раз елемент (основний список)
Два елементи (основний список)
Три елементи (основний список)

Раз елемент (вкладений список)
Два елементи (вкладений список)
Три елемент(Вкладений список)
Чотири елементи (другий вкладений список)
П'ять елемент (другий вкладений список)
Шість елементів (другий вкладений список)
Сім елемент (другий вкладений список)
Вісім елемент (другий вкладений список)

Раз елемент (другий вкладений список)
Два елементи (другий вкладений список)
Три елементи (другий вкладений список)
Чотири елементи (другий вкладений список)
П'ять елемент (другий вкладений список)
Шість елементів (другий вкладений список)
Сім елемент (другий вкладений список)
Вісім елемент (другий вкладений список)

Виглядає у браузері:

Раз елемент (основний список) Два елемент (основний список) Три елементи (основний список)

Раз елемент (вкладений список) Два елемент (вкладений список) Три елемент (вкладений список) Чотири елемент (другий вкладений список) П'ять елемент (другий вкладений список) Шість елемент ( другий вкладений список) Сім елемент (другий вкладений список) Вісім елемент (другий вкладений список)

Раз елемент (другий вкладений список) Два елемент (другий вкладений список) Три елемент (другий вкладений список) Чотири елемент (другий вкладений список) П'ять елемент (другий вкладений список) Шість елемент (другий вкладений список) Сім елемент (другий вкладений список) Вісім елемент (другий вкладений список)

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

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

- Викладена в підручнику HTML розділ 9 "Списки" - рекомендую освіжити в голові інформацію про дані елементи, перш ніж приступати до роботи.

Ну, а якщо в голові і так свіжо тоді почнемо!

Перегляд маркера у списку.

Якщо Ви пам'ятаєте, то в чистому HTML вид маркера в списку визначав атрибут type і одне з його можливих значень, у CSS це завдання бере на себе властивість: list-style-type, яка, у свою чергу, теж має свої стандартні значення, що визначають вид маркера як всього списку одразу, так і його окремого "пункту".

disc - Диск. (за умовчанням для

) lower-roman - Рядкові римські цифри. lower-alpha - Рядкові літери. upper-roman - Великі римські цифри. upper-alpha - Великі літери. . Приклад: