Liste marcate și numerotate în HTML și CSS

În HTML putem folosi elementele <ul> și <ol> pentru a crea liste

marcate sau cu numerotare
Un element al listei va fi introdus cu <li> ca în exemplul următor
<LI[VALUE=nnnn][ TYPE=1|a|A|i|I|disk|square|circle]>
element-de-lista
[</LI>]
Unde:
VALUE – valoarea de plecare atunci când lista este întreruptă de un
alt conținut(implicit are valoare 1, pentru primul element al listei)
<ul type=“square”>
Liste ordonate Liste neordonate
(numerotate) (cu marcatori)
<OL[ COMPACT] <UL[ COMPACT]
[ START=nnnn] [TYPE=disk|square|circle]>
[ TYPE=1|a|A|i|I]> def-element
def-element def-element
def-element ...
... def-element
def-element </UL>
</OL>

def-element reprezintã definirea unui element cu ajutorul containerului LI;

COMPACT aratã cã distanta dintre numerotare(marcare);
TYPE stabileste stilul pentru numerotare;
START urmat de o valoare numerică indică numerotarea pentru primul element de listă.
2
Atribute CSS pentru liste
list-style Permite preizarea tuturor proprietăților cu o singură declarație
list-style: square url(“flo.gif");
list-style-image Permite utilizarea unei imagini ca marcator
list-style-image: url(“book.gif”);
list-style-position Precizează poziția marcatorului față de listă
list-style-position: inside;
list-style-position: outside;
list-style-type Poate preciza tipul marcatorului sau al numerotării
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

Exemplu: (modalitatea de aplicare)

<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

3
Valorile atributului List-style-type
Value
armenian The marker is traditional Armenian numbering
circle The marker is a circle
cjk-ideographic The marker is plain ideographic numbers
decimal The marker is a number
decimal-leading-zero The marker is a number with leading zeros (01, 02, 03, etc.)

disc Default value. The marker is a filled circle

georgian The marker is traditional Georgian numbering
hebrew The marker is traditional Hebrew numbering
hiragana The marker is traditional Hiragana numbering
hiragana-iroha The marker is traditional Hiragana iroha numbering
katakana The marker is traditional Katakana numbering
katakana-iroha The marker is traditional Katakana iroha numbering
lower-alpha The marker is lower-alpha (a, b, c, d, e, etc.)
lower-greek The marker is lower-greek
lower-latin The marker is lower-latin (a, b, c, d, e, etc.)
lower-roman The marker is lower-roman (i, ii, iii, iv, v, etc.)
square The marker is a square
upper-alpha The marker is upper-alpha (A, B, C, D, E, etc.)
upper-latin The marker is upper-latin (A, B, C, D, E, etc.)
upper-roman The marker is upper-roman (I, II, III, IV, V, etc.)
none No marker is shown
4
 Exerciții
 Folosiți resursele primite pentru a realiza mai multe
liste cu marcatori de tip imagine
 Realizați o listă numerotată pe mai multe nivele:
primul nivel va fi numerotat cu cifre romane, iar al
doilea cu cifre arabe
 Folosiți cât mai multe tipuri de numerotare
 Reaizați un design care să folosească elementele
studiate. Veți folosi următoarele elemente:
-listă cu marcatori de tip imagine
-suprapuneți lista peste o imagine folosind atributul
position
-utilizați un chenar adecvat