* Списъци
Публикувано на 26 август 2009 в раздел ХHTML.
Когато ни се налага да изброяваме поредица от елементи, то ние използваме т.нар. „списъци“. Езикът HTML позволява доста възможности за осъществяване на такава функционалност.
1. Подредени списъци: Може би са по-добре познати са като „номерирани списъци“. Чрез тях изреждаме стойности една след друга, като всяка си има пореден уникален номер. По подразбиране номерът следва числата 1, 2, 3, 4, …
Пример:
<div style="margin-left:50px">Нужни продукти: <ol> <li>Картофи</li> <li>Моркови</li> <li>Зеле</li> </ol> </div>
Резултат:
Нужни продукти:
- Картофи
- Моркови
- Зеле
Съществуват и други видове номерация. Тя зависи от стойността на стил „list-style-type“. Възможните стойности са ‘lower-alpha’ (малки букви a,b,c,d,…), ‘upper-alpha’ (главни букви A,B,C,D,…), ‘lower-roman’ (малки римски числа i,ii,iii,iv,v,…), ‘upper-roman’ (главни римски числа I,II,III,IV,V,…) и ‘decimal’ (по подразбиране числа 1,2,3,4,…). Ето един пример:
<div style="margin-left:50px">Нужни продукти: <ol style="list-style-type:upper-roman"> <li>Картофи</li> <li>Моркови</li> <li>Зеле</li> </ol> </div>
Резултат:
Нужни продукти:
- Картофи
- Моркови
- Зеле
Възможно е да приложите същата промяна на стил и на елементите <li>, но това е много по-рядко практикувано, понеже не е естествено номерацията да се променя вътре в самия списък. Имаме възможност и за вложени списъци:
<div style="margin-left:50px">Задачи: <ol style="list-style-type:decimal"> <li>Задача 1 <ol style="list-style-type:lower-alpha"> <li>Подточка a</li> <li>Подточка b</li> <li>Подточка c</li> </ol> </li> <li>Задача 2 <ol style="list-style-type:lower-alpha"> <li>Подточка a</li> <li>Подточка b</li> <li>Подточка c</li> </ol> </li> </ol> </div>
Резултат:
Задачи:
- Задача 1
- Подточка a
- Подточка b
- Подточка c
- Задача 2
- Подточка a
- Подточка b
- Подточка c
2. Неподредени списъци: Това са списъците, в които просто изреждаме стойностите и те нямат уникална номерация.
Пример:
<div style="margin-left:50px">Необходими продукти: <ul> <li>Картофи</li> <li>Моркови</li> <li>Зеле</li> </ul> </div>
Резултат:
Необходими продукти:
- Картофи
- Моркови
- Зеле
И тук е валиден стилът list-style-type. Възможните стойности са circle, square и disc. Ще демонстрираме тези стилове директно чрез промяна на изброените стойности:
<div style="margin-left:50px">Необходими продукти: <ul> <li style="list-style-type:circle">Картофи</li> <li style="list-style-type:square">Моркови</li> <li style="list-style-type:disc">Зеле</li> </ul> </div>
Резултат:
Необходими продукти:
- Картофи
- Моркови
- Зеле
Тук ни е дадена възможност и за още един стил – list-style-image. Като стойност се приема релативен или пълен URL до картинка. Така в неподредения списък вместо disc, square или circle ще се появи посочената от нас картинка.
3. Списъци с обяснения: Използват се за „дефиниране“ на обекти. Например когато желаем да обясним дадени термини. Списъците с обяснения се ограждат с <dl> (definition list), последвано от двойки <dt> (definition term) и <dd> (definition description).
Пример:
<div style="margin-left:50px">Напитки: <dl> <dt>Бира</dt> <dd>Газирано слабо алкохолно пиво</dd> <dt>Ракия</dt> <dd>Силно спиртно алкохолно питие</dd> <dt>Кола</dt> <dd>Газирана безалкохолна напитка</dd> </dl> </div>
Резултат:
Напитки:
- Бира
- Газирано слабо алкохолно пиво
- Ракия
- Силно спиртно алкохолно питие
- Кола
- Газирана безалкохолна напитка
4. Вложени списъци: Вече показахме пример с подредени списъци. Можем и още по-общо да влагаме и различни типове списъци. Ето един пример:
<div style="margin-left:50px">Програма: <ul> <li>Понеделник: <ol> <li>Числени методи</li> <li>Дискретна математика</li> </ol> </li> <li>Сряда: <ol> <li>Числени методи</li> <li>Програмиране на C#</li> <li>Частни диференциални уравнения</li> </ol> </li> </ul> </div>
Резултат:
Програма:
- Понеделник:
- Числени методи
- Дискретна математика
- Сряда:
- Числени методи
- Програмиране на C#
- Частни диференциални уравнения
Мисля, че е добре да се поясни , че този вид директна употреба на списъците не се среща почти никъде в уеб пространството писано в xHTML, като подчертавам предимно OL.Списъците намират приложение за менюта и всякаква поредица от елементи с еднакви стилове…
Не съм съгласен – аз лично си ги използвам почти винаги, когато имам да изброявам точки… Това е много удобно заради DOM – обикновено изброените елементи в списъците са важни за структурата на документа.