Sužinokite, kokia kaskada yra kaskadiniuose stiliaus lapuose

CSS trumpas kursas

Kaskados dėka CSS stiliaus lapai yra tokie naudingi. Trumpai tariant, kaskadas apibrėžia, kaip prieštaringi stiliai turėtų būti taikomi pirmumo tvarka. Kitaip tariant, jei turite du stilius:

p {spalva: raudona; }
p {spalva: mėlyna; }

Kaskadas nustato, kokia spalva turėtų būti pastraipos, net jei stiliaus lentelėje teigiama, kad jie turėtų būti raudonos ir mėlynos spalvos. Galiausiai galima taikyti tik vienos spalvos pastraipas, todėl turi būti užsakymas.

Ir ši tvarka yra taikoma, kokie selektoriai (p pirmame pavyzdyje) turi didžiausią pirmenybę ir kokia tvarka jie rodomi dokumente.

Toliau pateikiamas supaprastinimas, kaip jūsų naršyklė nustato stilius:

  1. Pažiūrėkite į stiliaus lentelę elementui atitinkantį selektorių. Jei nėra nustatytų stilių, naršyklėje naudokite numatytas taisykles
  2. Pažvelkite į norimus žymenis pažymėtų žymeklių stilių lapą ir naudokite juos atitinkamiems elementams.
  3. Visi stiliaus lapuose esantys stiliai viršys numatytuosius naršyklės stilius (išskyrus naudotojo stiliaus lapų atveju).
  4. Kuo konkretesnis stiliaus parinkiklis, tuo aukštesnis jis bus. Pavyzdžiui, div> p.class yra labiau specifinis nei p.class, kuris yra specifiškesnis nei p.
  5. Galiausiai, jei tame pačiame elemente taikomos dvi taisyklės ir tas pats selektoriaus pirmenybė, bus taikoma paskutinė įkelta. Kitaip tariant, stiliaus lapas yra skaitomas iš viršaus į apačią, o stiliai - vienas ant kito.

Remiantis šiomis taisyklėmis, pirmiau pateiktame pavyzdyje pastraipos būtų parašytos mėlynai, nes p {color: blue; } ateina paskutinis stiliaus lange.

Tai labai supaprastintas kaskados paaiškinimas. Jei jus domina daugiau sužinoti apie tai, kaip kaskados veikia, skaitykite Kas yra "Kaskados" reikšmė kaskadiniuose stiliaus lapuose? .