Wat beteken "Cascade" in Cascading Style Sheets?

Cascading Style Sheets of CSS word opgestel sodat jy baie eienskappe kan hê wat almal dieselfde elemente beïnvloed. Sommige van hierdie eiendomme kan in konflik wees met mekaar. Byvoorbeeld, jy kan 'n lettertipe kleur van rooi op die paragraaf-tag stel en dan later 'n lettertipe-kleur van blou stel. Hoe weet die blaaier watter kleur die paragrawe moet maak? Dit word deur die kaskade bepaal.

Soorte style sheets

Daar is drie verskillende tipes stylvelle:

  1. Author Style Sheets
    1. Hierdie is stylvelle geskep deur die skrywer van die webblad. Hulle is waaraan die meeste mense dink wanneer hulle aan CSS style sheets dink.
  2. Gebruiker Styl Blaaie
    1. Gebruikerstylblaaie word deur die gebruiker van die webblad gestel. Dit laat die gebruiker meer beheer oor hoe die bladsye vertoon.
  3. Gebruiker Agent Style Sheets
    1. Hierdie is style wat die webblaaier van toepassing is op die bladsy om die bladsy te help vertoon. Byvoorbeeld, in XHTML vertoon die meeste visuele gebruikersagente die merker as kursiefteks. Dit word gedefinieer in die gebruiker agent stylblad.

Eienskappe wat in elk van die bostaande stylvelle gedefinieer word, word 'n gewig gegee. By verstek het die skrywer se stylvel die meeste gewig, gevolg deur die gebruikerstylvel, en uiteindelik deur die gebruikeragent-stylblad. Die enigste uitsondering hierop is by die ! Belangrike reël in 'n gebruikersstylblad. Dit het meer gewig as die skrywer se stylblad.

Cascading Order

Om konflikte op te los, gebruik webblaaiers die volgende sorteerbevel om te bepaal watter styl voorrang het en sal gebruik word:

  1. Kyk eers na alle verklarings wat van toepassing is op die betrokke element en vir die toegewezen media tipe.
  2. Kyk dan na watter stylblad dit vandaan kom. Soos hierbo kom skrywer style sheets eerste, dan gebruiker, dan gebruiker agent. Met! Belangrike gebruikersstyle met hoër voorkeur as skrywer! Belangrike style.
  3. Hoe meer spesifiek 'n selector is, hoe meer voorkeur sal dit kry. Byvoorbeeld, 'n styl op "div.co p" het 'n hoër voorkeur as een net op die "p" tag.
  4. Uiteindelik, sorteer die reëls volgens die volgorde wat hulle gedefinieer is. Reëls wat later in die dokumentboom gedefinieer word, het hoër voorkeur as dié wat vroeër gedefinieer is. En reëls uit 'n ingevoerde stylvel word oorweeg voordat reëls regstreeks in die stylblad verskyn.