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 19914×
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
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')
}
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
|
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ů
28.11.2018 23:56 /František Kučera Prosincový sraz spolku OpenAlt se koná ve středu 5.12.2018 od 16:00 na adrese Zikova 1903/4, Praha 6. Tentokrát navštívíme organizaci CESNET. Na programu jsou dvě přednášky: Distribuované úložiště Ceph (Michal Strnad) a Plně šifrovaný disk na moderním systému (Ondřej Caletka). Následně se přesuneme do některé z nedalekých restaurací, kde budeme pokračovat v diskusi.
Komentářů: 1
12.11.2018 21:28 /Redakce Linuxsoft.cz 22. listopadu 2018 se koná v Praze na Karlově náměstí již pátý ročník konference s tématem Datová centra pro business, která nabídne odpovědi na aktuální a často řešené otázky: Jaké jsou aktuální trendy v oblasti datových center a jak je optimálně využít pro vlastní prospěch? Jak si zajistit odpovídající služby datových center? Podle jakých kritérií vybírat dodavatele služeb? Jak volit vhodné součásti infrastruktury při budování či rozšiřování vlastního datového centra? Jak efektivně datové centrum spravovat? Jak co nejlépe eliminovat možná rizika? apod. Příznivci LinuxSoftu mohou při registraci uplatnit kód LIN350, který jim přinese zvýhodněné vstupné s 50% slevou.
Přidat komentář
6.11.2018 2:04 /František Kučera Říjnový pražský sraz spolku OpenAlt se koná v listopadu – již tento čtvrtek – 8. 11. 2018 od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5). Tentokrát bez oficiální přednášky, ale zato s dobrým jídlem a pivem – volná diskuse na téma umění a technologie, IoT, CNC, svobodný software, hardware a další hračky.
Přidat komentář
4.10.2018 21:30 /Ondřej Čečák LinuxDays 2018 již tento víkend, registrace je otevřená.
Přidat komentář
18.9.2018 23:30 /František Kučera Zářijový pražský sraz spolku OpenAlt se koná již tento čtvrtek – 20. 9. 2018 od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5). Tentokrát bez oficiální přednášky, ale zato s dobrým jídlem a pivem – volná diskuse na téma IoT, CNC, svobodný software, hardware a další hračky.
Přidat komentář
9.9.2018 14:15 /Redakce Linuxsoft.cz 20.9.2018 proběhne v pražském Kongresovém centru Vavruška konference Mobilní řešení pro business.
Návštěvníci si vyslechnou mimo jiné přednášky na témata: Nejdůležitější aktuální trendy v oblasti mobilních technologií, správa a zabezpečení mobilních zařízení ve firmách, jak mobilně přistupovat k informačnímu systému firmy, kdy se vyplatí používat odolná mobilní zařízení nebo jak zabezpečit mobilní komunikaci.
Přidat komentář
12.8.2018 16:58 /František Kučera Srpnový pražský sraz spolku OpenAlt se koná ve čtvrtek – 16. 8. 2018 od 19:00 v Kavárně Ideál (Sázavská 30, Praha), kde máme rezervovaný salonek. Tentokrát jsou tématem srazu databáze prezentaci svého projektu si pro nás připravil Standa Dzik. Dále bude prostor, abychom probrali nápady na využití IoT a sítě The Things Network, případně další témata.
Přidat komentář
16.7.2018 1:05 /František Kučera Červencový pražský sraz spolku OpenAlt se koná již tento čtvrtek – 19. 7. 2018 od 18:00 v Kavárně Ideál (Sázavská 30, Praha), kde máme rezervovaný salonek. Tentokrát bude přednáška na téma: automatizační nástroj Ansible, kterou si připravil Martin Vicián.
Přidat komentář
Více ...
Přidat zprávičku
 Poslední diskuze
31.7.2023 14:13 /
Linda Graham iPhone Services
30.11.2022 9:32 /
Kyle McDermott Hosting download unavailable
13.12.2018 10:57 /
Jan Mareš Re: zavináč
2.12.2018 23:56 /
František Kučera Sraz
5.10.2018 17:12 /
Jakub Kuljovsky Re: Jaký kurz a software by jste doporučili pro začínajcího kodéra?
Více ...
|