Základy CSS
Kaskáda a dědičnost
Na jeden element často míří víc pravidel najednou. Kaskáda rozhoduje, které z nich vyhraje.
Právě podle ní se CSS jmenuje: Cascading Style Sheets, kaskádové styly. V náhledu je pozvánka na výlet, na které si to vyzkoušíme.
Dědičnost
Co nastavíme rodiči, zdědí děti
Kartě nastavíme barvu a písmo. Nadpis i odstavce uvnitř je převezmou, i když pro ně žádné pravidlo nemáme.
Dědí se hlavně vlastnosti textu: barva, písmo, řádkování. Border, mezery a rozměry se nedědí. Proto border má jen karta, ne každý odstavec v ní.
Dědičnost
Proč je odkaz pořád modrý
Odkaz barvu nezdědil. Prohlížeč má totiž vlastní pravidlo, které odkazům barvu přímo nastavuje. Pravidlo pro element má vždy přednost před zděděnou hodnotou.
Hodnota inherit řekne: vezmi si barvu od rodiče.
Kaskáda · 1
Pozdější pravidlo vyhrává
Dvě pravidla se stejným selektorem nastavují odstavcům různou barvu. Použije se to, které je v kódu níž.
Odstavce jsou šedé. Styly tečou shora dolů jako voda v kaskádě a pozdější přepíše dřívější.
Kaskáda · 2
Přesnější selektor vyhrává
Varování chceme červeně. Pravidlo .warning dáme dokonce nad pravidlo pro p, a stejně vyhraje. Než prohlížeč rozhodne podle pořadí, porovná, jak přesný je selektor. Tomu se říká specificita.
Body si představte ve třech sloupcích: id · třída · element. p má 0·0·1, .warning 0·1·0. Vyhrává vyšší číslo zleva, takže třída porazí jakýkoli počet elementů.
Pozor
Kam zmizela červená?
Pravidlo pro odstavce zpřesníme na .card p, aby platilo jen uvnitř karty. A varování je najednou šedé.
.card p má jednu třídu a jeden element: 0·1·1. To je víc než 0·1·0 u .warning. Na pořadí už nezáleží.
Kaskáda · 2
Oprava: srovnat specificitu
Varování zpřesníme stejně: .card .warning má 0·2·0 a zase vyhraje.
Nejlépe se pracuje s krátkými selektory, ideálně jednou třídou. Pak mají všechna pravidla podobnou váhu a rozhoduje jen pořadí.
Responzivita
@media patří na konec
Na telefonu kartě zmenšíme padding a schováme border. Pravidla v @media mají stejnou specificitu jako ta nahoře, rozhoduje tedy pořadí.
Kdyby blok @media stál na začátku stylu, pravidlo .card pod ním by ho přepsalo a na telefonu by se nic nezměnilo.
Krajní řešení
!important
Za hodnotu můžeme připsat !important. Taková deklarace přebije všechno ostatní, specificitu i pořadí.
Zní to jako dobrý nástroj, ale opak je pravdou. Přebít !important jde zase jen dalším !important a styl se brzy zamotá. Lepší je opravit specificitu jako v kroku 7.
Shrnutí
Kdo vyhraje
Ano
- přímé pravidlo má přednost před zděděnou hodnotou
- přesnější selektor:
id· třída · element - při stejné přesnosti pravidlo, které je níž
@mediapod pravidla, která upravuje
Ne
!importantjako běžný nástroj- dlouhé selektory typu
#page .card div p