CSS sau Foi de stil în cascadă, sunt modalitatea acceptată de industria de web design de a adăuga stiluri vizuale unui site. Cu CSS, puteți controla aspectul paginii, culorile, tipografie, imagine de fundal și multe altele. Practic, dacă este un stil vizual, atunci CSS este modalitatea de a aduce aceste stiluri pe site-ul dvs. web.
Pe măsură ce adăugați stiluri CSS într-un document, este posibil să observați că documentul începe să devină din ce în ce mai lung. Chiar și un site mic cu doar o mână de pagini poate ajunge la un fișier CSS considerabil - iar un site foarte mare cu o mulțime de pagini cu conținut unic poate avea fișiere CSS foarte mari. Acest lucru este agravat de site-uri receptive care au o mulțime de interogări media inclus în foile de stil pentru a schimba aspectul vizual și a paginii pentru diferite ecrane.
Da, fișierele CSS pot deveni mai lungi. Aceasta nu este o problemă majoră atunci când vine vorba performanța site-ului și viteza de descărcare, deoarece chiar și un fișier CSS lung este probabil să fie destul de mic (deoarece este într-adevăr doar un document text). Totuși, fiecare bucată contează atunci când vine vorba de viteza paginii, deci dacă puteți face foaia de stil mai subțire, aceasta este o idee bună. Aici „virgula” poate fi foarte utilă în foaia de stil!
Virgule și CSS
Poate v-ați întrebat ce rol joacă virgula în sintaxa selectorului CSS. La fel ca în propoziții, virgula aduce claritate - nu cod - separatorilor. Virgula într-un Selector CSS separă selectoare multiple în aceleași stiluri.
De exemplu, să ne uităm la câteva CSS de mai jos.
a {culoare: roșu; }
td {culoare: roșu; }
p.red {culoare: roșu; }
div # firstred {color: red; }
Cu această sintaxă, spui că vrei a Etichete, td etichete, etichete de paragraf cu clasa roșie și eticheta div cu ID-ul roșu toate pentru a avea culoarea stilului roșu.
Acest lucru este CSS perfect acceptabil, dar există două dezavantaje semnificative în scrierea acestuia în acest fel:
- În viitor, dacă decideți să schimbați culoarea fontului dintre aceste proprietăți în albastru, trebuie să faceți această schimbare de patru ori în foaia de stil.
- Acesta adaugă o mulțime de caractere suplimentare în foaia de stil de care nu aveți nevoie. Este posibil ca aceste 4 stiluri să nu pară exagerate, dar dacă continuați să faceți acest lucru pe întreaga dvs. foaie de stil, liniile se vor aduna și acea foaie va fi mult, mult mai mare decât trebuie.
Pentru a evita aceste dezavantaje și pentru a vă simplifica fișierul CSS, vom încerca să folosim virgule.
Utilizarea virgulelor pentru a separa selectoarele
În loc să scrieți 4 selectoare CSS separate și 4 reguli, puteți combina toate aceste stiluri într-o singură proprietate de regulă prin separarea selectorilor individuali cu o virgulă. Iată cum s-ar face acest lucru:
th, td, p.red, div # firstred {color: red; }
Caracterul virgulă acționează practic ca cuvântul „sau” în interiorul selectorului. Deci acest lucru este valabil și pentru a etichete SAU td etichete SAU etichete de paragraf cu clasa roșie SAU eticheta div cu ID-ul firstred. Exact asta am avut înainte, dar în loc să avem nevoie de 4 reguli CSS, avem o singură regulă cu mai mulți selectori. Asta face virgula în selector, ne permite să avem mai mulți selectori într-o singură regulă.
Această abordare nu numai că face fișiere CSS mai subțiri și mai curate, ci și ușurează actualizările viitoare. Acum, dacă doriți să schimbați culoarea de la roșu la albastru, trebuie doar să efectuați schimbarea într-o singură locație, în loc de regulile originale de 4 stiluri pe care le aveam! Gândiți-vă la aceste economii de timp într-un întreg fișier CSS și puteți vedea cum vă va economisi atât timp, cât și spațiu pe termen lung!
Variație de sintaxă
Unii oameni aleg să facă CSS mai lizibil separând fiecare selector pe propria linie, în loc să scrie totul pe o linie ca mai sus. Așa s-ar face acest lucru:
a,
td,
p.red,
div # firstred
{
culoarea rosie;
}
Observați că plasați o virgulă după fiecare selector și apoi folosiți „enter” pentru a sparge următorul selector pe propria linie. NU adăugați virgulă după selectorul final.
Utilizând virgule între selectoarele dvs., creați mai multe foaie de stil compactă acest lucru este mai ușor de actualizat în viitor și este mai ușor de citit astăzi!