Na obrázku vľavo, môžete vidieť objekty, ktoré menu obsahuje. Sú to rovnako použiteľné objekty ako je objekt menu. To znamená, že každý jeden z týchto objektov môže mať svoje vlastné css, ktoré zmenia vzhľad ktoréhokoľvek objektu.
Na mojom Simple Blue designe však nie je použité žiadne CSS, ktoré by menilo vzhľad ktoréhokoľvek z týchto objektov a tak si pozrieme len základné formátovanie samotného menu objektu.
Nové sú pre nás zoznamy s odrážkami, tzv. listy. Ak poznáte HTML, tak ide o tagy ul, ol, li. Pre menu máme definíciu #menu ul li, v ktorej je zapísané, že odrážky v menu nemajú mať žiadne odsadenie (margin) a nemajú mať ani žiadny typ odrážky (list-style: none;). Samotné #menu ul nám opäť definuje, že nemajú byť v ul použité žiadne okraje a ani odsadenie (margin a padding). Hneď pod touto definíciou definujeme #menu li, ktoré určuje, že každý jeden prvok zoznamu bude mať padding-left:5px; - odsadenie z ľavej strany - 5 pixelov. Ďaľšia, komplikovanejšia definícia, určuje vlastnosti "selektorov". Selektory sú typy štýlov, ktoré majú isté správanie pri - napríklad - prechode myšky nad niektorým objektom (a:hover, a:visited, a:link). Môžeme si teda popísať definíciu #menu li a, #menu li a:active, #menu li a:visited { color:#666; }. Táto hovorí, že všetky linky (#menu li a), všetky aktívne linky (a:active), všetky navštívené linky (a:visited) budú mať tmavú sivú farbu, definovanú pomocou color: #666;. Po tomto kóde je ešte definícia #menu li a:hover { color:#6590DF; }, ktorá určuje správanie liniek pri prechode myškou (a:hover). Ak prejdete v navigácii nad linkou, zmení farbu na #6590DF, čo je bledomodrá farba.
Veľmi dôležité sú definície pre všetky objekty, ktoré môžete vidieť aj na obrázku. Tu sa definuje vlastnosť, ktorá určuje všetky odsadenia textu v objektoch (padding).
To, čo všetky tieto objekty dokážu si povieme pri štýlovaní a tvorení vlastného vzhľadu objektov. Teraz prejdeme na ďalšiu "lekciu", ktorou bude zoznam článkov a objekty, používané v zozname.
Komentáre