Aflați ce înseamnă cascada în foi de stil cascadă

CSS Short Course

Cascada este ceea ce face foile de stil CSS atat de utile. Pe scurt, cascada definește ordinea de prioritate pentru modul în care ar trebui aplicate stilurile conflictuale. Cu alte cuvinte, dacă aveți două stiluri:

p {culoare: roșu; }
p {culoare: albastru; }

Cascada determină culoarea paragrafelor, deși foaia de stil specifică faptul că acestea trebuie să fie roșii și albastre. În cele din urmă, numai o singură culoare poate fi aplicată paragrafelor, deci trebuie să existe o comandă.

Și această ordine este aplicată prin care selectorii (p din exemplul de mai sus) au cea mai mare prioritate și ordinea în care apar în document.

Următoarea listă este o simplificare a modului în care browserul dvs. decide o prioritate pentru un stil:

  1. Consultați foaia de stil pentru un selector care se potrivește elementului. Dacă nu există stiluri definite, utilizați regulile implicite în browser
  2. Uită-te în foaia de stil pentru selectorii marcați! Important și aplicați-le pe elementele corespunzătoare.
  3. Toate stilurile din foaia de stil vor înlocui stilurile implicite ale browserului (cu excepția foilor de stil ale utilizatorilor).
  4. Cu cât selectorul de stil este mai specific, cu atât mai mare va fi prioritatea. De exemplu, div> p.class este mai specifică decât p.class, care este mai specifică decât p.
  5. În cele din urmă, dacă două reguli se aplică aceluiași element și au același precedent selector, va fi aplicată cea care a fost încărcată ultima dată. Cu alte cuvinte, foaia de stil este citită de sus în jos, iar stilurile sunt aplicate unul peste celălalt.

Pe baza acestor reguli, în exemplul de mai sus, paragrafele vor fi scrise în albastru, deoarece p {culoare: albastru; } vine ultima în foaia de stil.

Aceasta este o explicație foarte simplificată a cascadei. Dacă sunteți interesat să aflați mai multe despre cum funcționează cascada, ar trebui să citiți Ce înseamnă "Cascade" în foile de stil cascadă? .