Opi mitä Cascade Cascading Style Sheets tarkoittaa

CSS lyhyt kurssi

Cascade on mikä tekee CSS-tyyliarkeista niin hyödyllisen. Lyhyesti sanottuna kaskadi määrittää ensisijaisuuden järjestyksen siitä, miten ristiriitaisia ​​tyylejä tulisi soveltaa. Toisin sanoen, jos sinulla on kaksi tyyliä:

p {väri: punainen; }
p {väri: sininen; }

Kaskadi määrittää, mitä värejä kappaleiden tulisi olla, vaikka tyyliarkki ilmoittaa, että niiden pitäisi olla sekä punaisia ​​että sinisiä. Loppujen lopuksi vain yksi väri voidaan soveltaa kappaleisiin, joten on oltava tilaus.

Ja tätä järjestystä sovelletaan, millä valitsimilla (edellä olevassa esimerkissä p) on korkein etusija ja mikä järjestys ne näkyvät asiakirjassa.

Seuraavassa luettelossa on yksinkertaistaminen siitä, miten selaimesi päättää tyylin etusijalle:

  1. Katso elementtiä vastaava valintaikkunan tyyliarkki. Jos määritettyjä tyylejä ei ole, käytä selaimen oletussääntöjä
  2. Katso tyyppikilvestä merkityt merkinnät! Tärkeää ja aseta ne asianmukaisiin elementteihin.
  3. Kaikki tyyliarkin tyylit ohittavat oletusselaimen tyylit (paitsi käyttäjän tyyliarkkien tapauksessa).
  4. Mitä tarkemmin tyyli valitaan, sitä korkeampi etusija on. Esimerkiksi div> p.class on tarkempi kuin p.class, joka on tarkempi kuin p.
  5. Lopuksi, jos samaan elementtiin sovelletaan kahta sääntöä ja sillä on sama valitsimen etusija, sovelletaan sitä, joka on viimeksi ladattu. Toisin sanoen tyyliarkki luetaan ylhäältä alas ja tyylejä sovelletaan päällekkäin.

Näiden sääntöjen perusteella yllä olevassa esimerkissä kappaleet kirjoitetaan sinisellä, koska p {väri: sininen; } tulee viimeiseksi tyyliarkista.

Tämä on yksinkertaistettu selitys kaskadista. Jos haluat lisätietoja kaskadin toiminnasta, sinun pitäisi lukea, mitä tarkoittaa "Cascade" Cascading Style Sheetsissä? .