Mitä! Tärkeä tarkoittaa CSS: ssä?

click fraud protection

Yksi parhaista tavoista oppia koodaamaan verkkosivustoja on tarkastella lähdekoodit muista sivustoista. Tämä käytäntö on se, kuinka monet verkkoammattilaiset oppivat ammattinsa, varsinkin päivinä ennen kuin oli niin paljon vaihtoehtoja Web-suunnittelu kursseja, kirjoja ja verkkokoulutussivustoja.

Jos kokeilet tätä käytäntöä ja tarkastelet sivuston CSS-tyylitaulukoita, yksi asia, jonka saatat nähdä koodissa, on rivi, joka sanoo !tärkeä. Tämä termi muuttaa tyylisivun käsittelyn prioriteettia.

CSS-koodaus
E + / Getty Images

CSS: n kaskadi

CSS-tyylilehdet todellakin ryöpytä, eli ne asetetaan tiettyyn järjestykseen. Tyylejä käytetään yleensä siinä järjestyksessä kuin selain lukee. Ensimmäistä tyyliä käytetään ja sitten toista jne.

Tämän seurauksena, jos tyyli ilmestyy tyylitaulukon yläosaan ja muutetaan sitten asiakirjassa alempana, kyseisen tyylin toinen esiintymä on se, jota käytetään seuraavissa tapauksissa, ei ensimmäinen. Pohjimmiltaan, jos kaksi tyyliä sanovat samaa (mikä tarkoittaa, että niillä on sama spesifisyyden taso), käytetään viimeistä listattua.

instagram viewer

Oletetaan esimerkiksi, että seuraavat tyylit sisältyivät tyylitaulukkoon. Kappaleteksti hahmonnettaisiin mustalla, vaikka ensimmäinen käytetty tyyliominaisuus olisi punainen. Tämä johtuu siitä, että "musta" arvo luetellaan toiseksi. Koska CSS luetaan ylhäältä alas, lopullinen tyyli on "musta" ja siksi se voittaa.

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

Kuinka! Tärkeä muuttaa prioriteettia

!tärkeä -direktiivi vaikuttaa tapaan, jolla CSS-järjestelmäsi tapahtuu, samalla kun noudatat sääntöjä, jotka ovat mielestäsi tärkeimpiä ja joita tulisi soveltaa. Sääntöä, jolla on tämä direktiivi, sovelletaan aina riippumatta siitä, missä sääntö esiintyy CSS-asiakirjassa.

Jos haluat tehdä kappaletekstistä aina punaisen, muuta edellisestä esimerkistä tyyli seuraavasti:

p {väri: punainen! tärkeä; }
p {väri: musta; }

Nyt kaikki teksti näkyy punaisena, vaikka "musta" arvo näkyy toiseksi.! -Direktiivi ohittaa kaskadin normaalit säännöt, ja se antaa tälle tyylille erittäin korkean spesifisyyden.

Jos tarvitset ehdottomasti kappaleita punaisena, tämä tyyli tekisi sen, mutta se ei tarkoita, että tämä on hyvä käytäntö.

Milloin käyttää! Tärkeää

Tärkeä direktiivi on hyödyllinen, kun testaat ja korjaat verkkosivustoa. Jos et ole varma, miksi tyyliä ei käytetä ja luulet, että se voi olla spesifisyyden ristiriita, lisää! tyyli nähdäksesi, korjaako se sen - ja jos se korjaa, muuta valitsimien järjestystä ja poista! tärkeät direktiivit tuotannostasi koodi.

Jos nojaat liian voimakkaasti! Tärkeään ilmoitukseen saavuttaaksesi haluamasi tyylit, sinulla on lopulta tyylilehti täynnä! Tärkeitä tyylejä. Muutat perusteellisesti tapaa, jolla sivun CSS käsitellään. Se on laiska käytäntö, joka ei ole hyvä pitkän aikavälin johtamisen kannalta.

Käytä! Tärkeää testausta varten tai joissakin tapauksissa, kun sinun on ehdottomasti ohitettava sisäinen tyyli, joka on osa teemaa tai mallikehystä. Jopa näissä tapauksissa käytä tätä lähestymistapaa säästeliäästi ja kirjoita sen sijaan puhtaat tyylisivut, jotka kunnioittavat ryöpytä.

Käyttäjän tyylitaulukot

Tämä direktiivi otettiin käyttöön myös auttamaan verkkosivujen käyttäjiä selviytymään tyylitauluista, jotka vaikeuttavat sivujen käyttöä tai lukemista.

Kun joku määrittelee tyylisivun Web-sivujen tarkastelemiseksi sivun tekijän tyylitaulukko ohittaa tyylisivun. Jos käyttäjä merkitsee tyylin! Tärkeäksi, tämä tyyli ohittaa verkkosivun tekijän tyylisivun, vaikka tekijä merkitsisi säännön! Tärkeäksi.

Tämä hierarkia on hyödyllinen käyttäjille, joiden on asetettava tyylit tietyllä tavalla. Esimerkiksi näkövammaisten lukijoiden on ehkä lisättävä oletusfonttikokoja kaikilla käyttämillään verkkosivuilla. Käyttämällä! Tärkeää direktiiviä säästeliäästi rakentamillasi sivuilla otat huomioon lukijoiden yksilölliset tarpeet.

instagram story viewer