Multimediální systémy 1

Multimediální systémy 1 Selektory, pseudotřídy, formátování textu, pozicování Ing. Monika Šimková

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

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

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

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

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

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“

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 */ }

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

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

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)

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

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.

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.

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;

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;

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

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;

Příští přednáška • Pozicování boxů • Plovoucí boxy, obtékání • Tvorba CSS layoutu • Alternativní styly

Multimediální systémy 1