Оформлення списків: List-style. Правила CSS для настройки зовнішнього вигляду списку на html сторінці. Властивість list style (type, image, position) Місцезнаходження маркера списку list-style-position

опис

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

синтаксис

list-style-image: none | url ( "шлях до файлу") | inherit

значення

HTML5 CSS2.1 IE Cr Op Sa Fx

• Lorem ipsum dolor sit amet
• Consectetuer adipiscing elit
• Sed diem nonummy nibh euismod
• Tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

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

Мал. 1. Застосування властивості list-style-image

об'єктна модель

document.getElementById ( "elementID") .style.listStyleImage

браузери

У різних браузерах відстань між зображенням і текстом може відрізнятися.

В Internet Explorer до версії 7.0 включно не відображаються маркери, якщо для списку додано властивість float. Також в цьому браузері не підтримує значення inherit.

опис

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

синтаксис

list-style: list-style-type || list-style-position || list-style-image | inherit

значення

Будь-які комбінації трьох значень визначають стиль маркерів, вони розділяються між собою пробілом. Комбінації значень повинні слідувати в зазначеному порядку: спочатку йде тип маркера, потім положення і картинка. Жодне значення не є обов'язковим, тому невикористовувані можна опустити.

Inherit Успадковує значення батька.

HTML5 CSS2.1 IE Cr Op Sa Fx

• Lorem ipsum dolor sit amet
• Consectetuer adipiscing elit
• Sed diem nonummy nibh euismod
• Tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

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

Мал. 1. Застосування властивості list-style

об'єктна модель

document.getElementById ( "elementID") .style.listStyle

браузери

Internet Explorer до версії 7.0 включно не підтримує значення inherit.

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

Атрибут href вказує шлях до файлу зовнішнього листа стилів. Дану рядок треба прописувати в тексті всіх Веб-сторінок, де треба використовувати зовнішній лист стилів.

Таким чином, зміни, що вносяться до файл style.css, відразу відображаються на всіх сторінках, що посилаються на цей файл.

Окрема ухвала стилів

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

приклад:

Атрибут ID

Якщо треба застосувати стиль до окремого елементу Веб-сторінки, то треба скористатися атрибутом ID.

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

• ...
• ...

• ...
• ...

У другому прикладі використовується властивість listStyle. Якщо заданий для списку зображення буде недоступно, то буде використовуватися маркер hollow circle (Порожній кружок).

У третьому прикладі показано, що властивість listStyle може бути застосовано для елементів, у яких властивість display приймає значення list-item.