22.6. fejezet: CSS alapismeretek – Listák

A HTML nyelv alapvetően két típusú listát tesz lehetővé:
-    számozatlan lista (<ul>) – az egyes elemeket felsorolásjelek előzik meg.
-    számozott lista (<ol>) – az egyes elemek előtt számok vagy betűk vannak.
A fentiek mellett a CSS további lehetőségeket is ad:
-    különböző jelek a számozatlan lista elemei előtt
-    különféle jelek a számozott lista elemei előtt
-    kép használata a felsorolásos elemek előtt
-    háttérszín hozzáadása az egyes elemek előtt

list-style-type: A definiált listaelem jelzését határozza meg. Fontos! Csak pár elemnél elemeknél használható.

Paraméterek:
disc (alapértelmezett) egyszerű ovális
circle: sima kör
square: sima négyzet
decimal: számok (pl.: 1,2,3, stb.)
decimal-leading-zero: számok előtti nulla (pl.: 01,02,03,04, stb.)
lower-roman: kicsi római számok (pl.: i, ii, iii, iv, stb.)
upper-roman: nagy római számok (pl.: I, II, III, IV, stb.)
lower-greeek: kicsi görög betűk (pl.: alpha, beta, gamma, stb.)
lower-alpha: kisbetűk (pl.: a,b,c,d, stb.)
upper-alpha: nagybetűk (pl.: A,B,C,D, stb.)
armenian: örmény karakterek
georgian: grúz karakterek
none: semmilyen.

Példa:

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;
}

list-style-image: Egy képet határoz meg, amely listaelem jelzőjeként szolgál.
Paraméterek: none (semmilyen), illetve url(pontosan).
Példa:

ul {
    list-style-image: url(/’mintakep.gif’);
}

list-style-position: Meghatározza a listaelem jelzőjének helyét.
Paraméterek: inside (a bekezdésen belül), outside (alapértelmezett; a bekezdésen kívül).
Példa:

ul {
    list-style-position: inside;
}

A fenti lehetőségeket persze egyesíthetjük. Példa:

ul {
    list-style: square inside url("sqpurple.gif");
}

Alapértelmezés visszaállítása. (Néha erre is szükség van!)
Példa:

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

Megjegyzés: a felsorolást színesebbé tehetjük, ha az ol vagy ul elemen belül háttérszínt (backgroundcolor), margót (margin), vagy helyhagyást (padding) is használunk.

A fejezet leghitelesebb forrása: https://www.w3schools.com/css/css_list.asp 

Folytatása következik!