HTML a kaskádové styly

Selektory typu značka (typový selektor)

h1 { text-align: center; font-style: small-caps; } /* vzhled nadpisů 1. úrovně */
p { color: green; font-style: italic; }        /* vzhled odstavců */
strong { color: red; }                         /* vzhled zvýrazněného textu */

Podívejte se na ukázku použití selektorů typu značka.

Selektory typu značka se váží vždy ke konkrétní HTML značce a definují vzhled napříč celým dokumentem.

Selektory typu třída

Každému prvku dokumentu lze nastavit speciální atribut třída (class), kterým upřesníte význam prvku. Např. ve zpravodajském portálu lze takto označit texty, které označují autory článků (na což by se hodila HTML značka author, tu ale nemáme).

  <h1 class="titulek-clanku">Nadpis prvního článku</h1>
  <p class="autor">Michal Houda</p>
  <p class="headline">V tomto článku se dozvíte ... </p>

  <h1 class="titulek-clanku">Nadpis druhého článku</h1>
  <p class="autor">Radim Remeš</p>
  <p class="headline">Dnes se k nám dostala informace ... </p>

h1.titulek-clanku { text-align: left; border-bottom: 1px solid gray; }
.autor { font-weight: bold; color: blue; }
.headline { font-style: italic; } 

Podívejte se na ukázku použití selektorů typu třída.

Popis pravidla pro třídu začíná tečkou. Je možno kombinovat selektor typu značka a třída, jako v prvním řádku našeho příkladu.

První z pravidel (h1.titulek-clanku) se týká pouze elementů h1 třídy titulek-clanku; jiných elementů typu h1 se pravidlo týkat nebude. Zbylá dvě pravidla se týkají libovolného elementu, které mají třídu autor, resp. headline (tedy nejen odstavců p).

Poznámka. Pokud bychom ve výše uvedeném příkladu neměli v dokumentu jiné nadpisy 1. úrovně h1 než nadpisy článků, pak je atribut class samozřejmě nadbytečný a mohli bychom použít jednoduššího selektoru typu značka. Jinou možností je označit případný (unikátní) nadpis 1. úrovně (např. nadpis celého serveru) atributem ID (identifikátor, viz níže).

Selektory typu ID (identifikátor)

Každému prvku dokumentu lze nastavit speciální atribut ID (identifikátor) a jednoznačně jej tak pojmenovat v rámci dokumentu. Narozdíl od tříd lze identifikátor v dokumentu použít pouze jednou, výborně se tak hodí na označení unikátních prvků stránky (navigace, hlavička, patička, apod.).

  <h1 id="nadpis-stranky">Naše firma, s.r.o.</h1>
  <p id="vitejte">Vítejte na našem webu!</p>
  <p id="kontakt">Kontakt: ... </p>

h1#nadpis-stranky { 
  background: gray; 
  border-top: 1px solid green; 
  border-bottom: 1px solid green; 
}
#vitejte { font-style: italic; text-align: center; }
#kontakt { font-size: small; } 

Popis pravidla pro identifikátor začíná křížkem. Je možno kombinovat selektor typu značka a třída, jako v prvním řádku našeho příkladu.

Poznámka. Vzhledem k tomu, že jeden atribut ID se smí v dokumentu vyskytnout jenom jednou, není z praktického hlediska nutné označovat v selektoru i značku (jako jsme to udělali h1#nadpis-stranky). Za určitých okolností to ale může vést k nežádoucímu chování (blíže viz dědičnost a kaskádování).

Úkol: ve Vašem dokumentu označte strukturální prvky atributem class, jedinečné prvky atributem id a ve stylovém předpisu nastavte jejich vzhled.

Pseudotřídy a pseudoprvky

Pseudotřídy a pseudoprvky CSS rozšiřují možnosti formátování. Je například možno odlišit vzhled např. prvního písmene textu, navštívených a nenavštívených odkazů, apod., tj. informací, které samotné HTML z principu nemůže poskytnout.

Pseudotřídy odkazů

a:link { color: blue; } /* odkaz, který uživatel ještě nenavštívil */
a:visited { color: red; } /* odkaz, který uživatel již navštívil */

CSS umožňuje odlišit vzhled nenavštívených a navštívených odkazů. Příklad uvedený zde je (doufám) samovysvětlující. Jde o nejčastěji používané pseudotřídy CSS.

Dynamické pseudotřídy

p:hover { color: gray; } /* barva textu po přejetí kurzorem myši */
a:active { color: red; } /* barva odkazu po stisknutí tlačítka myši */

V příkladu se změní barva text odstavce, pokud nad ním máme myš, na šedou, a barva odkazu, pokud na něj klikneme myší (a držíme její tlačítko stisknuté), na červenou.

Existuje celá řada dalších pseudotříd a pseudoprvků s větší či menší podporou v prohlížečích: :first-child (první potomek), :first-line (první řádek), :first-letter (první písmeno), :before, :after (generovaný obsah před a za prvkem), :focus (vybraný prvek), :lang (jazyk); další zavádí nová specifikace CSS3.