CSS stiliaus prioritetų lygio peržiūra

Kaskados stiliaus lapas (CSS) , manau, paprasčiausias kalbas, palyginti su kitomis su internetu susijusiomis kalbomis, todėl nenuostabu, kad daugelis žmonių, kurie tik pradeda mokytis, kaip sukurti svetainę, dažniausiai išmoksta šią kalbą ir HTML pirmiausia.

Šiame pranešime grįšime į CSS pagrindus. Mes peržiūrėsime, kaip iš pradžių taikomi CSS stiliai, kokie stiliai bus taikomi, kaip kai kurių stilių deklaracijos perrašo viena kitą, o kitos ne.

Taigi, šis pranešimas specialiai skirtas pradedantiesiems, kurie tik pradeda pakabinti iššūkius, greičiausiai darant klaidas ir klaidas rengdami savo pirmąjį stilių. Taigi, pradėkime.

Numatytieji naršyklės stiliai

„Firefox“, „Chrome“, „Safari“, „Opera“ ir „Internet Explorer“ šiuo metu yra geriausios penkios darbalaukio naršyklės rinkoje. Šios naršyklės ir visos kitos naršyklės laikosi standartinės taisyklės, kad įtrauktų įmontuotus numatytuosius stilius, kad pateiktų HTML elementus.

Taigi, kai įdėjome keletą atsitiktinių HTML elementų be jokių pridėtų stilių, pamatysite, kad naršyklėje jis vis dar tinkamai pateikiamas.

Tačiau, jei atidžiai patikrinsime šiuos elementus, kiekviena naršyklė turi (šiek tiek) skirtingas vertes “numatytas” deklaracija, kuri sukelia nesuderinamumą visose naršyklėse, ypač senajame, pvz., IE6, 7 ir Firefox 3.0.

Pavyzdžiui, kaip matote iš pirmiau pateikto ekrano, naujausias „Firefox“ suteikė blokas pagal nutylėjimą skirtumas: 16px 40px 16px 40px, o kitoje pusėje - „Internet Explorer 7“ bus blokas su skirtumas: 0px 40px.

Norėdami įveikti aukščiau minėtus neatitikimus, daugelis interneto dizainerių ir kūrėjų nori perrašyti visus šiuos stilius CSS atstatymas. Šiame CSS faile paprastai yra beveik visi HTML Tipas pasirinktys, apibrėžiant jas vienodomis taisyklėmis.

Yra daug CSS iš naujo nustatyti, tačiau čia yra mano trys mėgstamiausi:

• Normalize.css
• CSS atstatymas
• HTML5 atkurti stilių lentelę

Pasirinkėjai

Jūs tikriausiai dažnai perskaitėte šį terminą visuose žiniatinklio projektavimo / kūrimo dienoraščiuose, kuriuos lankėte; Pasirinkėjai.

„CSS“ selektorius yra sintaksė, naudojama norint taikyti bet kokias HTML dokumento dalis, kad būtų galima taikyti stilius. Čia yra trys pagrindiniai pasirinkėjai, apie kuriuos kalbėsime, nes jie greičiausiai bus bendrieji jūsų pirmojoje svetainėje naudojami atrankos elementai. Kitiems būsimiems pranešimams mes padengsime.

Tipo parinkiklis

Pirmiau minėjome, kad tipo parinkiklis nukreips visus nurodytus HTML elementus dokumente. Pavyzdžiui:

 p / ** deklaracija ** / 

atitiks visus p arba pastraipoje elementai ir naudojimasis juo perrašys numatytuosius naršyklės stilius.

Klasės pasirinkimas

Kai prie elemento pridėjote klasę ar net daugybę klasių, taip pat galite nukreipti šias klases. The Klasės pasirinkimas prasideda a taškas parametras.

 .langelis / ** deklaracija ** / 

Pirmiau minėtas fragmentas atitiks visus elementus, kuriuose yra dėžutės klasė, arba mes taip pat galime pasirinkti konkrečiau.

 p.box / ** deklaracija ** / 

Jis bus skirtas tik p elementas, turintis dėžė klasė.

Kai mes naudojame Klasė selektorius, visos tos pačios stiliaus deklaracijos iš abiejų Tipas selektorių ir Numatytoji naršyklė bus perrašyta.

ID pasirinkimas

The ID yra labai ribojantis atributas, galime turėti tik vieną ID ant elemento ir jis taip pat turi būti unikalus.

 
Turinys
 

Jei mes turime ID elemente galime naudoti ID selektorius nukreipti šį elementą; ID selektorius yra nustatytas su maišytuvu # parametras.

 #uniqueID / ** deklaracija ** / 

Nuo ID unikalus, jis turi didžiausią pirmenybinio pasirinkimo lygio lygį. Taigi, kai skelbiame stilius su ID selektorius galiausiai perrašys tą pačią deklaraciją iš Klasė, Tipas selektoriai ir Numatytoji naršyklė stilių.

Įtraukti stilius

Mes atėjome per visus svarbiausius pagrindinius selektorius ir dabar mes ieškosime, kaip šie stiliai yra įterpti į HTML dokumentą.

Išoriniai stiliai

Išoriniai stiliai yra stiliai, kurie yra įtraukti į atskirą failą, paprastai a .css failas, kuris tada yra susietas su HTML dokumentu naudojant žymas, kad pritaikytumėte šiuos stilius.

Ir visi failuose nurodyti stiliai veiks taip, kaip mes minėjome Pasirinkėjai aukščiau, būtent jis bus perrašytas numatytojo naršyklės stiliaus, ir perrašyti kitą stiliaus deklaraciją, priklausomai nuo pasirinktųjų prioritetų lygio.

Ši praktika yra labiausiai rekomenduojamas būdas pridėti stilius, ypač kai turite tūkstančius eilių CSS kodų su daugeliu puslapių, kuriuos norite pridėti prie.

Tokiu būdu, stiliai taip pat bus lengvai valdomi, pavyzdžiui, galite atskirti CSS failus į kelis failus, priklausomai nuo jo specifinio vaidmens, pvz., Typography.css, kad būtų galima valdyti visus su tipografija susijusius stilius ir kt.

Vidiniai stiliai

Vidiniai stiliai yra stiliai, kurie yra įterpti tiesiai į HTML dokumentą, paprastai viduje žyma.

Tačiau ši praktika nerekomenduojama, kai turėsite šimtus stilių, nes jūsų HTML puslapis bus per ilgas ir stilius turės įtakos tik tada, kai stiliai yra įterpti. Kai leisite pasakyti dešimt puslapių, jums reikės nukopijuoti šiuos stilius ir įdėti juos į visus puslapius ir, kai jums reikia keisti stilius, turite jį pakeisti į dešimt skirtingų puslapių, o tai akivaizdžiai sunki užduotis.

Remiantis jos prioritetiniu lygiu, vidinis stilius yra didesnis, todėl jis perrašys išorinius stilius.

Inline stiliai

Inline stiliai yra stiliai, kurie yra tiesiogiai įterpti į HTML elementą.

 
Tai dalis
 

Šis pavyzdys bus pridėtas 5px taip pat bus perrašyti šiam elementui deklaruoti maržos tiek vidaus, tiek išorės stiliuose.

Tačiau venkite to daryti, nes jūsų žymėjimas bus užterštas visomis šiomis stiliaus deklaracijomis; jei turite įdėtų stilių krūva, tai net taps košmaru, kad pamatytumėte ir išlaikytumėte visus jūsų html ir stilius.

Papildoma literatūra: Trys būdai įterpti CSS - W3CSchools.

Svarbi taisyklė

Yra tam tikrų aplinkybių, kai elementui reikia taikyti konkretų stilių, tačiau tas pats elementas taip pat buvo deklaruotas kitur stiliaus lape arba dokumente. Pavyzdžiui:

Turime tokį inkarų žymą su įdėtais stiliais

 Tai yra nuoroda 

Be to, stiliaus lape mes taip pat turime atskirą šios ankerinio žymens stilių.

 siena: 1px kietas # 333; fono spalva: # 555;  

Šiame pavyzdyje galime naudoti !svarbu taisyklė priversti naršyklę naudoti stiliaus lapo stilius, o ne elementą.

 siena: 1px kietas # 333! fono spalva: # 555!  

The !svarbu taisyklė parodys, kad šis stilius yra labiausiai svarbu ir turi būti pritaikytas kitam stiliui net tada, kai jis yra tiesiogiai įdėtas į elementą (Inline stiliai).

Papildoma literatūra:! svarbios CSS deklaracijos: kaip ir kada jas naudoti - Smashing Magazine.

Išvada

Mes pasiekėme visą šio straipsnio temą. Dabar matome, kad kiekvienas selektorius ir būdas, kaip įterpiame stilius, naršyklės mechanizme turi skirtingus prioritetus. Kaip jau minėjau, šie dalykai skirti pradedantiesiems, todėl jie tikrai nėra kažkas naujo patyrusiems interneto dizaineriams.

Bet, manau, kad kiekvienas žiniatinklio dizaineris apskritai sutiks, kad grįžimas prie pagrindų kartais yra būtinas norint peržiūrėti mūsų pagrindines žinias apie temą. Tiesą sakant, mes dažnai praleidžiame kai kuriuos pagrindinius dalykus, nes mes esame labiau sužavėti nuostabiais (ir beprotiškais) tokiais dalykais..

Galiausiai, pateikiau demo ir šaltinio failą, kad galėtume išsamiau išnagrinėti šį straipsnį.

• Demo
• Atsisiųsti šaltinį

Tikiuosi, kad jums patiks šis įrašas, ir, jei radote tam tikrą netikslumą arba praleidote keletą svarbių punktų, nedvejodami praneškite apie tai žemiau pateiktame komentarų skyriuje.