Title of the document The content of the document...... Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Autorem materiálu a všech jeho částí, není-li.

Prezentace na téma: "Title of the document The content of the document...... Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Autorem materiálu a všech jeho částí, není-li."— Transkript prezentace:

1 Title of the document The content of the document...... Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Michal Sonnek. Obchodní akademie a Střední odborná škola logistická, Opava, příspěvková organizace. Vzdělávací materiál byl vytvořen v rámci OP VK 1.5 – EU peníze středním školám, registrační číslo CZ.1.07/1.5.00/34.0809. Seznamy 1 20. ledna 2013VY_32_INOVACE_160316_Seznamy_DUM

2 Title of the document The content of the document...... Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Seznamy Dokumenty HTML (XHTML) používají následující typy seznamů: uspořádané, neuspořádané, definiční výčet. 2

3 Title of the document The content of the document...... Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Uspořádaný seznam Položkám je předřazeno číslo nebo písmeno. Blok elementu se skládá z následujících částí: obsah elementu, vnitřní okraj, rámeček, vnější rámeček. 3 počáteční značka neuspořádaného seznamu koncová značka neuspořádaného seznamu položka

4 Title of the document The content of the document...... Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Neuspořádaný seznam Položkám seznamu je předřazena grafická značka (obrázek). Příklady distribucí Linuxu: Ubuntu, Fedora, Mandriva. 4 koncová značka neuspořádaného seznamu počáteční značka neuspořádaného seznamu položka seznamu

5 Title of the document The content of the document...... Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Definiční výčet Vhodný typ seznamu pro položky, ke kterým je nutné umístit delší popis. Přítomný čas – Present Tense Prostý přítomný čas vyjadřuje děj obvyklý nebo opakovaný přítomnosti. Minulý čas – Past Tense Prostý přítomný čas vyjadřuje děj, který se odehrál a skončil v nějaké době minulé. 5

6 Title of the document The content of the document...... Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás list-style-type Vlastnost list-style type určuje typ označení položky seznamu. 6 disc černý puntík circle kolečko square čtvereček decimal celé číslo decimal-leading-zero číslo začínající nulou lower-roman malé římské číslo upper-roman velké římské číslo lower-alpha malé písmeno upper-alpha velké písmeno lower-latin malé písmeno upper-latin velké písmeno none označení položek seznamu se nezobrazí inherithodnota se zdědí od nadřazeného elementu

7 Title of the document The content of the document...... Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Příklad použití „list-style-type“ ul {list-style-type:square} ul ul {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. 7

8 Title of the document The content of the document...... Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás 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. 8

9 Title of the document The content of the document...... Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Příklad list-style position ul {list-style-position:inside} Označení položek seznamu se umístí dovnitř elementu seznamu. 9

10 Title of the document The content of the document...... Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás 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)} 10

11 Title of the document The content of the document...... Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Své znalosti si zopakujte v zde. Kvíz 11

12 Title of the document The content of the document...... Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Zdroje JIŘÍ KROUŽEK, Martin Domes. CSS: Kapesní přehled. Vyd. 1. Brno: Computer Press, 2006. ISBN 80-251-0773-6. STANÍČEK, Petr. Kompletní průvodce CSS: kaskádové styly. Vyd. 1. Brno: Computer Press, 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: Zoner Press, 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: Computer Press, 2007, 438 s. ISBN 978-80-251-1531-2. 12

13 Title of the document The content of the document...... Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Zdroje http://t2.gstatic.com/images?q=tbn:ANd9GcR- zCTlrTbg_fEgwCawgmxoCgeHGUKu3Lnea9ITQysQHMyZHmIS http://t3.gstatic.com/images?q=tbn:ANd9GcSg0Bdy3goDP7GO tLrn3aW6eGUDQ7Ysl-GUrbbGFQi5Mr9r2Yzb http://t0.gstatic.com/images?q=tbn:ANd9GcS3onWgmwCRLVn wRCdkSnNhYVCOPBFztVN28pmTnxI_ycesGpB0Ag 13