Tärkein opittava CSS-käsite

Cascade on kuinka CSS suunniteltiin alusta alkaen, ja siihen on syy sitä kutsutaan CSS - CSS!

Valitettavasti CSS: llä on huono maine samasta peruskäsitteestä, johon se on rakennettu.

Mutta mikä tarkalleen ottaen on Cascade, ja onko se yhtä huono kuin useimmat ihmiset antavat sen kuulostaa?

Johdanto

Sanotaan, että John kirjoittaa joukon CSS: ää ja sitten testaa selainta. Hänen yllätyksekseen hänen kirjoittamiaan tyylejä ei sovelleta elementtiin, jonka hän juuri muotoili, vaan jotkut muut tyylit ovat!

Näetkö sen siellä? Se on yksi pahimmista asioista, joista kaikki valittavat, kun he sanovat "CSS perseestä".

CSS: n avulla useat tyylit voivat vaikuttaa yhteen elementtiin. Joten sinulla on paragraphverkkosivusto. Mutta tämän paragraphvoi muotoilla mikä tahansa CSS-lohko, kirjaimellisesti.

Se on kuin globaalin JavaScripti-muuttujan, jota voidaan muokata koodin minkä tahansa toiminnon avulla. Resepti katastrofille, näyttää.

Mutta jälleen kerran, Cascade muodostaa perustavan syyn CSS: n luomiseen.

Omaksua se?

Et voi muuttaa sitä.

Mikä on kaskadi?

Kaskadi on se, miten selain määrittää, mitä tyylejä sovelletaan tiettyyn elementtiin. Se on niin yksinkertaista, ja se tekee kunnollisen haastattelukysymyksen käyttöliittymän kehittäjälle.

Onneksi kaskadiin liittyvät painajaiset voidaan ymmärtää, koska sitä ohjaavat vain kaksi tekijää:

  1. Elementin valitsimien spesifisyys
  2. Kirjoitettavien tyylien järjestys

Katsotaanpa nopeasti niitä.

Valitsimen spesifisyys

Voit verrata valitsimen spesifisyyttä siihen, miten ihmismieli tulkitsee ohjeita.

Harkitse esimerkiksi alla olevaa kuvaa:

Jos sanoisin sinulle: "Ohita minulle punainen laatikko.", Minkä välität minulle? Heitä on kaksi!

Voit kysyä jatkokysymyksen: "Mikä laatikoista, a tai b?" .

Tai voit jopa napata molemmat laatikot! Eivätkö molemmat punaisia ​​laatikoita?

Tässä tilanteessa selain löytää itsensä käsitellessään spesifisyyttä.

Kun sanot, muotoile kappale punaiseksi taustaväriksi ...

p { background-color: red;}

Koska sivulla voi olla paljon kappaleelementtejä, selain sanoo "mikä kappale?"

Selain ei voi kysyä jatkokysymystä, joten se menee eteenpäin ja yrittää tyylittää jokaisen sivun kappaleen redtaustalla.

Jos kuitenkin olisit sanonut eteenpäin, muotoile kappale luokan nimellä reddypunaisella taustalla:

p.reddy { background-color: red;}

Se on tarkempi pyyntö!

Nyt selain muotoilee haluamasi kappaleelementit.

Se siitä!

Teknisesti selain tarkastelee jokaista valitsinta, joka kohdistaa tiettyyn elementtiin ja antaa jokaiselle niistä pisteet, ja se, jolla on korkeampi spesifisyyspiste, voittaa.

Se, miten se laskee pisteet, on yksinkertainen.

Oletetaan, että selaimella - tulkittaessa CSS: ääsi - oli 4 maaliviestiä.

  1. Jokaiselle linjatyylille, joka kohdistaa elementtiin styleattribuutin avulla, määritetään yksi tavoite tavoitepostille (a).
  2. Jokaiselle idvalitsimelle lähetetään yksi tavoite (b).
  3. Jokaiselle classvalitsimelle, määritteen valitsimelle ja näennäisluokalle on määritetty yksi tavoite postitettavaksi (c).
  4. Jokaiselle elementinvalitsimelle ja pseudoelementille määritetään yksi tavoite postitettavaksi (d).

Tapa, jolla muistan tämän, on lyhenne SICAPEP:

Pisteitä osoitettaessa kokonaispisteet lasketaan ketjutuksella 4-numeroisen luvun numeroina.

Nopea spesifisyysesimerkki

Harkitse seuraavia tyyliilmoituksia:

#nav .removed > a:hover {}
li:last-child h3 .title {}

Kuinka selain laskee näiden valitsimien spesifisyyspisteet?

#nav .removed > a:hover

Tässä on erittely:

(a) Sisätyyliä ei ole, joten ensimmäisen maalipylvään tulos on 0.

(b) On yksi idvalitsin,, #navse on pistemäärä 1 toiselle maalipylväälle.

(c) On myös yksi classvalitsin .removedja yksi pseudoluokan valitsin :hover, joka antaa pistemäärän 2 kolmannelle maalipylväälle.

(d) On yksi elementinvalitsin a, joka on pistemäärä 1 neljännessä viestissä.

Tässä on graafinen esitys pisteistä.

Spesifisyyden kokonaispistemäärä liitetään muodossa 0121.

Kuten tavallisessa matematiikassa, se 0001on pienempi 0005ja 0121suurempi kuin 0021.

Nyt ymmärrät kuinka tarkkuus lasketaan.

Voitteko yrittää laskea toisen valitsimen spesifisyyden li:last-child h3 .title?

Kerro minulle, mihin tulet kommenttiosaan :)

Tyylijärjestys

Toinen kaskadiin vaikuttava tekijä on tyylien järjestys. Todella yksinkertainen esimerkki voidaan nähdä saman elementin tyylistä kahdessa eri koodilohkossa.

Esimerkiksi:

p.reddy { background: red;}p.reddy { background: blue;}

Vaikka molemmilla valitsimilla on sama spesifisyys, 0011sääntöjoukon järjestys tulee esiin.

Toinen ilmoitus korvaa edellisen, ja kappale on sininen eikä punainen.

Kompakysymys

Mikä olisi linkkitekstin väri ottaen huomioon alla olevan asiakirjan?

 Inline Styles and Specificity  #nav-force > ul > li > a.nav-link { color: blue; };     
  • Link
  • Sininen vai punainen?

    Huomaa, että linkki on tyyliltään sekä inline että &llohkossa t; / style>.

    Voi, jos tunnet itsevarmuutta, sano vain vastaus ääneen - itsellesi.

    Mutta todellinen vastaus on, että sisäinen tyyli voittaa aina. Maali sijoitetaan ensimmäiseen viestiin, joka voittaa kaikki maalit missä tahansa muussa viestissä.

    Miksi?

    Lopullinen spesifisyys on tuhansia - 1000 - luokkaa ja se voittaa 9 maalia toisessa viestissä. 1000 on suurempi kuin 0900.

    HUOMAUTUS: Kuten Paul McCann huomautti kommenttiosassa, yllä oleva kappale on liian yksinkertaistettu. Katsokaa mitä hän sanoo.

    Johtopäätös

    Toivottavasti olet nyt aseistettu vankalla ymmärryksellä siitä, miten kaskadi toimii. Kehittyneemmän CSS: n oppiminen on nyt todennäköisesti helpompaa, ja mikä tärkeintä, tiedät nyt, mistä etsiä, kun sinulla on näitä ärsyttäviä vikoja.

    Nähdään myöhemmin!

    Oletko valmis tulemaan ammattilaiseksi?

    Olen luonut ilmaisen CSS-oppaan saadaksesi CSS-taitosi räjähtämään välittömästi. Hanki ilmainen e-kirja.