2. Властивості списків

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

Нижче розглянуто основні властивості, призначені для форматування маркерів списків.

• list-style-type - задає маркери для впорядкованих (нумерованих) і неупорядкованих (маркірованих) списків. Набір припустимих значень властивості list-style-type включає 22 значення, багато з яких поки що не підтримуються розповсюдженими браузерами. Часто використовуються:

• square - маркер у вигляді квадратика □;

• circle - коло ○;

• disc - затемнене коло ● (значення за замовчуванням);

• decimal - десяткові числа, починаючи з 1;

• lower-roman - рядкові римські цифри, наприклад, i, ii, iii;

• upper-roman - прописні римські цифри, наприклад, I, П, III;

• lower-latin або lower-alpha - рядкові латинські букви, наприклад, а, b, с;

• upper-latin або upper-alpha - прописні латинські букви, наприклад, А, В, С;

• none - маркер не відображається.

• list-style-image - задає маркер у вигляді картинки (зображення). Наприклад, правило UL {list-style-image:url("mymarker.gif")} установлює для маркерів зображення, що зберігається у файлі mymarker.gif;

• list-style-position - встановлює позицію маркера в рядку списку. Значення цієї властивості задає додатковий відступ перед кожним рядком списку. Можна застосовувати два значення: outside (маркер відображається за межами області рядка списку) або inside (маркер перебуває всередині області списку). За замовчуванням приймається значення outside.

Зауваження

Властивість list-style-type можна застосовувати до всього списку відразу (у складі елементів OL або UL) або до окремих рядків (у тегу <LI>). Наприклад, список із нумерацією рядків за допомогою рядкових римських цифр задається тегом

<OL style=" list-style-type: lower-roman">

або CSS-правилом

UL { list-style: lower-roman}

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

<LI style=" list-style-type:circle">

задає окремий рядок, маркірований кружком ○.

Скориставшись CSS-властивістю display: list-item, можна сформувати список і без елементів 0L або UL.

3. Інші групи стильових властивостей

Крім розглянутих вище властивостей стилів, у специфікації CSS є й інші, рідше використовувані властивості. Серед них назвемо, насамперед, властивість display, що визначає відображення елементів документа. Звичайно ця властивість використовується зі значенням none, що відключає вивід елемента на екран. Інші значення цієї властивості дозволяють перетворити абзац у рядковий елемент (значення inline), перетворити рядкової елемент у блок (значення block), змусити елемент «поводитися» як список (значення list-item). Однак подібні перетворення ускладнюють аналіз сторінки й рідко використовуються.

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

• hand (рука);

• crosshair (перехрестя);

• move (перехрестя зі стрілками, що відповідає можливості переміщення об'єкту);

• e-resize і w-resize (горизонтальні оконтурені стрілки);

• n-resize і s-resize (вертикальні оконтурені стрілки);

• ne-resize і nw-resize (похилі оконтурені стрілки);

• help (стрілка зі знаком питання).