CSS arba Kaskados stiliaus lapaiyra žiniatinklio dizaino industrijos priimtinas būdas pridėti vaizdinių stilių svetainėje. Naudodami CSS galite valdyti puslapio išdėstymą, spalvas, tipografija, fono paveikslėlis ir daug daugiau. Iš esmės, jei tai yra vizualinis stilius, CSS yra būdas tuos stilius patekti į savo svetainę.
Pridėdami CSS stilių prie dokumento, galite pastebėti, kad dokumentas pradeda ilgėti ir ilgėti. Net maža svetainė, kurioje yra tik keletas puslapių, gali baigtis dideliu CSS failu - o labai didelė svetainė, kurioje yra daug ir daug unikalaus turinio puslapių, gali turėti labai didelius CSS failus. Tai dar labiau padidina reaguojančios svetainės kurie turi daug žiniasklaidos užklausos įtraukta į stiliaus lapus, kad būtų galima pakeisti vaizdų išvaizdą ir puslapio išdėstymą skirtingiems ekranams.
Taip, CSS failai gali užtrukti. Tai nėra pagrindinė problema svetainės našumas ir atsisiuntimo greitis, nes net ilgas CSS failas greičiausiai bus gana mažas (nes tai iš tikrųjų yra tik tekstinis dokumentas). Vis dėlto, kalbant apie puslapio greitį, svarbu kiekvienas dalykas, taigi, jei galite padaryti savo stiliaus lapą plonesnį, tai yra gera idėja. Čia „kablelis“ gali būti labai naudingas jūsų stiliaus lape!
Komos ir CSS
Galbūt susimąstėte, kokį vaidmenį kablelis vaidina CSS selektoriaus sintaksėje. Kaip ir sakiniuose, kablelis atskyrėjams suteikia aiškumo, o ne kodo. Kablelis a CSS parinkiklis atskiria keli selektoriai pagal tuos pačius stilius.
Pvz., Pažvelkime į keletą toliau pateiktų CSS.
th {spalva: raudona; }
td {spalva: raudona; }
p.red {spalva: raudona; }
div # firstred {spalva: raudona; }
Taikydami šią sintaksę jūs sakote, kad norite tūkst žymos, td žymos, pastraipos žymos su klase raudona ir div žyma su ID pabrėžė, kad stiliaus spalva būtų raudona.
Tai yra visiškai priimtina CSS, tačiau ją rašant tokiu būdu yra du reikšmingi trūkumai:
- Ateityje, jei nuspręsite pakeisti šrifto spalva iš šių savybių iki mėlynos spalvos, keturis kartus turite tai pakeisti savo stiliaus lape.
- Tai jūsų stiliaus lape prideda daug papildomų simbolių, kurių jums nereikia. Šie 4 stiliai gali neatrodyti per daug, bet jei ir toliau tai darysite per visą stiliaus lapą, eilutės bus sujungtos ir tas lapas bus daug, daug didesnis, nei reikia.
Norėdami išvengti šių trūkumų ir supaprastinti CSS failą, pabandysime naudoti kablelius.
Komandų naudojimas norint atskirti selektorius
Užuot parašę 4 atskirus CSS parinkiklius ir 4 taisykles, galite sujungti visi šie stiliai į vieną taisyklės ypatybę atskirdami atskirus selektorius kableliu. Štai kaip tai būtų daroma:
th, td, p.red, div # firstred {spalva: raudona; }
Kablelis iš esmės veikia kaip žodis „arba“ selektoriaus viduje. Taigi tai taikoma tūkst žymos ARBA td žymos ARBA pastraipų žymos su raudona klase ARBA div žyme su ID. Tai buvo būtent tai, ką turėjome anksčiau, tačiau užuot reikalavusios 4 CSS taisyklių, mes turime vieną taisyklę su keliais selektoriais. Tai, ką kablelis daro pasirinkiklyje, jis leidžia mums turėti kelis pasirinkiklius vienoje taisyklėje.
Šis metodas suteikia ne tik paprastesnius, švaresnius CSS failus, bet ir labai palengvina būsimus atnaujinimus. Dabar, jei norite pakeisti spalvą iš raudonos į mėlyną, turite atlikti pakeitimus tik vienoje vietoje, o ne pagal pradines 4 stiliaus taisykles, kurias turėjome! Pagalvokite apie tai, kaip sutaupysite laiko visame CSS faile, ir pamatysite, kaip tai padės sutaupyti laiko ir vietos ilgainiui!
Sintaksės variacija
Kai kurie žmonės nusprendžia padaryti CSS labiau įskaitomą, atskirdami kiekvieną selektorių savo eilutėje, užuot viską rašę vienoje eilutėje, kaip nurodyta aukščiau. Tai būtų padaryta taip:
th,
td,
raudona,
div # firstred
{
spalva: raudona;
}
Atkreipkite dėmesį, kad po kiekvieno žymekliu dedate kablelį ir tada paspauskite „Enter“, kad kitą selektorių pertrauktumėte į savo eilutę. Negalite pridėti kablelio po paskutinio parinkiklio.
Naudodami kablelius tarp savo pasirinkėjų, sukuriate daugiau kompaktiškas stiliaus lapas tai lengviau atnaujinti ateityje ir tą lengviau perskaityti šiandien!