Selektroy
Jak bylo uvedeno výše, selektory slouží k jednoznačné identifikaci elementu, na který se mjí definice stylů aplikovat.
Přehled nejdůležitějších selektorů ukazuje tabulka. Sloupec HTML říká, co je třeba zapsat v internetové stránce naopak sloupec CSS ukazuje, jak vypadá daný selektor.
| Název seletkoru | HTML | CSS | Popis |
|---|---|---|---|
| Elmentu | <h1> | h1 | Styl se aplikuje na všechny elementy daného jména použité ve stránce. V tomto případě na všechny nadpisy první úrovně. |
| Třídy | <h1 class="modra"> | .modra | Aplikuje se na všechny elementy, které mají vyplněn atribut class na danou hodnotu, v tomto případě na hodnotu modra |
| Identifikátoru | <h1 id="prvni"> | #prvni | Styl se aplikuje na tenelement, který má danou hodnostu uvedenou v atributu id v too případě prvni. Takový element může být pouze jeden na akždé stránce. |
| pseudo-třídy | <a href=".. | a:visited | tento styl se aplikuje na každý navštívený odkaz |
| a:link | Naformátuje nenavštívený odkaz | ||
| a:hover | Aplikuje se na aktivní odkaz - po najetí myši nad odkaz | ||
| Pseudo-elementu | <p> | p:first-line | Styl se použije na první řádek. |
| <p> | p:first-letter | Tento styl se použije na první znak | |
| kontextový - potomka |
<p><a ...> |
p a | V tmto příkladě se aplikuje na všechny elementy <a>, kterémají ve stromevé struktuře nad sebou element <p>. Obecně lze takto sojit jakékoli dva sektory. |
| kontextový - přímého následníka | <p><a ...> | p>a | Aplikuje se na ty odkazy <a> ktré mají přímého rodiče odstavec <p> |
Naposledy změněno: Čtvrtek, 28. listopadu 2013, 23.07