Pse një presje e thjeshtë thjeshton kodimin
CSS ose Cascading Style Sheets, janë mënyra e pranuar e industrisë së web design për të shtuar stilet vizuale në një faqe. Me CSS, ju mund të kontrolloni faqosjen e faqeve, ngjyrat, tipografinë , imazhin e sfondit dhe shumë më tepër. Në thelb, nëse është një stil vizual, atëherë CSS është rruga për t'i sjellë ato stile në faqen tuaj te internetit.
Ndërsa shtoni stilet CSS në një dokument, mund të vëreni se dokumenti fillon të zgjasë më gjatë. Edhe një faqe e vogël me vetëm një pjesë të vogël të faqeve mund të përfundojë me një skedar CSS të dukshëm - dhe një faqe shumë e madhe me shumë dhe shumë faqe të përmbajtjes unike mund të ketë fotografi shumë të mëdha CSS. Kjo është e përbërë nga sajtet e përgjegjshme që kanë shumë pyetje të medias të përfshira në fletët e stilit për të ndryshuar pamjen e pamjes dhe faqja paraqitet për ekranet e ndryshme.
Po, skedarët CSS mund të zgjasin shumë. Ky nuk është një problem i madh kur bëhet fjalë për performancën e faqes dhe shpejtësinë e shkarkimit, sepse edhe një skedar i gjatë CSS ka të ngjarë të jetë mjaft i vogël (pasi që është me të vërtetë vetëm një dokument teksti). Prapëseprapë, çdo numër i vogël llogaritet kur vjen puna te shpejtësia e faqes, kështu që nëse mund ta bëni fletën tuaj të stilit, kjo është një ide e mirë. Kjo është ajo ku "presja" mund të vijë shumë e volitshme në fletën tuaj të stilit!
Komandat dhe CSS
Ju mund të keni menduar se çfarë roli luan presje në sintaksën përzgjedhëse CSS . Ashtu si në fjali, presja sjell qartësi - jo kod - tek ndarësit. Pikët në një përzgjedhës CSS ndan përzgjedhës të shumëfishtë në të njëjtat stile.
Për shembull, le të shohim disa CSS më poshtë.
th {ngjyra: e kuqe; }
td {ngjyra: e kuqe; }
p.red {ngjyra: e kuqe; }
div # firstred {ngjyra: e kuqe; }
Me këtë sintaksë, ju thoni që doni etiketat, etiketat td , etiketat e paragrafëve me të kuqën e klasës dhe etiketa div me ID të parë të gjithë të kenë ngjyrën e stilit të kuq.
Kjo është krejtësisht e pranueshme CSS, por ka dy të meta të rëndësishme për të shkruar atë në këtë mënyrë:
- Në të ardhmen, nëse vendosni të ndryshoni ngjyrën e shkronjave të këtyre pronave në ngjyrë blu, duhet ta bëni atë ndryshim katër herë në fletën tuaj të stilit.
- Shton shumë karaktere ekstra në fletën tuaj të stilit që ju nuk keni nevojë. Këto 4 stilet mund të mos duken si overkill, por nëse vazhdoni ta bëni këtë në të gjithë stilin tuaj të stilit, linjat do të shtohen dhe fleta do të jetë shumë më e madhe sesa duhet.
Për të shmangur këto pengesa, dhe për të përmirësuar skedarin tuaj CSS, ne do të përpiqemi të përdorim presje.
Përdorimi i komandave për zgjedhësit e veçantë
Në vend që të shkruani 4 përzgjedhës të veçantë CSS dhe 4 rregulla, mund të kombinoni të gjitha këto stile në një pronë të rregullit duke ndarë individët individualë me një presje. Ja se si do të bëhet kjo:
th, td, p.red, div # firstred {ngjyra: e kuqe; }
Karakteri me presje në thelb vepron si fjala "dhe" brenda selektorit. Pra, kjo vlen për t h tags DHE td tags DHE tags paragrafi me klasën e kuqe dhe tag div me ID parë. Kjo është pikërisht ajo që kishim më parë, por në vend që të kemi nevojë për 4 rregulla CSS, ne kemi një rregull të vetëm me përzgjedhës të shumëfishtë. Kjo është ajo që bën presioni në zgjedhës, na lejon që të kemi zgjedhës të shumëfishtë në një rregull.
Jo vetëm që kjo qasje bën për dosjet më të lehta dhe më të pastra CSS, por edhe përditësimet në të ardhmen janë shumë më të lehta. Tani, nëse dëshironi të ndryshoni ngjyrën nga e kuqe në blu, vetëm duhet të bëni ndryshimin në një vend, në vend të rregullave origjinale të stilit 4 që kishim! Mendoni për këto kursime kohe në një skedar të tërë CSS dhe mund të shihni se si kjo do t'ju kursejë kohën dhe hapësirën në rune të gjatë!
Varianti i sintaksës
Disa njerëz zgjedhin të bëjnë CSS më të lexueshëm duke ndarë secilin përzgjedhës në vijën e vet, në vend që të shkruajnë të gjitha në një vijë si më sipër. Kështu do të bëhet kjo:
th,
td,
p.red,
div # firstred
{
ngjyra: e kuqe;
}
Vini re se vendosni një presje pas secilit përzgjedhës dhe pastaj përdorni "Enter" për të thyer zgjedhësin e ardhshëm në vijën e vet. Ju NUK shtoni një presje pas përzgjedhësit përfundimtar.
Duke përdorur kometa midis përzgjedhësve tuaj, krijoni një fletë stilesh më kompakt që është më e lehtë për t'u përditësuar në të ardhmen dhe që është më e lehtë për tu lexuar sot!
Artikulli origjinal nga Jennifer Krynin. Redaktuar prej Jeremy Girard më 5/8/17