LINUXSOFT.cz Přeskoč levou lištu
Uživatel: Heslo:  
   CZUKPL

> CSS (14.) - Seznam

Dnes se budeme zabývat vlastnostmi umožňující pomocí kaskádových stylů nadefinovat vzhled seznamů.

2.12.2004 15:00 | Vasek | Články autora | přečteno 16462×

V html máme jen omezené možnosti pro nastavení vzhledu seznamu.

Styl značky

Pro nastavení vzhledu odrážek jednotlivých položek seznamu lze nastavit pomocí vlastnosti list-style-type. Jako její hodnota se používají klíčová slova.

list-style-type
Hodnoty: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | upper-greek | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha | none | inherit
Výchozí hodnota: disc
Ovlivňuje: prvky, jež mají hodnotu vlastnosti display rovnou list-item
Dědičná: ano
Procenta: nelze používat
Média: vizuální
  none žádné odrážky se nezobrazí
  disc nastaví grafickou odrážku, její vzhled závisí na klietovi. Obvykle se jedná o plný kruh.
  circle nastaví grafickou odrážku, její vzhled závisí na klietovi. Obvykle se jedná o kružnici.
  square nastaví grafickou odrážku, její vzhled závisí na klietovi. Obvykle se jedná o čtverec.
  decimal položky jsou číslovány vzestupně arabskými číslicemi počínaje 1.
  decimal-leading-zero položky jsou číslovány vzestupně arabskými číslicemi doplněné vlevo o nulu, počínaje 01.
  lower-roman položky jsou číslovány vzestupně římskými číslicemi pomocí malých písem počínaje i.
  upper-roman položky jsou číslovány vzestupně římskými číslicemi pomocí velkých písem počínaje I.
  lower-greek položky jsou označeny abecedně malými písmeny řecké abecedy počínaje α.
  upper-greek položky jsou označeny abecedně velkými písmeny řecké abecedy počínaje Α.
  lower-alpha položky jsou označeny abecedně malými písmeny ASCII počínaje a.
  lower-latin položky jsou označeny abecedně malými písmeny latinské abecedy počínaje a. (výsledek je stejný jako u předešlé hodnoty)
  upper-alpha položky jsou označeny abecedně velkými písmeny ASCII počínaje A.
  upper-latin položky jsou označeny abecedně velkými písmeny latinské abecedy počínaje A. (výsledek je stejný jako u předešlé hodnoty)
  hebrew položky jsou číslovány tradičním hebrejským číslováním.
  armenian položky jsou číslovány tradičním arménským číslováním.
  georgian položky jsou číslovány tradičním gregorianským číslováním.
  cjk-ideographic položky jsou číslovány prostým deografickým číslováním.
  hiragana položky jsou označeny abecedně japonskou abecedou hiragana.
  katakana položky jsou označeny abecedně japonskou abecedou katakana.
  hiragana-iroha položky jsou označeny abecedně japonskou abecedou hiragana-iroha.
  katakana-iroha položky jsou označeny abecedně japonskou abecedou katakana-iroha.
  inherit hodnota se dědí po rodičovském prvku

Pokud klient nepodporuje daný typ číslování (resp. danou znakovou sadu pro označení písmeny), měl by použít hodnotu decimal. Pokud se vyčerpají znaky nadefinované abecedy, další odrážky se již nezobrazí. Proto je vhodnější pro delší seznamy používat raději číslování něž písmena.

V praxi se musí počítat s tím, že námi definovaný styl odrážek se může zobrazit jinak, než jsme předpokládali. Proto bychom se neměli v textu nikde odkazovat na konkrétní položku seznamu např. viz odstavec atd.

Příklady stylu

ie firefox konqueror mozilla netscape

Podpora v prohlížečích

NN4 podpora s chybami; Mozilla (Netscape 6+) podpora s chybami; IE podpora s chybami od verze 4; Opera částečně od verze 3; IE 5/MAC částečně od verze 4; Konqueror částečně.

Obrázek pro odrážku

Nastavení obrázku použitého pro odrážku lze provést pomocí vlastnosti list-style-image. Jako její hodnoty se používá uri obrázku.

list-style-image
Hodnoty: <uri> | none | inherit
Výchozí hodnota: none
Ovlivňuje: prvky, jež mají hodnotu vlastnosti display rovnou list-item
Dědičná: ano
Procenta: nelze používat
Média: vizuální
  <uri> viz díl č. 4
  none na pozadí nebude žádný obrázek
  inherit hodnota se dědí po rodičovském prvku

Používá se pro nastavení dekorativních odrážek seznamu. Obrázek se určuje pomocí uri (nebo-li adresy obrázku). Pokud budete používat relativní adresu obrázku, je potřeba mít na paměti, že musí být relativní k umístění stylového předpisu. Pokud bude obrázek moc velký, vykreslí se jenom jeho horní pravý roh.

Příklad nastavení dekorativní odrážky

ul {
list-style-image: url('img/sipka2.png')  
}
  • Pondělí
  • Úterý

Podpora v prohlížečích

NN4 nepodporuje; Mozilla (Netscape 6+) plná podpora všemi verzemi; IE plná podpora od verze 4; Opera plná podpora od verze 3,5; IE 5/MAC plná podpora; Konqueror plná podpora.

Pozice odrážky

Nastavení pozice odrážky v seznamu lze provést pomocí vlastnosti list-style-position. Jako její hodnota se používají klíčová slova.

list-style-position
Hodnoty: inside | outside | inherit
Výchozí hodnota: outside
Ovlivňuje: prvky, jež mají hodnotu vlastnosti display rovnou list-item
Dědičná: ano
Procenta: nelze používat
Média: vizuální
  inside odrážky jsou součástí seznamu
  outside odrážky nejsou součástí seznamu
  inherit hodnota se dědí po rodičovském prvku

Tato vlastnost je další bezproblémovou vlastností kaskádových stylů. Určuje pozici odrážek vůči seznamu.

Příklad umístění odrážky

ul {
list-style-position: outside  
}
  • Pondělí
    Pondělí
  • Úterý
    Úterý


ul {
list-style-position: inside  
}
  • Pondělí
    Pondělí
  • Úterý
    Úterý

Podpora v prohlížečích

NN4 nepodporuje, vše vykresluje jako outside; Mozilla (Netscape 6+) plná podpora všemi verzemi; IE plná podpora od verze 5, verze 4 vykresluje odrážku nepřesně při použití hodnoty outside; Opera plná podpora od verze 4; IE 5/MAC špatně; Konqueror plná podpora, při použítí hodnoty outside a vlastnosti display nastavené na hodnotu list-item se nevykresluje zbytek stránky.

Sdružená vlastnost

Sdružená vlastnost list-style umožňuje nastavit všechny předcházející vlastnosti současně.

list-style
Hodnoty: <list-style-type> | <list-style-position> | <list-style-image> | inherit
Výchozí hodnota: viz dílčí vlastnosti
Ovlivňuje: prvky, jež mají hodnotu vlastnosti display rovnou list-item
Dědičná: ano
Procenta: nelze používat
Média: vizuální
  <list-style-type> viz výše
  <list-style-position> viz výše
  <list-style-image> viz výše
  inherit hodnota se dědí po rodičovském prvku

Jde o úsporný zápis všech vlastností pro pozadí v kaskádových stylech. Všechny vlastnosti sdružené do vlastnosti list-style jsou nejdříve nastavené na výchozí hodnoty, a poté jsou všechny vlastnosti nastavené na hodnoty, které byly nadefinovány ve vlastnosti list-style. Při zadávání jednotlivých hodnot není potřeba dodržet jejich výše uvedené pořadí.

Ekvivalentní zápis

li { /* nastavení pomocí sdružené vlastnosti */
list-style: square outside url("odrazka.gif")  
}

li {/* nastavení pomocí jednotlivých vlastností */
list-style-type: square  
list-style-image: url("odrazka.gif")  
list-style-position: outside  
}

Podpora v prohlížečích

NN4 nedpodporuje; Mozilla (Netscape 6+) plná podpora všemi verzemi; IE plná podpora od verze 4; Opera plná podpora od verze 3,5; IE 5/MAC plná podpora; Konqueror plná podpora.

Závěr

Dnes jsme se seznámili s vlastnostmi pro nastavení vzhledu odrážek seznamu pomocí kaskádových stylů.

Verze pro tisk

pridej.cz

 

DISKUZE

Nejsou žádné diskuzní příspěvky u dané položky.



Příspívat do diskuze mohou pouze registrovaní uživatelé.
> Vyhledávání software
> Vyhledávání článků

14.11.2017 16:56 /František Kučera
Máš rád svobodný software a hardware nebo se o nich chceš něco dozvědět? Zajímá tě DIY, CNC, SDR nebo morseovka? Přijď na sraz spolku OpenAlt – tradičně první čtvrtek před třetím pátkem v měsíci: 16. listopadu od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5).
Přidat komentář

12.11.2017 11:06 /Redakce Linuxsoft.cz
PR: 4. ročník odborné IT konference na téma Datová centra pro business proběhne již ve čtvrtek 23. listopadu 2017 v konferenčním centru Vavruška, v paláci Charitas, Karlovo náměstí 5, Praha 2 (u metra Karlovo náměstí) od 9:00. Konference o návrhu, budování, správě a efektivním využívání datových center nabídne odpovědi na aktuální a často řešené otázky, např Jaké jsou aktuální trendy v oblasti datových center a jak je využít pro vlastní prospěch? Jak zajistit pro firmu či jinou organizaci odpovídající služby datových center? Podle jakých kritérií vybrat dodavatele služeb? Jak volit součásti infrastruktury při budování či rozšiřování vlastního datového centra? Jak efektivně spravovat datové centrum? Jak eliminovat možná rizika? apod.
Přidat komentář

13.9.2017 8:00 /František Kučera
Máš rád svobodný software a hardware nebo se o nich chceš něco dozvědět? Zajímá tě DIY, CNC, SDR nebo morseovka? Přijď na sraz spolku OpenAlt – tentokrát netradičně v pondělí: 18. září od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5).
Přidat komentář

3.9.2017 20:45 /Redakce Linuxsoft.cz
PR: Dne 21. září 2017 proběhne v Praze konference "Mobilní řešení pro business". Hlavní tématy konference budou: nejnovější trendy v oblasti mobilních řešení pro firmy, efektivní využití mobilních zařízení, bezpečnostní rizika a řešení pro jejich omezení, správa mobilních zařízení ve firmách a další.
Přidat komentář

15.5.2017 23:50 /František Kučera
Máš rád svobodný software a hardware nebo se o nich chceš něco dozvědět? Zajímá tě DIY, CNC, SDR nebo morseovka? Přijď na sraz spolku OpenAlt, který se bude konat ve čtvrtek 18. května od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5).
Přidat komentář

12.5.2017 16:42 /Honza Javorek
PyCon CZ, česká konference o programovacím jazyce Python, se po dvou úspěšných ročnících v Brně bude letos konat v Praze, a to 8. až 10. června. Na konferenci letos zavítá např. i Armin Ronacher, známý především jako autor frameworku Flask, šablon Jinja2/Twig, a dalších projektů. Těšit se můžete na přednášky o datové analytice, tvorbě webu, testování, tvorbě API, učení a mentorování programování, přednášky o rozvoji komunity, o použití Pythonu ve vědě nebo k ovládání nejrůznějších zařízení (MicroPython). Na vlastní prsty si můžete na workshopech vyzkoušet postavit Pythonem ovládaného robota, naučit se učit šestileté děti programovat, efektivně testovat nebo si v Pythonu pohrát s kartografickým materiálem. Kupujte lístky, dokud jsou.
Přidat komentář

2.5.2017 9:20 /Eva Rázgová
Putovní konference československé Drupal komunity "DrupalCamp Československo" se tentokrát koná 27. 5.2017 na VUT FIT v Brně. Můžete načerpat a vyměnit si zkušenosti z oblasti Drupalu 7 a 8, UX, SEO, managementu týmového vývoje, využití Dockeru pro Drupal a dalších. Vítáni jsou nováčci i experti. Akci pořádají Slovenská Drupal Asociácia a česká Asociace pro Drupal. Registrace na webu .
Přidat komentář

1.5.2017 20:31 /Pavel `Goldenfish' Kysilka
PR: 25.5.2017 proběhne v Praze konference na téma Firemní informační systémy. Hlavními tématy jsou: Informační systémy s vlastní inteligencí, efektivní práce s dokumenty, mobilní přístup k datům nebo využívání cloudu.
Přidat komentář

   Více ...   Přidat zprávičku

> Poslední diskuze

5.12.2017 11:50 / Thomas
kitchen renovations

18.9.2017 14:37 / Rojas
high security vault

15.9.2017 7:33 / Wilson
new zealand childcare jobs

31.8.2017 12:11 / Jaromir Obr
Re: ukůládání dat ze souboru

30.7.2017 11:12 / Jaromir Obr
Národní znaky

Více ...

ISSN 1801-3805 | Provozovatel: Pavel Kysilka, IČ: 72868490 (2003-2017) | mail at linuxsoft dot cz | Design: www.megadesign.cz | Textová verze