CSS või Kaskaadiga stiililehedon veebidisainitööstuse aktsepteeritud viis saidile visuaalsete stiilide lisamiseks. CSS-i abil saate juhtida lehe paigutust, värve, tüpograafia, taustapilt ja palju muud. Põhimõtteliselt, kui see on visuaalne stiil, siis CSS on viis, kuidas need stiilid oma veebisaidile tuua.
Kui lisate dokumendile CSS-stiile, võite märgata, et dokument hakkab pikenema. Isegi väikesel saidil, kus on vaid käputäis lehti, võib saada suure CSS-faili - ja väga suurel saidil, kus on palju ja palju unikaalse sisuga lehti, võivad olla väga suured CSS-failid. Sellele lisandub tundlikud saidid millel on palju meediapäringud lisatakse stiililehtedele, et muuta visuaalide välimust ja lehte erinevate ekraanide jaoks.
Jah, CSS-failid võivad venida. See ei ole suur probleem, kui asi puudutab saidi jõudlus ja allalaadimiskiirus, sest isegi pikk CSS-fail on tõenäoliselt üsna väike (kuna see on tegelikult lihtsalt tekstidokument). Sellegipoolest loeb lehtede kiirus iga natuke, nii et kui saate oma stiililehte muuta õhemaks, on see hea mõte. Siin võib "koma" teie stiililehes olla väga kasulik!
Kommad ja CSS
Võib-olla olete mõelnud, millist rolli mängib koma CSS-valija süntaksis. Nagu lausetes, toob koma eraldajatele selguse - mitte koodi. Koma a CSS-i valija lahutab mitu valijat samade stiilide piires.
Vaatame näiteks mõnda allpool olevat CSS-i.
th {värvus: punane; }
td {värvus: punane; }
p.punane {värvus: punane; }
div # firstred {värvus: punane; }
Selle süntaksiga ütlete, et soovite th sildid, td sildid, lõigusildid klassi punasega ja div silt ID-ga käisid kõik, et stiil oleks punane.
See on täiesti vastuvõetav CSS, kuid selle kirjutamisel on kaks olulist puudust:
- Tulevikus, kui otsustate seda muuta fondi värv neist omadustest siniseks, peate selle muudatuse oma stiililehel neli korda tegema.
- See lisab teie stiililehele palju lisamärke, mida te ei vaja. Need 4 stiili ei pruugi tunduda üleküllusena, kuid kui jätkate seda kogu oma stiililehe ulatuses, liidetakse read kokku ja see leht on palju-palju suurem kui vaja.
Nende puuduste vältimiseks ja CSS-faili sujuvamaks muutmiseks proovime kasutada komasid.
Selektorite eraldamiseks kommade kasutamine
4 eraldi CSS-valija ja 4 reegli kirjutamise asemel saate seda teha kombineerima kõik need stiilid üheks reegli omaduseks, eraldades üksikud valijad komaga. Seda tehakse nii:
th, td, p.red, div # firstred {värvus: punane; }
Koma tähemärk toimib põhimõtteliselt valiku sees oleva sõnana "või". Nii et see kehtib ka th sildid VÕI td sildid VÕI lõigusildid klassi punase VÕI div-märgisega, mille ID on pingutatud. Täpselt nii oli meil varemgi, kuid selle asemel, et vajaksime 4 CSS-reeglit, on meil üks reegel, millel on mitu valijat. Seda teeb koma valijas, see võimaldab meil ühes reeglis olla mitu valijat.
See lähenemisviis muudab mitte ainult lihtsamad ja puhtamad CSS-failid, vaid muudab ka tulevased värskendused palju lihtsamaks. Nüüd, kui soovite värvi muuta punasest siniseks, peate muudatuse tegema ainult ühes asukohas, mitte meie esialgsete nelja stiilireegli asemel! Mõelge nende CSS-failide aja kokkuhoiule ja näete, kuidas see säästab pikas perspektiivis nii aega kui ka ruumi!
Süntaksi variatsioon
Mõned inimesed otsustavad CSS-i loetavamaks muuta, eraldades iga valija oma reale, selle asemel, et kirjutada see kõik ühele reale, nagu eespool kirjeldatud. Nii tehtaks:
th,
td,
p.punane,
div # tulihingeline
{
värv: punane;
}
Pange tähele, et asetate koma iga valija järele ja seejärel sisestage järgmine valija oma reale "enter" abil. Te ei lisa koma pärast viimast valijat.
Kasutades oma valijate vahel komasid, saate rohkem kompaktne stiilileht seda on tulevikus lihtsam uuendada ja seda on täna lihtsam lugeda!