Třídy, generické třídy, pseudotřídy 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.
Regulární třídy 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 třídy jsou tzv. regulární. Mohou být použity například pro různé druhy odstavců.
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. <p class=“velke“>Toto je velké písmo</p> <p class=“male“>Toto je malé písmo</p>
Generické třídy 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. .cervena { color: red; } Tuto generickou třídu používáme stejným způsobem jako třídu regulární. <h1 class=“cervena“>Červený text</h1>
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. 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.
Pseudotřídy 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
Pseudotřídy 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.
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. li:hover ul {visibility:visible;} Pokud se tedy na stránce vyskytne posloupnost značek <li><ul> 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í.
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 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").
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". <div id="obal"> ... </div>
CSS reset 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ší. Po vyresetování okrajů je potřeba nastavit své vlastní okraje u jednotlivých značek.
CSS reset Hvězdičkový reset * {margin: 0; padding: 0;} 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.
CSS reset Výběrový reset 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.
Ukázka CSS stylopisu hlavní stránka ... <link rel="stylesheet" href="styl.css" type="text/css" /> </head> <body> <h1>Obor: Mechanizace a služby</h1> <h4>Zaměření: ZMS</h4> <h1>Obor: Veterinární prevence</h1> <h1>Obor: Zahradnictví</h1> </body> </html>
Ukázka CSS stylopisu externí stylopis Soubor styl.css body { background-color: yellow; } /*nastavení barvy*/ h1 { color: #000000; /*nadpis, barva textu černá*/ text-align: left; /*zarovnávání vlevo*/ font-size: 25px; /*velikost písma*/ font-style: italic; } /*kurzíva*/ h4 { color: red; /*nadpis, barva textu červená*/ text-align: center; /*zarovnávání na střed*/ font-size: 14px; /*velikost písma*/
Otázky k opakování K jakým účelům se používají v CSS tzv. třídy? Jaký je rozdíl mezi regulární třídou, pseudotřídou a generickou třídou? Jak se v kódu HTML volají nadefinované třídy? Jaké znáte pseudotřídy? Záleží na pořadí definovaných pseudotříd? Co je to kontextový selektor? K jakému účelu slouží CSS reset?
Použité zdroje BLÁBOLIL, R. Informační a komunikační technologie. 3. rozšířené vydání. České Budějovice: KOPP, 2011. BLÁBOLIL, Roman. Www.blabik.cz: Podpora výuky: „Tvorba www stránek“ [online]. 6. února 2013 11:30. Dostupný z WWW: http://www.blabik.cz/vyuka/ict/35_Tvorba_WWW_stranek.pdf Použité obrázky: Vlastní