Download
1 / 13
130 likes | 282 Views
20. ledna 2013. VY_32_INOVACE_160316_Seznamy_DUM. Seznamy. Seznamy. Dokumenty HTML (XHTML) používají následující typy seznamů: uspořádané, neuspořádané, definiční výčet. Uspořádaný seznam. Položkám je předřazeno číslo nebo písmeno. <p> Blok elementu se skládá z následujících částí: </p>
E N D
20. ledna 2013 VY_32_INOVACE_160316_Seznamy_DUM Seznamy
Seznamy Dokumenty HTML (XHTML) používají následující typy seznamů: • uspořádané, • neuspořádané, • definiční výčet.
Uspořádaný seznam Položkám je předřazeno číslo nebo písmeno. <p>Blok elementu se skládá z následujících částí:</p> <ol> <li>obsah elementu,</li> <li>vnitřní okraj,</li> <li>rámeček,</li> <li>vnější rámeček.</li> </ol> počáteční značka neuspořádaného seznamu položka koncová značka neuspořádaného seznamu
Neuspořádaný seznam Položkám seznamu je předřazena grafická značka (obrázek). <p>Příklady distribucí Linuxu:</p> <ul> <li>Ubuntu,</li> <li>Fedora,</li> <li>Mandriva.</li> </ul> počáteční značka neuspořádaného seznamu položka seznamu koncová značka neuspořádaného seznamu
Definiční výčet Vhodný typ seznamu pro položky, ke kterým je nutné umístit delší popis. <dl> <dt>Přítomný čas – Present Tense</dt> <dd>Prostý přítomný čas vyjadřuje děj obvyklý nebo opakovaný přítomnosti.</dd> <dt>Minulý čas – Past Tense</dt> <dd>Prostý přítomný čas vyjadřuje děj, který se odehrál a skončil v nějaké době minulé.</dd> </dl>
list-style-type Vlastnost list-style type určuje typ označení položky seznamu.
Příklad použití „list-style-type“ ul {list-style-type:square} ulul {list-style-type:circle} • Položky první úrovně seznamu budou označeny čtverečkem. • Položky ve druhé úrovni budou označeny prázdným kolečkem.
list-style position Určuje umístění označení položky seznamu (odrážka, číslo, písmeno) po zalomení textu. inside Označení položky seznamu se umístí dovnitř položky seznamu. Zalomený text bude pokračovat pod označení položky. outside Označení položky seznamu se umístí vně položky seznamu. Zalomený text bude pokračovat vedle označení položky. inherit Hodnota se zdědí od nadřazeného elementu.
Příkladlist-style position ul {list-style-position:inside} Označení položek seznamu se umístí dovnitř elementu seznamu.
list-style-image Umožňuje použít jako odrážku obrázek. url (URL souboru) Zobrazí obrázek jako označení položky seznamu. none Žádný obrázek se nezobrazí. Použije se standardní označení položek seznamu. inherit Hodnota se zdědí od nadřazeného elementu. Příklad: ul {list-style-image: url(obr/obr.gif)}
Zdroje • JIŘÍ KROUŽEK, Martin Domes. CSS: Kapesní přehled. Vyd. 1. Brno: ComputerPress, 2006. ISBN 80-251-0773-6. • STANÍČEK, Petr. Kompletní průvodce CSS: kaskádové styly. Vyd. 1. Brno: ComputerPress, 2003, 178 s. ISBN 80-7226-872-4. • GOLDSTEIN, Alexis, Louis LAZARIS a Estelle WEYL. HTML5 a CSS3 pro webové designéry. Vyd. 1. Brno: ZonerPress, 2011, 286 s. Encyklopedie webdesignera. ISBN 978-80-7413-166-0. • W3C. Kaskádové styly: domovská stránka [online]. 2012-01-06, 06:20:10 [cit. 2012-01-20]. Dostupné z: http://www.w3.org/Style/CSS/Overview.cs.html • CASTRO, Elizabeth. HTML, XHTML a CSS: názorný průvodce tvorbou WWW stránek. Vyd. 1. Brno: ComputerPress, 2007, 438 s. ISBN 978-80-251-1531-2.
Zdroje • http://t2.gstatic.com/images?q=tbn:ANd9GcR-zCTlrTbg_fEgwCawgmxoCgeHGUKu3Lnea9ITQysQHMyZHmIS • http://t3.gstatic.com/images?q=tbn:ANd9GcSg0Bdy3goDP7GOtLrn3aW6eGUDQ7Ysl-GUrbbGFQi5Mr9r2Yzb • http://t0.gstatic.com/images?q=tbn:ANd9GcS3onWgmwCRLVnwRCdkSnNhYVCOPBFztVN28pmTnxI_ycesGpB0Ag
