Zistite, čo znamená kaskáda v kaskádových štýloch

CSS krátky kurz

Kaskáda je to, čo robí štýly CSS tak užitočné. Stručne povedané, kaskáda určuje poradie priority, ako by sa mali použiť konfliktné štýly. Inými slovami, ak máte dva štýly:

p {farba: červená; }
p {farba: modrá; }

Kaskáda určuje, akú farbu by mali byť odstavce, aj keď štýl štýlu uvádza, že by mali byť červené aj modré. V konečnom dôsledku je možné použiť iba jednu farbu na odseky, takže musí byť objednávka.

A toto usporiadanie sa uplatňuje, ktoré selektory (p v príklade vyššie) majú najvyššiu prioritu a poradie, ktoré sa v dokumente objavujú.

Nasledujúci zoznam je zjednodušenie toho, ako váš prehliadač rozhodne o prednosti štýlu:

  1. Pozrite sa do štýlu šablón pre výberový prvok zodpovedajúci prvku. Ak nie sú definované štýly, použite predvolené pravidlá v prehliadači
  2. Pozrite sa do štýlu fotiek pre selektory označené! Dôležité a použite ich na príslušné prvky.
  3. Všetky štýly v štýle štýlov prepíšu predvolené štýly prehliadača (s výnimkou hárkov štýlov používateľov).
  4. Čím je výber štýlu konkrétnejší, tým vyššia je jeho priorita. Napríklad div> p.class je špecifickejšia ako p.class, ktorá je špecifickejšia ako p.
  5. Napokon, ak dve pravidlá platia pre ten istý prvok a majú rovnakú prioritu selektora, použije sa tá, ktorá bola naposledy načítaná. Inými slovami, štýl štýlu sa číta zhora nadol a štýly sa nanášajú navzájom nad sebou.

Na základe týchto pravidiel by v predchádzajúcom príklade boli odstavce zapísané modrou farbou, pretože p {farba: modrá; } je posledný v štýle štýlov.

Toto je veľmi zjednodušené vysvetlenie kaskády. Ak máte záujem dozvedieť sa viac o tom, ako kaskáda funguje, mali by ste si prečítať Čo znamená "Cascade" v kaskádových štýloch? ,