УРОК 12 : Списъци

Когато изброяваме някакви елемнти се налага да използваме списъци. Списъците биват 3 вида - неномериран , номериран и списък с дефиниции:

Неномериран списък

указва се с <ul>...<ul> (от unordered list) като всеки елемент от списъка се вмъква с маркера <li>...</li> (от list item). Знакът, който се появява пред всеки ред в списъка, по подразбиране е черен запълнен кръг. Ако искате да използвате други символи, трябва към <ul>...</ul> да добавите атрибута type="стойност" като негови стойности  могат да бъдат : 

  • "disk" - запълнено кръгче като това, което е по подразбиране
  • "circle" -незапълнен кръг
  •  "square" - запълнен квадрат 

Например :

<ul type="square">

<li>Елемент 1</li>
<li>Елемент 2</li>
<li>Елемент 3</li>
<li>Елемент 4</li> 

</ul>

Ще изглежда така :

  • Елемент 1
  • Елемент 2
  • Елемент 3
  • Елемент 4

Номериран списък 

указва се с <ol>...</ol> (ordered list) като всеки елемент от списъка се вмъква отново с маркера <li>...</li>. Знакът, който се появява пред всеки ред в списъка по подразбиране е цифра. Ако искате да използвате други символи, трябва към <ol>...</ol> да добавите атрибута type="стойност" като неговите стойности  тук могат да бъдат :

  • "А" - ще се извеждат главни латински букви;
  • "а" - ще се извеждат малки латински букви;
  • "I" - ще се извеждат главни римски букви;
  • "i" - ще се извеждат малки римски букви;

Друг атрибут, който може да се добави в маркера<ol>...</ol> e start="стойност" като стойността е първото число или буква, с която искаме да започва списъка. Ако се пропусне по подразбиране се почва от първото число или буква.

Ето ви един пример :

<ol type="I" start="3">

<li>Елемент 1</li>
<li>Елемент 2</li>
<li>Елемент 3</li>
<li>Елемент 4</li> 

</ol>

Ще изглежда така :

  1. Елемент 1
  2. Елемент 2
  3. Елемент 3
  4. Елемент 4

Списък с дефиниции

Използва се, когато трябва да се окаже поредица от термини и технически обяснения. Този тип списък се указва с <dl>...</dl> (от definition list) като всеки термин се вмъква с маркера <dt>...</dt> (от definition term), а всяко обяснение - с маркера <dd>...</dd> (предполагам от definition discribe) . При дефиниращите списъци не се извеждат символи в началото на реда, затова съдържанието е с отстъп от ляво. Например :

<dl>

<dt>термин</dt>
 <dd>oбяснение 1</dd>
 <dd>обяснение 2</dd>

<dt>друг термин</dt> 
 <dd>обяснение</dd>

</dl>

Ще изглежда така :

термин
oбяснение 1
обяснение 2
друг термин
обяснение
NB! Списъците могат да се влагат един в друг, независимо от кой вид са. Например :

<ol>
<li>Първа точка</li>

<ul>
<li>подточка а</а>
<li>подточка б</li>
</ul>

<li>Втора точка</li>

<dl>
<dt>-термин</dt>
<dd>oбяснение</dd>
</dl>

</ol>

Ще изглежда така :

  1. Първа точка
    • подточка а
    • подточка б
  2. Втора точка
  3. -термин
    oбяснение

Преминете към УРОК 13 : Таблици - 1 част =>

Нагоре