HTML řekne, co je nadpis a co odstavec. Jak to bude vypadat, řeší CSS. Napíšeš „nadpisy budou modré“ a všechny nadpisy zmodrají.
Potíž nastane, když dvě pravidla chtějí pro tentýž element něco jiného. Jedno říká modrá, druhé červená. Kdo vyhraje? To rozhoduje kaskáda. Kdo ji nezná, tráví hodiny laděním, proč se styl „nechytá“.
h1 { color: navy; }vlastnost: hodnota;.V p { color: gray; } je p selektor, color vlastnost a gray hodnota.class může mít stejnou hodnotu u mnoha elementů. id musí být na stránce jedinečné.<p class="upozorneni">, <section id="rozvrh">| Selektor | Vybere | Příklad |
|---|---|---|
p | všechny elementy daného typu | všechny odstavce |
.upozorneni | elementy s třídou (tečka) | <p class="upozorneni"> |
#rozvrh | element s id (mřížka) | <section id="rozvrh"> |
nav a | potomek: a kdekoli uvnitř nav | odkazy v menu |
a:hover | pseudotřída: stav elementu | odkaz pod myší |
* | úplně všechno | základní nastavení |
:hover (pod myší), :focus (aktivní pole), :first-child (první potomek).p { color: blue; } a .upozorneni { color: red; } – odstavec s třídou bude červený.#menu a má 1-0-1, .menu a má 0-1-1. Vyhrává #menu a.!important přebije pravidla bez něj.style je silnější než jakýkoli selektor.p { color: blue; }, .text { color: green; }, p { color: red; }. Jakou barvu má <p class="text">?p = 0-0-1, .text = 0-1-0. Třída má vyšší specificitu, takže vyhrává zelená. Že je p { color: red; } později, nevadí: pořadí rozhoduje jen při shodné specificitě.#hlavni p a .obsah .clanek p.#hlavni p = 1-0-1. .obsah .clanek p = 0-2-1. Porovnává se zleva: 1 id > 0 id, vyhrává `#hlavni p`, i když má druhý selektor dvě třídy.body { font-family: sans-serif; } změní písmo celé stránky.!important a je to.!important přebije všechno. Za chvíli potřebuješ další !important, abys přebil ten první, a styly se stanou neudržitelnými.
.třída, #id, potomek, pseudotřída). Když se pravidla přou, rozhoduje kaskáda: důležitost, pak specificita (id – třídy – typy), pak pozdější pořadí. Písmo a barva textu se dědí.Specificita je jako bodování ve sportu se třemi koly. Kdo vyhraje první kolo, vyhrává. Teprve při remíze se hraje další kolo. Naučíš se body spočítat u jakéhokoli selektoru.
vlastnost: hodnota; (jak)..tlacitko { background: orange; }p), třídy (.cena), id (#kosik), stavu (:hover) nebo umístění (nav a).ul li vybere položky seznamu uvnitř ul.* a kombinátory (mezera, >) body nemají.nav a:hover = 0-1-2#něco → číslo A..něco, [atribut] a :pseudotřídy → číslo B.p, div, a) a pseudoelementy (::before) → číslo C.| Selektor | A (id) | B (třídy…) | C (typy) |
|---|---|---|---|
p | 0 | 0 | 1 |
.cena | 0 | 1 | 0 |
ul li a | 0 | 0 | 3 |
.menu a:hover | 0 | 2 | 1 |
#kosik .polozka | 1 | 1 | 0 |
input[type="email"] | 0 | 1 | 1 |
h1 – 0-0-1.nadpis – 0-1-0#logo – 1-0-0header .nadpis h1 – 0-1-2a:focus – 0-1-1#menu li.aktivni a – 1-1-2Spočítej body selektoru na kartičce a pak ji otoč pro kontrolu.
<a class="btn"> v <nav id="menu">? Pravidla: #menu a { color: white; } a a.btn { color: black; }.#menu a = 1-0-1. a.btn = 0-1-1. Rozhoduje první číslo: 1 > 0. Odkaz je bílý..cena { color: red; } a .akce { color: green; }, element <span class="cena akce">. Pravidlo .akce je v souboru druhé. Výsledek?.akce, cena bude zelená. Pořadí tříd v atributu class nerozhoduje.style="color:red" přímo v HTML) přebije každý selektor.!important. Je to nouzová brzda..a .b .c .d .e .f .g .h .i .j .k (11 tříd) přebije #x, protože 11 > 1.#x. Specificita 1-0-0 je větší než 0-11-0.Body se nesčítají do jednoho čísla. Kola se porovnávají zleva a jedno id vyhraje nad libovolným počtem tříd.
!important stojí nad body a mají se používat výjimečně.