CSS-stiili prioriteeditaseme läbivaatamine

Cascading Style Sheet (CSS) Ma arvan, et see on lihtsaim keel võrreldes teiste veebiga seotud keeltega, mistõttu ei ole üllatav, et paljud inimesed, kes on hakanud veebisaidi loomist lihtsalt õppima, õpivad seda keelt ja HTML-i enamasti.

Selles postituses läheme tagasi CSS põhitõedesse. Me vaatame üle, kuidas algselt rakendatakse CSS-stiile, milliseid stiile kohaldatakse, kuidas mõned stiilideklaratsioonid üksteist üle kirjutavad, samas kui teised pole.

Niisiis, see postitus on spetsiaalselt ette nähtud algajatele, kes on hakanud just väljakutsetele riputama, ilmselt ikka vigu ja vigu esimese stiili koostamisel. Niisiis, alustame lihtsalt.

Vaikebrauseri stiilid

Firefox, Chrome, Safari, Opera ja Internet Explorer on praegu turul parimad viis töölaua brauserit. Need brauserid ja kõik muud brauserid järgivad standardset reeglit, et lisada HTML-elementide esitamiseks sisseehitatud vaikimisi stiilid.

Niisiis, kui paneme mõned juhuslikud HTML-elemendid ilma ühtegi stiili lisamata, näete, et see on brauseris endiselt õigesti esitatud.

Aga kui me neid elemente hoolikalt kontrollime, on igal brauseril (veidi) erinevad väärtused “vaikimisi” deklaratsioon, mis põhjustab brauserite vastuolu, eriti vanas, näiteks IE6, 7 ja Firefox 3.0.

Näiteks, nagu näete ülaltoodud pildist, muutis uusim Firefox selle blockquote vaikimisi varu: 16px 40px 16px 40px, samas teisel pool Internet Explorer 7 muudab blockquote koos varu: 0px 40px.

Ülaltoodud ebakõlade ületamiseks eelistavad paljud veebidisainerid ja -arendajad kõik need stiilid üle kirjutada CSS lähtestamine. See CSS-fail sisaldab üldiselt peaaegu kogu HTML-i Tüüp selektoreid, määratledes need võrdsete eeskirjadega.

Saadaval on palju CSS-i lähtestamist, kuid siin on minu kolm parimat lemmikut:

• Normalize.css
• CSS lähtestamine
• HTML5 lähtestage stiilitabel

Valijad

Tõenäoliselt lugesite seda mõistet tihti veebi kujundamise / arendamise blogides, mida külastasite; Valijad.

CSS-i valija on süntaks, mida kasutatakse HTML-dokumendi mis tahes osade sihtimiseks sobivate stiilide jaoks. Siin on kolm peamist valijat, mida me siin arutame, sest tõenäoliselt on need teie esimesel veebisaidil kasutatavad tavalised valijad. Me katame teised tulevastes postitustes.

Tüübi valija

Oleme ülalpool maininud, et tüübi valija suunab dokumendi mis tahes määratud HTML-elemendid. Näiteks:

 p / ** deklaratsioon ** / 

vastab kõigile lk või lõikes elemendid ja selle kasutamine ületab lõpuks brauseritest antud vaikimisi stiilid.

Klassivalija

Kui olete elemendile klassi või isegi paljude klasside lisanud, saate ka need klassid sihtida. The Klassivalija algab a-ga punkt parameeter.

 .kast / ** deklaratsioon ** / 

Ülaltoodud väljavõte vastab kõigile elementidele, millel on kasti klass, või me saame ka täpsemalt valida.

 p.box / ** deklaratsioon ** / 

See on suunatud ainult lk element, millel on kasti klassi.

Kui me seda kasutame Klass valija, kõik sama stiilideklaratsioon nii Tüüp valijat ja Vaikebrauseri kirjutatakse üle.

ID valija

The ID on väga piirav omadus, meil on ainult üks id elemendil ja see peab olema ka unikaalne.

 
Sisu
 

Kui meil on id elemendis võime kasutada id valija selle elemendi sihtimine; id valija on defineeritud räsi abil # parameeter.

 #uniqueID / ** deklaratsioon ** / 

Alates ID on unikaalne, sel on selektoritüübi kõige tugevam prioriteet. Niisiis, kui me kuulutame stiilid ID valija vahetab kõik sama deklaratsiooni Klass, Tüüp selektorid ja Vaikebrauseri stiilid.

Stiilide kaasamine

Oleme jõudnud läbi kõigi oluliste põhivalijate ja uurime nüüd, kuidas need stiilid HTML-dokumenti sisse lülitatakse.

Välised stiilid

Välised stiilid on stiilid, mis lisatakse eraldi faili, tavaliselt a .css faili, mis on seejärel seotud HTML-dokumendiga, kasutades siltide rakendamiseks.

Ja kõik failides deklareeritud stiilid käituvad nagu see, mida me oleme maininud Valijad ülalpool, nimelt see üle kirjutab brauseri vaikimisi stiili ja kirjutama teise stiilideklaratsiooni sõltuvalt valikute prioriteetsusest.

See tava on kõige soovitatavam viis stiilide kinnitamiseks, eriti kui teil on tuhandeid CSS-koodide ridu, millel on palju lehekülgi..

Seejuures on ka stiilid kergesti juhitavad, näiteks võite CSS-failid eraldada mitmeks failiks sõltuvalt selle konkreetsest rollist, näiteks typography.css, et kontrollida kõiki tüpograafiaga seotud stiile jne.

Sisemised stiilid

Sisemised stiilid on stiilid, mis on integreeritud otse HTML-dokumenti, tavaliselt selle sees silt.

Kuid seda praktikat ei soovitata, kui teil on sadu ridu stiilid, kuna teie HTML-leht on liiga pikk ja stiil mõjutab ainult seda, kus stiilid on varjatud. Kui olete kümme lehekülge andnud, peate need stiilid kopeerima ja need kõikidesse lehekülgedesse sisse lülitama ning kui soovite stiili muuta, peate selle muutma kümneks erinevaks leheküljeks, mis on ilmselt tüütu ülesanne.

Tuginedes oma prioriteetsusele, on sisemine stiil kõrgem, nii et see välistab välised stiilid.

Sisejooned

Sisemised stiilid on stiilid, mis on otseselt HTML-elementi sisse lülitatud.

 
See on lõige
 

Ülaltoodud näide lisatakse 5tk lõikepunkti elementi ja see kirjutab samuti üle selle elemendi jaoks deklareeritud marginaalid nii sisemiste kui ka väliste stiilide puhul.

Kuid ärge seda tehes, sest teie märgistus on kõigi stiilideklaratsioonidega täis; kui teil on hulk stiilid, see muutub isegi õuduseks, et näha ja säilitada kõiki oma HTML-i ja stiile.

Lisalugemist: Kolm võimalust CSS-W3CS-koolide sisestamiseks.

Oluline reegel

On mõningaid asjaolusid, kui me peame elementi jaoks konkreetset stiili rakendama, kuid sama elemendi stiil on deklareeritud ka mujal stiilis või dokumendis. Näiteks:

Meil on sisseehitatud stiilidega järgmine ankur silt

 See on link 

Ja meil on ka stiililehel selle ankurmärgi jaoks eraldi stiil.

 a border: 1px solid # 333; taustavärv: # 555;  

Selles näites saame kasutada !oluline reegel, et sundida brauserit kasutama stiilis lehel olevaid stiile, mitte elementi.

 border: 1px solid # 333! oluline; taustavärv: # 555!  

The !oluline reegel näitab, et see stiil on kõige rohkem oluline ja seda tuleb rakendada üle teise stiili isegi siis, kui see on elementi otse sisse lülitatud (Sisesta stiilid).

Lisalugemist:! tähtsad CSS-deklaratsioonid: kuidas ja millal neid kasutada - Smashing Magazine.

Järeldus

Oleme jõudnud läbi kogu selle artikli. Nüüd näeme, et igal valijal ja viisil, kuidas me stiilid sisestame, on brauseri mehhanismis erinevad prioriteeditasemed. Nagu ma juba varem mainisin, on need teemad mõeldud algajatele, nii et nad ei ole kindlasti midagi uut kogenud veebidisainerite jaoks.

Aga ma arvan, et kõik veebidisainerid üldiselt nõustuvad, et põhitõdede juurde tagasipöördumine on mõnikord vajalik, et vaadata meie põhiteadmised teemast. Tegelikult jääme tihti põhilistest asjadest mööda, sest me kipume olema rohkem muljetavaldavatest (ja hulladest) sellistest asjadest.

Lõpetuseks olen esitanud demo ja lähtefaili, et uurida meie käesolevas artiklis käsitletud arutelu.

• Demo
• Allalaadimise allikas

Loodan, et naudite seda postitust ja kui leiate selles mõningaid ebatäpsusi või kui mul on mõned olulised punktid jäänud, siis ärge kartke mind allpool olevas kommentaaride jaotises teavitada.