Лекція 5
.pdflist-style-type: lower-roman → маленькі римські цифри; <li style="list-style: lowerroman">
list-style-type: upper-roman → великі римські цифри; <li style="list-style: upperroman">
list-style-type: lower-alpha → маленькі латинські літери; <li style="list-style: loweralpha">
list-style-type: upper-alpha → великі латинські літери; <li style="list-style: upperalpha">
list-style-type: none → маркер відсутній.
Приклад 8: (задання маркерів списків за допомогою стилів)
<html> <head><title>списки</title>
</head>
<body>
<ol style="list-style-type: none"> <li>Перший елемент</li> <li>Другий елемент</li> <li>Третій елемент</li>
</ol>
<ul style="list-style-type: disc"> <li > Перший елемент</li> <li>Другий елемент</li> <li>Третій елемент</li>
</ul>
<ol style="list-style-type: square"> <li>Перший елемент</li> <li>Другий елемент</li> <li>Третій елемент</li>
</ol>
<ul style="list-style-type: circle"> <li>Перший елемент</li>
<li>Другий елемент</li> <li>Третій елемент</li>
</ul>
</body>
</html>
Приклад 9: (зміна маркерів списків за допомогою стилів)
<html>
<head>
<title>Вигляд маркера в списку</title>
</head>
<body>
<ul style="list-style-type: square"> <li>Пункт 1.
<li>Пункт 2.
<li style="list-style-type: circle">Пункт 3 (особливий).
</ul>
<ul style="list-style-type: upper-roman"> <li>Пункт 1.
<li>Пункт 2.
<li>Пункт 3.</ul></body> </html>
Приклад 10: (встановлення малюнка замість маркера за допомогою стилів)
В цьому випадку застосуємо властивість list-style-image, яка визначає в якості маркера списку деяке графічне зображення із вказанням шляху до нього.
Значення даного параметру:
∙none – відміна графічного зображення маркера.
∙url – шлях до файлу з малюнком маркера.
Шлях до малюнка після url вказується в круглих дужках: list-style-image: url(graphics/marker.gif) - даний запис говорить про те, що поруч із документом
знаходиться папка graphics в якій міститься файл-малюнок: "
" - під назвою marker.gif.
Html-код програми:
<html>
<head><title>Нестандартний маркер-зображення</title></head>
<body>
<center>
<ul style="list-style-image: url(graphics / marker.gif)"> <li>Перший пункт.
<li>Другий пункт. <li>Третій пункт.
</ul></center> </body> </html>
Приклад 11: (обтікання маркера списком)
Застосуємо параметр list-style-position, який вказує браузеру на те, як слід відображати текст в списку відносно його маркерів.
Значення даного параметру:
∙outside - маркер знаходиться збоку від списку. (по замовчуванню)
∙inside - маркер обтікаєтся текстом.
Html-код програми:
<html>
<head><title>Стиль списку</title> </head>
<body>
<div style="width: 250px;">
<ul style="list-style:url(graphics/marker.gif) inside">
<li>- Цей список використовує в якості маркера малюнок. <li>- Текст цього списка обтікає маркер.
</ul>
</div>
</body> </html>