Tvorba WWW – CSS

Seznamy

Následující vlastnosti seznamů umožňují jednoduše formátovat seznamy v HTML.

Seznamy můžeme v CSS formátovat jako jakékoliv jiné elementy, navíc však můžeme určit druh odrážky číslovaného i nečíslovaného seznamu. S použitím obrázku můžeme vytvořit i odrážky vlastní.

Odrážky a číslování

Druh odrážky i číslování určujeme vlastností list-style-type. Tuto vlastnost můžeme přiřadit jak selektoru seznamu ul nebo ol, tak i položce seznamu li.

list-style-type

Tato vlastnost specifikuje vzhled značky u položky seznamu (pokud se nezobrazuje obrázek daný vlastností list-style-image).

  • povolené hodnoty: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hira-gana-iroha | katakana-iroha | none | inherit
  • výchozí hodnota: disc

Hodnota none znamená žádnou značku, ostatní hodnoty se dělí na tři typy:

  • symboly: disc (plné kolečko), circle (prázdné kolečko) a square (čtvereček). Jejich přesný vzhled záleží na prohlížeči.
  • číselný systém
  • alfabetický systém

Pokud klient nedokáže zobrazit daný číselný systém (např. nemá mechanismus na výpočet římských čísel), použije hodnotu decimal. U alfabetických systémů není definováno, jak se má prohlížeč chovat na konci abecedy – např. při zobrazení 27. položky se stylem lower-latin (latinská abeceda má 26 znaků). Pro delší seznamy se proto doporučuje použít číselný systém.

Zarovnání značek (znaků, čísel) záleží na prohlížeči (doprava, doleva, na střed).

list-style-image

Tato vlastnost (hodnota <uri>) specifikuje obrázek, který se má použít jako značka u položek seznamu.

  • povolené hodnoty: <uri> | none | inherit
  • výchozí hodnota: none

Pokud je hodnota <uri> a obrázek je dostupný, bude jím nahrazena značka definovaná vlastností list-style-type.

UL {list-style-image: url(„http://png.com/ellipse.png“);}

Umístění odrážky

Odrážku umisťujeme pomocí vlastnosti list-style-position. Může být buď uvnitř textu, tomu odpovídá hodnota inside, nebo vně textu s hodnotou outside.

list-style-position

Tato vlastnost specifikuje umístění boxu značky vzhledem k hlavnímu boxu.

  • povolené hodnoty:
    • outside – značka je umístěna vně hlavního boxu. Pokud chcete umístění specifikovat přesně, použijte markers (viz výše).
    • inside – značka je prvním inline boxem uvnitř hlavního boxu, který ostatní obsah obtéká
    • inherit
  • výchozí hodnota: outside
UL {list-style: outside}
UL.kompaktni {list-style: inside}
…
<UL>
<LI>nejprve přijde první položka
<LI>po ní následuje druhá položka
</UL>
<UL class=“kompaktni“>
<LI>nejprve přijde první položka
<LI>po ní následuje druhá položka
</UL>

list-style

Tato vlastnost je zkratkou umožňující definovat všechny vlastnosti seznamů najednou.

  • povolené hodnoty: [ <list-style-type> || <list-style-image> || <list-style-position> ] | inherit
  • výchozí hodnota: pro zkratky se nedefinuje
Hodnota none v této vlastnosti nastaví none současně pro list-style-type i pro list-type-image.
UL {list-style: upper-roman inside}
UL > UL {list-style: url(„http://png.com/ellipse.png“) disc outside;}

Ve druhé definici se použije styl disc, jen pokud obrázek nebude dostupný. V definicích seznamů se nedoporučuje používat selektor následníka (selektory odděleny mezerou), neboť vzhledem k dědičnosti může přinášet nepredikovatelné výsledky:

OL LI {list-style: lower-alpha;} /* každý LI následník nějakého OL */
OL > LI {list-style: lower-alpha;} /* každý přímý LI potomek nějakého OL */

Obě definice vypadají podobně, ale první z nich může přinést neočekávaná překvapení, až zmatení prohlížeče.