HTML Част 15 (Списъци)

CSS и HTML » HTML

fix3d   трудност:    видян: 16014

Списъци

Често в HTML-страниците се прави изброяване на някакви елементи и в тези случаи е подходящо да се използват специалните тагове на HTML за списъци, тъй като това придава по-подреден вид на страницата.

Могат да се изработват три основни вида списъци:

- неподредени
- подредени
- дефиниращи



НЕПОДРЕДЕНИ СПИСЪЦИ

Неподреден е списъка, в който елементите, които се изброяват, не са номерирани чрез арабски цифри, римски цифри или букви.
Кода за такъв списък е следния:

<ul>
<li>Първи елемент от списъка</li>
<li>Втори елемент от списъка</li>
<li>Трети елемент от списъка</li>
</ul>

При задаване на този код браузъра изобразява списъка с автоматичен отстъп от лявото поле. Не е нужно и да се изписва тага за преминаване на следващ ред <br>, тъй като това също става автоматично. Автоматично се добавя и по един празен ред над и под списъка.

Знака, който се появява пред всеки ред в списъка, е по подразбиране черен запълнен кръг. Ако желаете да използвате други символи трябва да ги зададете като стойности към атрибута type на тага ul.
Възможните стойности са три:

- disc (запълнен кръг като този, който е по подразбиране)
- circle (незапълнен кръг)
- square (запълнен квадрат).

ПРИМЕР за неподреден списък с незапълнени кръгчета:

<ul type="circle">
<li>Първи елемент от списъка</li>
<li>Втори елемент от списъка</li>
<li>Трети елемент от списъка</li>
</ul>

ПРИМЕР за неподреден списък със запълнени квадратчета:

<ul type="square">
<li>Първи елемент от списъка</li>
<li>Втори елемент от списъка</li>
<li>Трети елемент от списъка</li>
</ul>

!ВНИМАНИЕ: Атрибута type на тага ul е изваден от стандартите на езика и не се поддържа от XHTML 1.0 Strict DTD, макар че браузърите ще продължат да го поддържат. Дефинирането на типа на знаците в неподредените списъци трябва да се извършва чрез използване на стилове (styles). За подробности вижте CSS справочника.



ВЛАГАНЕ ЕДИН В ДРУГ НА НЕПОДРЕДЕНИ СПИСЪЦИ

Неподредените списъци могат да се влагат един в друг. Кода за такова влагане може да бъде например следния:

<ul>
<li>Първи елемент от списъка</li>
<li>Втори елемент от списъка</li>

<ul>
<li>Първи поделемент на 2-рия елемент от списъка</li>
<li>Втори поделемент на 2-рия елемент от списъка</li>
</ul>

<li>Трети елемент от списъка </li>
</ul>

Елементите от вложения списък автоматично биват изобразявани с още по-голям отстъп от лявото поле и с незапълнен кръг като символ пред редовете.