| Výuka > Kaskádové styly CSS > Syntaxe stylů |

Syntaxe stylů

Pravidlo definující styl se skládá z nejméně tří základních částí:

  1. selektor značky
  2. složené závorky a v nich je
  3. středníkem oddělený seznam vlastností

V definici stylu nejsou rozlišována malá a velká písmena, ovšem striktní pravidla říkají, že selektory jsou psány malými písmeny, a stejně tak i jejich hodnoty.

selektor_značky { parametr: hodnota;}

Pokud potřebujete nastavit společnou vlastnost pro více selektorů, tyto se pak uvádí za sebe oddělené čárkou tak, jak ukazuje následující příklad. V něm je ukázáno, jak nadpisy 1. až 6. úrovně budou vycentrovány na střed řádku.

h1, h2, h3, h4, h5, h6 { text-align: center; }

Zajímavým prvkem jsou tzv. kontextové selektory, které zaručí použití konkrétního stylu v okamžiku, kdy se v kódu stránky objeví příslušná sekvence, např.:

h2 em { color: red; } 

Pokud se tedy na stránce vyskytne posloupnost značek <h2><em> bude použito společné vlastnosti nastavené tímto kontextovým selektorem, přičemž samotná značka <h2> může mít nastaveny vlastnosti odděleně. Jaké je tedy praktické využití? Například pokud potřebujete na stránce odlišit různé typy odkazů (odkazy v navigaci a v textu).

Někdy je možné se též setkat s tzv. univerzálním selektorem, který se označuje hvězdičkou (*) a jeho definicí se nastavuje společná vlastnost všech použitých elementů na stránce.

* { color: maroon; } 

Nyní se zaměříme na tzv. třídy stylů, které umožňují ve stylopisech vytvářet několik různých stylů pro jedinou značku, přičemž styly se liší jménem své třídy.

Setkáváme se tedy s tzv. regulárními třídami, které mohou být použity např. v textu, kde je potřeba používat různé styly odstavců. Název třídy se od selektoru odděluje (bez mezer) tečkou. Více pak ukazuje následující ukázka s definicí regulární třídy.

p.blok { text-align: justify;
         font-size: 1em;
         font-family: serif; }
p.definice { text-align: center;
             font-style: italic; }

Příslušnou třídu pak v HTML kódu použijete pomocí parametru class="název_třídy" uvedeného u značky, kde byla regulární třída definována (např. tedy <p class="blok">). Regulární třídu lze použít pouze u té značky, u níž byla příslušným selektorem definována.

Můžeme též definovat tzv. generické třídy, které se nevztahují ke konkrétní značce a je možné jí použít u jakékoli značky, což ukazuje i následující příklad. U generické třídy není definován žádný selektor a definuje se opět před názvem třídy tečkou.

.kurziva { font-style: italic; }

Tuto generickou třídu pak v HTML kódu použijete stejným způsobem jako třídu regulární (např. tedy <p class="kurziva"> nebo též u jiné značky <h1 class="kurziva">).

U kaskádových stylů existují ještě tzv. pseudotřídy, které slouží k definici stylu zobrazení pro určité stavy značek. Jméno značky je odděleno od názvu pseudotřídy dvojtečkou a název třídy je již předdefinován, což nám neumožňuje další pseudotřídy vytvářet. Některé pseudotřídy si zde uvedeme, ostatní je pak možné najít v referenci CSS např. na www.w3c.org.

U odkazů se používají tyto pseudotřídy:

  • 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ž právě přejíždíte kurzorem myši
  • a:focus - pro odkaz, který byl nastaven pomocí klávesy [TAB] (tabulátor)

Další dvě pseudotřídy se používají u odstavců:

  • p:first-line - pro zvýraznění prvního řádku odstavce
  • p:first-letter - pro zvýraznění prvního znaku odstavce (např. iniciála)

CSS2 definuje ještě nekolik typů pseudotříd (např. jazykovou pseudotřídu :lang(jazyk), rodičovskou pseudotřídu :first-child, místo před :before a za :after, atp.)

Kromě tříd je možné používat také tzv. identifikátory. Ty se používají tehdy, pokud se daný prvek vyskytuje na stránce pouze jednou (na rozdíl od tříd, které je možné používat na stránce vícekrát). Používají se např. pro definici pozicovaných prvků na stránce (hlavička, navigace, tělo, patička, atp.). Jejich název si může uživatel vytvořit sám, před ním však vždy musí být znak # (zahrádka, hash), viz ukázka:

#hlavicka { position: absolute;
            top: 0px;
            left: 0px;
            width: 30%; } 

Z předchozího odstavce již víte, že se na konkrétní stránce může daný identifikátor vyskytovat pouze jednou. Jak se tedy zapíše do stránky? Pomocí parametru id="nazev_identifikatoru", který je možné psát ke všem značkám, nejčastěji ale k párové značce <div>, viz následující ukázka:

<div id="hlavicka">
 ...
</div>

Značkou <div> (tzv. kontejnerem) se tedy zadefinuje oblast s vlastnostmi definovanými pod příslušným identifikátorem pomocí CSS. Identifikátory se nepoužívají jen v souvislosti s CSS, ale mnohdy je můžete nalézt u skriptů (např. JavaScriptů), Flashových prvků, atp.

30.08.2007, 20:07 vytvořil Administrator