Mësoni se çfarë do të thotë Kaskada në Cascading Style Sheets

Kursi i shkurtër i CSS

Kaskada është ajo që i bën fletët e stilit CSS në mënyrë të dobishme. Shkurtimisht, kaskada përcakton rendin e përparësisë për mënyrën se si duhet të zbatohen stilet e kundërta. Me fjalë të tjera, nëse keni dy stile:

p {ngjyra: e kuqe; }
p {ngjyra: blu; }

Kaskada përcakton se cila ngjyrë duhet të jenë paragrafët, edhe pse fleta e stilit thekson se ato duhet të jenë të dyja të kuqe dhe blu. Në fund të fundit vetëm një ngjyrë mund të zbatohet për paragrafët, kështu që duhet të ketë një porosi.

Dhe kjo mënyrë zbatohet me anë të së cilave përzgjedhësit (p në shembullin e mësipërm) kanë përparësinë më të lartë dhe rendin që ato paraqiten në dokument.

Lista e mëposhtme është thjeshtësimi se si shfletuesi juaj vendos përparësi për një stil:

  1. Shikoni në fletën e stilit për një përzgjedhës që përputhet me elementin. Nëse nuk ka stile të përcaktuara, atëherë përdorni rregullat parazgjedhore në shfletuesin
  2. Shikoni në fletën e stilit për përzgjedhësit e shënuar! Të rëndësishme dhe zbatoni ato tek elementët e duhur.
  3. Të gjitha stilet në fletën e stilit do të anashkalojnë stilet e parazgjedhur të shfletuesit (përveç rasteve të fletëve të stilit të përdoruesit).
  4. Sa më specifike përzgjedhësi i stilit, aq më i lartë do të ketë përparësia. Për shembull, div> p.class është më specifike se p.class e cila është më specifike se p.
  5. Përfundimisht, nëse dy rregulla zbatohen për të njëjtin element dhe kanë përparësi të njëjtë përzgjedhës, do të zbatohet ai që është ngarkuar i fundit . Me fjalë të tjera, fleta e stilit lexohet nga lart poshtë, dhe stilet aplikohen në krye të njëri-tjetrit.

Bazuar në këto rregulla, në shembullin e mësipërm, paragrafët do të shkruhen në ngjyrë blu, sepse p {color: blue; } vjen e fundit në fletën e stilit.

Ky është një shpjegim shumë i thjeshtuar i kaskadës. Nëse jeni të interesuar të mësoni më shumë për mënyrën se si funksionon kaskada, ju duhet të lexoni Çfarë do të thotë "Kaskada" në Cascading Style Sheets? .