Technologie pro publikování na webu 1

1. Selektory, pseudotřídy, formátování textu, pozicování Technologie pro publikování na webu 1 Ing. Jiří Štěpánek

2. Selektory (připomenutí) • Slouží ke svázání XHTML elementů s definovaným formátováním • Příslušný styl lze elementu přiřadit vazbou • Přes název elementu • Přes třídu • Přes id Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

3. Selektory pro vnořené elementy • Počáteční problém: jak zajistit, aby se určitý element formátoval v různých částech stránky jinak (např. odkaz v těle a patičce stránky) • Definice tříd pro oba typy odkazů • Nutnost každému odkazu definovat třídu, podle které se má formátovat, redundance kódu. • Definice vnořeného elementu • Definován formát pouze pro odkaz, který se nachází v patičce, pro jiné odkazy na stránce nebude toto formátování použito Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

4. Selektory pro vnořené elementy • Možnost definování stylu pro libovolně zanořené elementy • Komponenty selektoru mohou být • Typové (název XHTML elementu) • Třída (obecná i speciální pro určitý element) • ID • Element je naformátován, pokud jsou splněna pravidla selektoru – označení a umístění elementu odpovídá deklaraci selektoru Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

5. Selektory pro vnořené elementy • Řešení problému s formátováním odkazu pouze v patičce div.paticka { /* definice stylu pro paticku */ } div.patickaa { /* definice stylu odkazu, ktery je v paticce */ color: Red; } V tomto případě se odkaz naformátuje červeně a to pouze v patičce. Druhý selektor říká: Odkazy umístěné v divu s třídou „paticka“ budou červené. Nezáleží, jak hluboko je odkaz zanořen, stačí aby byl někde uvniř <div class=“paticka“></div>. Je jedno, zda bude přímo v divu, nebo ještě obalen např. odstavcem. Odkaz v tomto případě není třeba opatřovat atributem class nebo id – protože je deklarován styl pro „čísté“ a Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

6. Selektory pro vnořené elementy • Selektor lze definovat i pro více než jedno zanoření a lze v něm kombinovat komponenty typové, třídy i id. • Z hlediska syntaxe jsou komponenty selektoru oddělovány mezerou Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

7. Selektory pro vnořené elementy • Následující příklad formátuje odkaz třídy „nepodtrzeny“, který je vnořen v elementu, jehož id je „paticka“ a navíc musí být ještě vnořen v odstavci. #patickapa.nepodtrzeny { text-decoration: none; } V tomto případě je nutné odkaz opatřit atributem class s hodnotou „nepodtrzeny“ Technologie pro publikovánínawebu 1, Ing. JiříŠtěpánek

8. Společná deklarace • Stejný styl lze deklarovat několika selektorům bez, zbytečného opisování definic stylů, na jednom místě div#patickaa, p.mujodstaveca, span.podtrzenytext { text-decoration: underline; /* spolecna definice stylu pro 3 ruzne selektory */ /* jedinaspolecna vlastnost je podtrzeny text */ } Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

9. Pseudotřídy • Nejedná se o klasické třídy • Jejich výčet je konečný a pevně definovaný • Nelze tvořit vlastní pseudotřídy • Vyjadřují aktuální stav elementů • Syntakticky se název pseudotřídy píše za dvojtečku (viz následující slide) • Mohou být i dynamické, tj. že prvek může střídavě patřit a nepatřit do pseudotřídy • Selektor s pseudotřídou může být součástí společné deklarace Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

10. Pseudotřídy Písmeno E symbolizuje libovolný selektor (a, .mojetrida, #paticka …) • E:link … pseudotřída – váže se k prvku E, je-li tento prvek nenavštíveným odkazem • E:visited … pseudotřída - váže se k prvku E, je-li tento prvek navštíveným odkazem • E:active …pseudotřída - váže se k prvku E, je-li tento prvek aktivním (vybraným) odkazem • E:hover … pseudotřída - váže se k prvku E, je-li nad tímto prvkem kurzor myši Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

11. Pseudotřídy • E:focus … pseudotřída - váže se k prvku E (hlavně ve formulářích), je-li tento prvek aktivní (je na něm kurzor) • E:lang(xx) … pseudotřída - váže se k prvku E, je-li tento prvek v jazyce xx (podpora pouze IE5/Mac) Technologie pro publikovánínawebu 1, Ing. JiříŠtěpánek

12. Pseudotřídy - příklad a { color: Black; text-decoration: underline; } a:hover { text-decoration: none; } • Běžný odkaz bude černý a podtržený, po najetí kurzoru na odkaz podtržení zmizí. • Selektor s pseudotřídou dědí všechny vlastnosti od původního selektoru, proto není třeba znovu definovat barvu, pokud není záměrem, aby se po najetí kurzoru na odkaz změnila. • Pseudotřídlu lze přiřadit libovolnému selektoru, ne jen typovému Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

13. Dědičnost • V hierarchii vnořených elementů platí dědičnost některých vlastností z nadřazeného prvku • Například při definici určitého typu písma nebo jeho barvy tělu stránky (<body>) tyto vlastnosti přejdou na vnořené elementy, jako např. na odstavce automaticky, bez potřebné definice stylu pro tyto vnořené elementy. Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

14. Pokročilá deklarace selektorů • * … univerzální selektor (pokud není jedinou komponentou selektoru, lze jej vynechat) • E, F, G … seskupené selektory – styl se bude vázat na prvky E, F, G • E F … selektor následníka - element F je kdekoliv uvnitř E, • E > F … selektor potomka - element F přímým potomkem E, • E + F … selektor sousedního sourozence - elementy E a F jsou na stejné úrovni stromu. Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

15. Formátování textu Výběr fontu … font-family: arial, verdana, sans-serif; Při zápisu fontů vždy ve výčtu uvádíme tzv. generickou rodinu písma Patkové písmo: serif Bezpatkové písmo: sans-serif Neproporciální písmo: monotype Velikost písma font-size:normal; nebo font-size:10px; nebo font-size: 1.1em; Nastavení řezu písma font-style:italic; Tloušťka písma font-weight:bold; Nastavení „kapitálek“ font-variant: small-caps; Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

16. Formátování textu Horizontální zarovnání … text-align: left; Platí pouze pro řádkové elementy (zejména text)!!! Odsazení prvního řádku v bloku … text-indent:5%; Velikost písmen … text-transform:uppercase; “Ozdoby” textu … text-decoration:underline; Mezery mezi písmeny …letter-spacing:normal; Mezery mezi slovy … word-spacing:5px; Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

17. Pozicování – okraje boxů • Vlastnosti margin a padding • margin – vnější okraje boxu • padding – vnitřní okraje boxu Z pohledu modrého boxu je X margin, z pohledu červeného boxu se jedná o padding X Technologie pro publikovánínawebu 1, Ing. JiříŠtěpánek

18. Pozicování – okraje boxů • Okraje se vždy určují z pohledu formátovaného prvku • Definovat lze • Každý okraj zvlášťmargin-[top|right|bottom|left]:10px; • Sduženěmargin: 10px 15px 10px 15px; • Všechny okraje stejnémargin: 10px; Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

19. Příští přednáška • Pozicování boxů • Plovoucí boxy, obtékání • Tvorba CSS layoutu • Alternativní styly Technologie pro publikování na webu 1, Ing. Jiří Štěpánek