Prezentace se nahrává, počkejte prosím

Prezentace se nahrává, počkejte prosím

Třídy, generické třídy, pseudotřídy CSS styly umožňují definovat pro každou značku (selektor) její vlastnosti. CSS styly umožňují definovat pro každou.

Podobné prezentace


Prezentace na téma: "Třídy, generické třídy, pseudotřídy CSS styly umožňují definovat pro každou značku (selektor) její vlastnosti. CSS styly umožňují definovat pro každou."— Transkript prezentace:

1 Třídy, generické třídy, pseudotřídy CSS styly umožňují definovat pro každou značku (selektor) její vlastnosti. CSS styly umožňují definovat pro každou značku (selektor) její vlastnosti. Někdy je potřeba definovat pro jednu značku, v různých částech vytvářeného dokumentu různé vlastnosti. To lze zajistit pomocí tzv. tříd a generických tříd. Někdy je potřeba definovat pro jednu značku, v různých částech vytvářeného dokumentu různé vlastnosti. To lze zajistit pomocí tzv. tříd a generických tříd.

2 Regulární třídy Třídy umožňují ve stylopisech vytvářet několik různých stylů pro jednu značku. Třídy umožňují ve stylopisech vytvářet několik různých stylů pro jednu značku. Tyto definované styly se liší jménem své třídy. Tyto definované styly se liší jménem své třídy. Tyto třídy jsou tzv. regulární. Tyto třídy jsou tzv. regulární. Mohou být použity například pro různé druhy odstavců. Mohou být použity například pro různé druhy odstavců.

3 Regulární třídy p.velke { text-align: left; font-size: 30pt; color: blue; } p.male { text-align: center; font-size: 10pt; color: red; } Ve vlastním kódu WWW stránky se musí použít parametr class="název třídy", který bude uveden u značky. Ve vlastním kódu WWW stránky se musí použít parametr class="název třídy", který bude uveden u značky. Toto je velké písmo Toto je velké písmo Toto je malé písmo Toto je malé písmo

4 Generické třídy Generické třídy lze použít u libovolné značky. Generické třídy lze použít u libovolné značky. U generické třídy není definován žádný selektor (značka). Před názvem třídy musí být tečka. U generické třídy není definován žádný selektor (značka). Před názvem třídy musí být tečka..cervena { color: red; } Tuto generickou třídu používáme stejným způsobem jako třídu regulární. Tuto generickou třídu používáme stejným způsobem jako třídu regulární. Červený text Červený text

5 Pseudotřídy U kaskádových stylů existují ještě tzv. pseudotřídy. U kaskádových stylů existují ještě tzv. pseudotřídy. Používají se k definici stylu zobrazení pro určité stavy značek. Používají se k definici stylu zobrazení pro určité stavy značek. Jméno značky (selektoru) se odděluje od názvu pseudotřídy dvojtečkou. Jméno značky (selektoru) se odděluje od názvu pseudotřídy dvojtečkou. Jednotlivé názvy tříd jsou předdefinovány - nelze vytvářet další pseudotřídy. Jednotlivé názvy tříd jsou předdefinovány - nelze vytvářet další pseudotřídy.

6 Pseudotřídy Nejpoužívanější pseudotřídy u odkazů: Nejpoužívanější pseudotřídy u odkazů: a:link- pro nenavštívený odkaz a:active- pro odkaz, který je právě vyvoláván a:visited- pro navštívený odkaz a:hover- pro odkaz, nad nímž se právě nachází kurzor myši li:hover- pro položku seznamu, nad nímž se právě nachází kurzor myši

7 Pseudotřídy Nejpoužívanější pseudotřídy u odstavců: Nejpoužívanější pseudotřídy u odstavců: p:first-line- pro zvýraznění prvního řádku odstavce p:first-letter- pro zvýraznění prvního znaku odstavce Důležité je pořadí definic pseudotříd. Pseudotřída :visited musí být uvedená dříve než :hover. Důležité je pořadí definic pseudotříd. Pseudotřída :visited musí být uvedená dříve než :hover.

8 Kontextové selektory Kontextové selektory zajistí, že se konkrétní styl použije pouze v okamžiku, kdy se v kódu stránky objeví příslušná posloupnost. Kontextové selektory zajistí, že se konkrétní styl použije pouze v okamžiku, kdy se v kódu stránky objeví příslušná posloupnost. li:hover ul {visibility:visible;} Pokud se tedy na stránce vyskytne posloupnost značek bude použito společné vlastnosti nastavené tímto kontextovým selektorem. Pokud myš přejede přes položku seznamu, za kterým následuje další vnořený seznam, vnořený seznam se zobrazí. Pokud se tedy na stránce vyskytne posloupnost značek bude použito společné vlastnosti nastavené tímto kontextovým selektorem. Pokud myš přejede přes položku seznamu, za kterým následuje další vnořený seznam, vnořený seznam se zobrazí.

9 Identifikátory Kromě regulárních tříd, pseudotříd a generických tříd je možné používat také tzv. identifikátory. Kromě regulárních tříd, pseudotříd a generických tříd je možné používat také tzv. identifikátory. Identifikátory se používají tehdy, pokud se daný identifikátor vyskytuje na stránce pouze jednou Identifikátory se používají tehdy, pokud se daný identifikátor vyskytuje na stránce pouze jednou Nejčastější použití je například při rozvržení stránky. Nejčastější použití je například při rozvržení stránky. Pře libovolným názvem identifikátoru musí být znak # (mřížka – "AltGr+x"). Pře libovolným názvem identifikátoru musí být znak # (mřížka – "AltGr+x").

10 Identifikátory - ukázka #obal { background-color: #bfbfbf; width: 1012px; margin: 0px auto 0px auto;} Do dané stránky se zapíše pomocí parametru id="nazev_identifikatoru"

11 CSS reset CSS reset nuluje přednastavené okraje všech značek (elementů). CSS reset nuluje přednastavené okraje všech značek (elementů). Důvodem může být sjednocení odsazení od okrajů, které se bohužel u jednotlivých prohlížečů liší. Důvodem může být sjednocení odsazení od okrajů, které se bohužel u jednotlivých prohlížečů liší. Po vyresetování okrajů je potřeba nastavit své vlastní okraje u jednotlivých značek. Po vyresetování okrajů je potřeba nastavit své vlastní okraje u jednotlivých značek.

12 CSS reset Hvězdičkový reset Hvězdičkový reset U tohoto typu resetu se vyresetují všechny značky dané stránky. Může nastat problém u formulářových prvků. U tohoto typu resetu se vyresetují všechny značky dané stránky. Může nastat problém u formulářových prvků. * {margin: 0; padding: 0;} U všech značek se nastaví vnější i vnitřní okraj na nulu. U všech značek se nastaví vnější i vnitřní okraj na nulu.

13 CSS reset Výběrový reset Výběrový reset U tohoto typu resetu se vyresetují pouze definované značky dané stránky. U tohoto typu resetu se vyresetují pouze definované značky dané stránky. html, body, ul, ol, li, h1, h2, h3, h4, h5, h6, img, table {margin: 0; padding: 0;} U všech definovaných značek se nastaví vnější i vnitřní okraj na nulu. U všech definovaných značek se nastaví vnější i vnitřní okraj na nulu.

14 Ukázka CSS stylopisu hlavní stránka... Obor: Mechanizace a služby Obor: Mechanizace a služby Zaměření: ZMS Zaměření: ZMS Obor: Veterinární prevence Obor: Veterinární prevence Obor: Zahradnictví Obor: Zahradnictví

15 Ukázka CSS stylopisu externí stylopis Soubor styl.css Soubor styl.css body { background-color: yellow; }/*nastavení barvy*/ h1 { color: #000000;/*nadpis, barva textu černá*/ text-align: left;/*zarovnávání vlevo*/ text-align: left;/*zarovnávání vlevo*/ font-size: 25px;/*velikost písma*/ font-size: 25px;/*velikost písma*/ font-style: italic; }/*kurzíva*/ font-style: italic; }/*kurzíva*/ h4 { color: red; /*nadpis, barva textu červená*/ text-align: center; /*zarovnávání na střed*/ text-align: center; /*zarovnávání na střed*/ font-size: 14px;/*velikost písma*/ font-size: 14px;/*velikost písma*/ font-style: italic; }/*kurzíva*/ font-style: italic; }/*kurzíva*/

16 Otázky k opakování 1. K jakým účelům se používají v CSS tzv. třídy? 2. Jaký je rozdíl mezi regulární třídou, pseudotřídou a generickou třídou? 3. Jak se v kódu HTML volají nadefinované třídy? 4. Jaké znáte pseudotřídy? 5. Záleží na pořadí definovaných pseudotříd? 6. Co je to kontextový selektor? 7. K jakému účelu slouží CSS reset?

17 Použité zdroje BLÁBOLIL, R. Informační a komunikační technologie. 3. rozšířené vydání. České Budějovice: KOPP, BLÁBOLIL, R. Informační a komunikační technologie. 3. rozšířené vydání. České Budějovice: KOPP, BLÁBOLIL, Roman. Podpora výuky: „Tvorba www stránek“ [online]. 6. února :30. Dostupný z WWW: Použité obrázky: Vlastní


Stáhnout ppt "Třídy, generické třídy, pseudotřídy CSS styly umožňují definovat pro každou značku (selektor) její vlastnosti. CSS styly umožňují definovat pro každou."

Podobné prezentace


Reklamy Google