Awọn ẹgbẹ CSS pupọ lati mu Iyara Ipaṣiṣẹ pọ
Imudani jẹ ẹya pataki ninu aaye ayelujara ti o ni aaye. Aaye yii gbọdọ jẹ daradara ni bi o ṣe nlo awọn aworan lori ayelujara . Eyi yoo ṣe iranlọwọ rii daju pe aaye naa ṣe daradara fun awọn alejo ati fifuye ni kiakia lori ẹrọ wọn. Iṣe deede yẹ ki o tun jẹ apakan ninu ilana igbesoke rẹ, ran ọ lọwọ lati tọju ilọsiwaju ti aaye kan ni akoko ati lori isuna.
Ni opin, ṣiṣe ṣiṣe ipa ni gbogbo awọn aaye ayelujara ti ipilẹ aaye ayelujara ati ipilẹṣẹ igba pipẹ, pẹlu ninu awọn aza ti a kọ fun awọn iwe CSS ti aaye naa. Ni anfani lati ṣẹda leaner, awọn faili CSS ti o mọto jẹ apẹrẹ, ati ọkan ninu awọn ọna ti o le ṣe aṣeyọri eyi ni lati ṣe akojọpọ awọn olutọsọna CSS pupọ pọ.
Awọn ayẹgbẹ Ẹgbẹ
Nigbati o ba ṣaṣe awọn olutọsọna CSS , o lo iru awọn aza kanna si awọn oriṣiriṣi oriṣi miiran lai tun ṣe awọn aza ni folda ara rẹ. Dipo ti o ni awọn ofin meji tabi mẹta tabi paapaa CSS, gbogbo eyiti o ṣe ohun kanna (apẹẹrẹ, ṣeto awọ ti nkan si pupa), o ni ilana CSS kan ti o ṣe fun oju-iwe rẹ.
Awọn idi idiyele kan ti idi eyi ti "akojọpọ awọn ayanfẹ" ṣe anfani fun oju-iwe kan. Akọkọ pipa, iwe-ara rẹ yoo kere sii ati fifuye diẹ sii yarayara. Lai ṣe otitọ, awọn awo-ara ti kii ṣe ọkan ninu awọn aṣiṣe akọkọ nigbati o ba wa lati fa fifalẹ awọn aaye gbigba. Awọn faili CSS jẹ awọn faili ọrọ, bẹ paapaa gan-an awọn iwe CSS jẹ aami, ọlọgbọn faili, nigbati a ba ṣe afiwe awọn aworan ti a ko le ṣatunkọ. Ṣi, gbogbo awọn diẹ kekere kan ṣe pataki, ati bi o ba le fa irun CSS rẹ kan ati fifuye awọn oju-ewe ti o yarayara, eyi nigbagbogbo jẹ ohun ti o dara lati ṣe.
Ni apapọ, awọn iwọn iyara ti o loke ju fun awọn aaye lọ kere ju 3 aaya; 3 si 7 -aaya jẹ nipa apapọ, ati diẹ sii ju 7 -aaya lọ ni o gun ju lọra. Awọn nọmba kekere wọnyi tumọ si pe, lati ṣe aṣeyọri wọn pẹlu aaye rẹ, o nilo lati ṣe ohun gbogbo ti o le! Eyi ni idi ti o le ran o lọwọ lati ṣe igbesoke aaye rẹ ni lilo awọn olutọpa CSS ti a pingbẹ.
Bi o ṣe le yan awọn CSS Awọn ẹgbẹ
Lati ṣe awọn oluṣayan CSS awọn ẹgbẹ pọ ni folda ti ara rẹ, o lo awọn aami idẹsẹ lati pin awọn onirọpọ akojọpọ ni awọn ara. Ni apẹẹrẹ ni isalẹ, awọn ara yoo ni ipa lori awọn ẹya-ara p ati awọn ami-ipin:
div, p {awọ: # f00; }Itumọ naa tumọ si "ati". Nitorina oludari yi kan si gbogbo awọn ẹya ara ẹrọ paradagi Ati gbogbo awọn eroja pipin. Ti ibanujẹ naa ba sonu, yoo jẹ gbogbo awọn ẹya eleyi ti o jẹ ọmọ ti pipin. Eyi jẹ oludari ti o yatọ pupọ, nitorina yii yii n yi iyipada ayipada pada!
Eyikeyi fọọmu ti aṣayan le ṣee ṣe apopọ pẹlu eyikeyi oludari miiran. Ni apẹẹrẹ yi, a yan oluṣayan kọnputa pẹlu olutọpa ID kan:
p.red, #sub {awọ: # f00; }Nitorina ọna yii kan si eyikeyi paragira ti o ni ijẹrisi kilasi ti "pupa", ATI eyikeyi eleyi (niwon a ko pato irufẹ) ti o ni ID ti "Ibẹrẹ" ti ID.
O le ṣe akojọpọ awọn nọmba eyikeyi ti awọn aṣayan papo, pẹlu awọn oludari ti o jẹ awọn ọrọ alailẹgbẹ ati awọn olutọpa. Apẹẹrẹ yii pẹlu awọn oniruru oniruru:
p, .red, #sub, div a: link {awọ: # f00; }Nitorina ofin CSS yii yoo waye si nkan wọnyi:
- Eyikeyi ipinfin ipinfin
- Eyikeyi eeyan pẹlu kilasi "pupa"
- Eyikeyi opo pẹlu ID ti "iha"
- Awọn ọna asopọ "asopọ" ti o jẹ iru awọn ẹya ara ti oran ti o jẹ awọn iyatọ ti ipin.
Aṣayan ayẹhin naa jẹ oluṣayan onakan. O le wo o ti ni irọrun ni idapo pelu awọn oludari miiran ninu ilana CSS yii. Pẹlu ofin naa, a ti ṣeto awọ ti # f00 (eyi ti o jẹ pupa) lori awọn olutọsọna wọnyi 4, eyi ti o dara ju lati kọ 4 awọn iyasọtọ lọtọ lati ṣe aṣeyọri esi kanna.
Idaniloju miiran ti awọn alakoso awọn ẹgbẹ ni pe, ti o ba nilo lati ṣe iyipada, o le satunkọ ofin CSS kan ṣoṣo dipo awọn ọpọ awọn. Eyi tumọ si pe ọna yii n fi ọ pamọ ati akoko nigba ti o ba wa lati ṣetọju aaye naa ni ojo iwaju.
Aṣayan Aṣayan le ṣee ṣe akojọpọ
Gẹgẹbi o ti le ri lati awọn apeere ti o wa loke, eyikeyi olutọṣe pataki kan le gbe ni ẹgbẹ kan, ati gbogbo awọn eroja ti o wa ni iwe-ipamọ ti o ba gbogbo awọn eroja ti a ṣe akojọ pọ ni iru kanna ti o da lori iru-ara ohun-ini naa.
Diẹ ninu awọn eniyan fẹ lati ṣajọ awọn eroja ti a ṣe akojọpọ lori awọn ila ọtọtọ fun legibility ni koodu. Ifihan lori oju-iwe ayelujara ati iyara fifuye naa wa kanna. Fun apẹrẹ, o le darapọ awọn iyatọ ti a ya sọtọ nipasẹ awọn aami idẹsẹ si ibi-ini ohun kan ni ila kan ti koodu:
th, td, p.red, div # firstred {awọ: pupa; }
tabi o le ṣe akojọ awọn aza lori awọn ila kọọkan fun asọye:
th,
td,
p.red,
div # akọkọ
{
awọ: pupa;
}
Ọna ti o lo lati ṣe akojọpọ awọn ọpọlọpọ awọn olutọsọna CSS ṣe igbesoke aaye rẹ ati ki o mu ki o rọrun lati ṣakoso awọn igba pipẹ.
Atilẹkọ article nipasẹ Jennifer Krynin. Edited by Jeremy Girard lori 5/8/17.