CSS. Урок 6 Стилі списків

  1. Нумерований список list-style-type
  2. Маркований список list-style-type
  3. Викоистання графічних маркерів. list-style-image

1) Нумерований список

Як ви пам'ятаєте в HTML документі нумерований список відображається за допомогою тега OL, а кожен пукт списку - тегом LI. Нумерований список за замовченням має нумерацію цілими числами з крапкою. За допомогою властивості list-style-type в якості нумерації можливо використовувати інший формат чисел і навіть літери латинської та грецької мов.

Значення властивості list-style-type:

decimal звичайна нумерація за замовченням
decimal-leading-zero нумерація з нулем в одноразрядних числах
upper-roman нумерація римськими числами (верхн.регістр)
lower-roman нумерація римськими числами (нижн.регістр)
lower-greek послідовність грецькою абеткою
upper-latin послідовність латинською абеткою (верхн.регістр)
lower-latin послідовність латинською абеткою (нижн.регістр)

Приклад нумерованого списку:

файл file.css
.greek {
list-style-type:lower-greek;
}

файл file.html
<html>
<head>
<link rel="stylesheet" href="file.css">
</head>
<body>
<ol class = "greek">
<li> перший
<li> другий
<li> третій
</ol>
</body> </html>

2) Маркований список

Пригадаймо, що для створення маркованих списків, використовують теги UL та LI. За замовченням створюються маркери у формі зафарбованого кружечка. Маркер можна змінити властивістю list-style-type в стилях.

Значення властивості list-style-type для маркованих списків:

disc маркер за замовченням
  • перший
  • другий
  • третій
circle коло
  • перший
  • другий
  • третій
square квадрат
  • перший
  • другий
  • третій
none список без маркерів
  • перший
  • другий
  • третій

Приклад комбінованого списку:

файл file.css
.none {
list-style-type:none;

}
.сircle {
list-style-type:circle;

}
.square {
list-style-type:square;
}

файл file.html
<html>
<head>
<link rel="stylesheet" href="file.css">
</head>
<body>
<ul class=none>
<li> Група №1
 <ul class = "circle">
 <li> перший учень
 <li> другий учень
 <li> третій учень
 </ul>
<li> Група №2
 <ul class = "sqaure">
 <li> четвертий учень
 <li> п'ятий учень
 <li> шостий учень
 </ul>
</ul>
</body> </html>

3) Викоистання графічних маркерів. list-style-image

В якості маркерів можливо використовувати графічні файли. Це дозволяє прикрасити веб сторінку та розширює поле творчості для дизайнера. Отже, щоб застосувати файл зображення у якості маркера, необхідно скористатися властивістю list-style-image:url("графічний файл") . Зрозуміло, що в дужках треба точно вказати повне ім'я графічного файлу.

Наприклад:
ul {list-style-image:url("marker1.png") }
ul {list-style-image:url("images/marker2.png") }

Важливо пам'ятати, що щлях до графічного файлу має бути відносний.

Орієнтовний розмір графічного файлу-маркера 16 Х 16 px. Формат файлу, як правило - png, але можливі й інші формати - jpg, gif. Фізично файл може знаходитися в одній теці з веб документом, або в окремій теці. В такому випадку до файлу має бути вказаний шлях з урахуванням теки (наприклад: images/star.png )

Приклад списку з графічним маркером:

Припустимо ми маємо графічний файл розміром 16 х 16 пікселів з назвою star.png що знаходиться в одній теці з html файлом. Для того, щоб його використати в якості маркера, необхідно в стилях створити наступний опис:

файл file.css
.star {
list-style-image: url("star.png");
}
файл file.html
<html>
<head>
<link rel="stylesheet" href="file.css">
</head>
<body>
<ul class = "star">
<li> перше місце
<li> друге місце
<li> третє місце
</ul>
</body>
</html>

Виконайте вправу №5 в зишиті..

Виконайте вправу в редакторі html

1) Завантажте графічний файл та застосуйте його як маркер в списку за поданим зразком:

2*)Завантажте інструкцію та виконайте завдання.