Свойства списков
За допомогою CSS можна створювати марковані та нумеровані списки, а також використовувати зображення як маркери.
У Таблиці 1 перераховані властивості елементів, призначених для створення та зміни списків.
| Властивість | Значення | Опис | Приклад |
|---|---|---|---|
| list-style-type | disc circle square decimal lower-roman upper-roman lower-alpha upper-alpha none | Вид маркера. Перші три використовуються для створення маркованого списку, а інші для нумерованого. | LI {list-style-type: circle}
LI {list-style-type: upper-alpha} |
| list-style-image | none
URL | Встановлює символ маркера як будь-яке зображення. | LI {list-style-image: url(check.gif)} |
| list-style-position | outside inside | Вибір положення маркера відносно блоку рядків тексту. | LI {list-style-position: inside} |
| list-style | Універсальна властивість, яка одночасно включає всі вищезазначені властивості. |
Оскільки тег <li> успадковує стиліві властивості тега <ol> або <ul>, який виступає як його батько, то можна встановлювати стиль як для селектора UL, так і для селектора LI. Так, у прикладі 1 використовується селектор UL, для нього і задаються стиліві параметри.
Приклад 1. Створення маркованого списку
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Списки</title>
<style type="text/css">
UL {
list-style-type: square; /* Маркери у вигляді квадрата */
list-style-position: outside; /* Маркери розміщені за межами текстового блоку */
color: navy; /* Колір тексту списку */
}
</style>
</head>
<body>
<ul>
<li>Заголовок повинен бути коротше трьох рядків.</li>
<li>При назвах розділів використовуйте вже усталені терміни, такі
як гостьова книга, чат, посилання, головна сторінка та інші.</li>
<li>Перед використанням спеціального терміну або слова, вирішіть,
буде воно зрозуміле читачеві.</li>
</ul>
</body>
</html>Результат цього прикладу показано на рис. 1. Використовуються квадратні маркери та їх зовнішнє розміщення відносно тексту.
Щоб встановити власне зображення як маркер, застосовується властивість list-style-image, як показано в прикладі 2.
Приклад 2. Використання зображень як маркерів
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Списки</title>
<style type="text/css">
LI {
list-style-image: url(images/check.png); /* Шлях до файлу з маркером */
}
</style>
</head>
<body>
<ul>
<li>Заголовок повинен бути коротше трьох рядків.</li>
<li>При назвах розділів використовуйте вже усталені терміни, такі
як гостьова книга, чат, посилання, головна сторінка та інші.</li>
<li>Перед використанням спеціального терміну або слова, вирішіть,
буде воно зрозуміле читачеві.</li>
</ul>
</body>
</html>Результат цього прикладу показано на рис. 2. В якості маркерів використовується невелике зображення.
Деякі приклади створення різних списків наведено в Таблиці 2.
| HTML-код | Приклад |
|---|---|
| <li style="list-style: disc"> | Що слід враховувати при тестуванні веб-сайту:
|
| <li style="list-style: circle"> | Що слід враховувати при тестуванні веб-сайту:
|
| <li style="list-style: square"> | Що слід враховувати при тестуванні веб-сайту:
|
| <li style="list-style: decimal"> | Нумерований список з арабськими цифрами:
|
| <li style="list-style: lower-roman"> | Нумерований список з малими римськими цифрами:
|
| <li style="list-style: upper-roman"> | Нумерований список з великими римськими цифрами:
|
| <li style="list-style: lower-alpha"> | Нумерований список з малими латинськими буквами:
|
| <li style="list-style: upper-alpha"> | Нумерований список з великими латинськими буквами:
|