Download
1 / 19
190 likes | 330 Views
13.. ledna 2013. VY_32_INOVACE_160315_SELEKTORY_DUM. Selektory. Selektory. Elementy v dokumentu vytvářejí stromovou strukturu a mohou dědit vlastnosti od svého nadřazeného elementu. V přímém příbuzenství se jedná o vztah rodiče a potomka. Sdružování selektorů.
E N D
13.. ledna 2013 VY_32_INOVACE_160315_SELEKTORY_DUM Selektory
Selektory Elementy v dokumentu vytvářejí stromovou strukturu a mohou dědit vlastnosti od svého nadřazeného elementu. V přímém příbuzenství se jedná o vztah rodiče a potomka.
Sdružování selektorů Vlastnosti CSS můžeme přiřadit více selektorům. Vícenásobná deklarace přiděluje jeden styl více selektorům oddělených čárkou. Obecná syntaxe: selektor1, selektor2, selektor3 {deklarace vlastností } Příklad: h1, h2, h3 {color: red; font-weight:200; letter-spacing:0.2em;}
Univerzální selektor Pro stylování lze vybrat jakýkoli element v dokumentu. Je na nejvyšším místě hierarchie dokumentu. Obecná syntaxe: *{ deklarace vlastností } Příklad: *{ margin:10px; padding: 15px }
Třída prvku Každý prvek může být zařazen do nějaké třídy (či více tříd současně), v jedné třídě přitom může být více různých prvků. Zařazení do třídy se označuje atributem class=“jméno třídy“. Obecná syntaxe: .třída{ deklarace vlastností } Definice třídy pro libovolný element. element.třída{deklarace vlastností } Definice třídy pro pouze specifikovaný element. Příklad – zápis v CSS: .zvyrazneni {color:white; background-color:black; padding:10px; font-weight:bolder;}
Třída prvku Nastavení v HTML dokumentu <p class=“zvyrazneni“> Text texttext </p> <p>text text</p> <h1 class=“zvyrazneni“> Nadpis </p> Zápis v CSS .zvyrazneni {font-family: Arial, Verdana, Tahoma, serif; color: red; font-weight: 800; font-size:140%;}
Vícenásobné třídy Výhodou použití tříd je vlastnost, že jeden prvek může být současně ve více třídách. Třídy se pak zapisují jako parametr atributu class oddělené mezerami. I když se nedoporučuje „masové“ využití této vlastnosti, v řadě případů může být užitečná. Zápis v CSS: .tucne{ font-weight:bold;} .kurziva {font-style:italic;} Nastavení v HTML dokumentu: <p class=“tucne kurziva“> Text text …</p>
Kdy použít třídu? Třída definuje určitou kategorii, která je opakovatelná. Můžete zavést třídu pro varování, názvy souborů, nastavení obrázků, či odkazy vedoucí na jiné servery. Jsou to všechno elementy, které na stránce nebudou jedinečné.
Jednoznačný název prvku Každý prvek v kódu stránky je možné pojmenovat pomocí atributu id=“jméno_prvku“. Identifikátor prvku musí být jedinečný. Prvek s identifikátorem se v CSS označuje znakem # a jménem prvku (bez mezery). Obecná syntaxe v CSS: #jmeno{ deklarace vlastností }
Jednoznačný název prvku Příklad: Zápis v CSS h1#nadpis{color: blue: font-size: 200%;} Zápis v HTML dokumentu <h1 id=“nadpis“>Historie Internetu</h1>
Kdy použít identifikátor? Identifikátor musí být na stránce jednoznačný. Měl by tedy sloužit k označení konstrukcí, které jsou v rámci stránky jedinečné. Například: • hlavní menu, • základní textovou oblast, • logo společnosti. Tyto prvky se na každé stránce vyskytují právě jednou a proto je identifikátor ideálním způsobem pro jejich odlišení.
Selektor pseudotřídy a pseudolementu CSS může přidat k prvků a třídám definovaným v dokumentu také další informace. Rozšiřuje definování selektorů o další možnosti. Obecná syntaxe: element:pseudotřída {deklarace vlastností} Příklady: p:first-line { font weight: bold } První řádek odstavce bude psán tučně.
Kontextový selektor Pravidlo bude platit pouze pro prvek umístěný uvnitř jiného prvku. Příklad: h1 em {color:red} p em {color:green} <h1>Platební karta <em>Visa</em> </h1> <p>Platební karty <em>Visa</em> dosáhly většího rozšíření v USA než v Evropě.</p>
Pravidlo !importatnt CSS umožňuje nadefinovat, která deklarace vlastností dostane přednost před jinou v případě konfliktu. Vyhrává vždy deklarace, která obsahuje pravidlo !importatnt. Příklad zápisu: li {font-style:italic !importatnt }
Klasifikace elementů Řádkové Slouží k formátování v rámci řádku (např. slovo, věta). Následující řádkový element pokračuje na stejném řádku. S řádovým elementem pracuje CSS v rámci nadřazeného blokového elementu. Typickým příkladem je <span>, </span>. Blokové Oblast formátování zahrnuje minimálně jeden celý řádek. Následující element bude začínat na dalším řádku. Blokový element tvoří celek, s nímž CSS pracuje při vykreslování objektů na stránce. Příkladem může být element <div>, </div>. Nahrazované Některé elementy ve zdrojovém kódu webové stránky pouze označují cílové místo, kde se bude zobrazovat obsah, který je uložen mimo samotný dokument. Příkladem může být element img určený pro zobrazování obrázku.
Specificita selektoru Specificita selektoru určuje váhu při rozhodování o tom, který styl použít. Pravidlo se silnějším selektorem přepíše pravidla se slabším selektorem. Specificita se určuje pomocí čtyř úrovní. Úrovně lze označit písmeny oddělenými čárkou: a, b, c, d. Syntaxe výpočtu • Nejsilnější je řádkový styl (např. <div style=“font-style:cursive“>). Specificita: 1, 0, 0, 0. • Slabší je selektor s identifikátorem (např. div#obsah). Specificita: 0, 1, 0, 0. • Dále je slabší třída, pseudotřída nebo selektor parametru (např. h1.silnynebo a[tref]). Specificita: 0, 0, 1, 0. • Ještě slabší je typový selektor nebo pseudoelement (např. h1 nebo first-line). Specificita: 0, 0, 1, 0. • Nejmenší váhu má univerzální selektor nebo jeho kombinace (např. *). Specificita: 0, 0, 0, 1. • Výpočet specificity selektoru probíhá kumulativně, to znamená, že se jednotlivé úrovně sčítají a vyhrává selektor s nejvyšší specificitou.
Použité 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-05-06, 06:20:10 [cit. 2013-01-13]. 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.
Použité zdroje • Poradenské centrum pro drogové a jiné závislosti [online]. 2012 [cit. 2013-01-13]. Dostupné z: http://www.poradenskecentrum.cz/ • Junkie.jpg. 2012. Dostupné z: http://www.helpforinternetaddictions.com/img/junkie1.jpg • Havěť která žila dva roky bez detekce?. HÁK, Igor. Http://www.viry.cz [online]. 2013-01-13 [cit. 2013-01-13]. Dostupné z: http://www.viry.cz/clanek/havet-ktera-zila-dva-roky-bez-detekce • http://t3.gstatic.com/images?q=tbn:ANd9GcQ0EHvWZLyMAYzxejKnVRhDf-OKvCnZMeCWOjEi-uo6LXskt1BNJ8TiloIlebka.jpg • http://t2.gstatic.com/images?q=tbn:ANd9GcTZWrXpLOsBoVOJKB3CBoUuSXMsJYtS05AWpN4ZUrILT5fjIJm4
