Kodėl paprastas kablelis supaprastina kodavimą
CSS, arba kaskadinio stiliaus lapai yra tinkamas žiniatinklio dizaino pramonės būdas pridėti vaizdinius stilius prie svetainės. Naudodami CSS galite valdyti puslapio maketą, spalvas, spausdinimą , fono paveikslėlį ir dar daugiau. Iš esmės, jei tai yra vizualus stilius, CSS yra būdas pritraukti šiuos stilius į jūsų svetainę.
Pridedant CSS stilius prie dokumento, galite pastebėti, kad dokumentas pradeda pratęsti ir ilgiau. Netgi maža svetainė, kurioje yra tik keletas puslapių, gali būti didelė CSS byla, o labai didelė svetainė su daugybe unikalaus turinio puslapių gali turėti labai didelius CSS failus. Tai sustiprina jautrūs tinklalapiai, kuriuose yra daugybė žiniasklaidos užklausų, įtrauktų į stilių lenteles, siekiant pakeisti vaizdų išvaizdą, o puslapis pateikiamas skirtingiems ekranams.
Taip, CSS failai gali trukti ilgiau. Tai nėra didelė problema, kai kalbama apie svetainės našumą ir atsisiuntimo greitį, nes net ilgas CSS failas greičiausiai bus gana mažas (nes tai tikrai tik teksto dokumentas). Vis dėlto kiekvienas šiek tiek skaičiuojamas, kai kalbama apie puslapio greitį, taigi, jei jūs galite padaryti savo stiliaus lapą laner, tai yra gera idėja. Štai kur "kablelis" gali būti labai naudingas jūsų stiliaus lape!
Komunos ir CSS
Jums gali tekti susimąstyti, kokį vaidmenį vaidina kablelis CSS selektoriaus sintaksėje. Kaip sakinyje, kablelis suteikia aiškumą, o ne kodą - separatoriams. CSS valdiklio kablelis atskiria keletą selektorių toje pačioje stilių.
Pavyzdžiui, pažvelkime į kai kuriuos CSS.
th {spalva: raudona; }
td {spalva: raudona; }
p.red {color: red; }
div # firstred {color: red; }
Naudodamiesi šia sintaksė, jūs sakote, kad jūs norite, kad tos žymos, td žymos, žymos taškų su raudonąja klasė ir dvi žyma su ID pirmasis, kad visi stiliaus spalvos būtų raudonos.
Tai yra visiškai priimtina CSS, tačiau yra du svarbūs tokio rašymo trūkumai:
- Ateityje, jei nuspręsite pakeisti šių savybių šriftą į mėlyną spalvą, tuomet keturis kartus keiskite savo stilių lentelę.
- Tai prideda daug papildomų simbolių savo stiliaus lape, kad jums nereikia. Šie 4 stiliai gali atrodyti nepakankami, bet jei jūs ir toliau tai atliksite visą savo stilių lentelę, linijos bus pridedamos ir šis lapas bus daug, daug didesnis nei jis turi būti.
Norint išvengti šių trūkumų ir supaprastinti CSS failą, mes bandysime naudoti kableliais.
Kumelių naudojimas atskiroms selektoriams
Užuot rašę 4 atskirus CSS selektorius ir 4 taisykles, galite visus šiuos stilius sujungti į vieną taisyklę, atskirdami atskirus selektorius kableliais. Štai kaip tai bus padaryta:
th, td, p.red, div # firstred {color: red; }
Kablelio simbolis iš esmės veikia kaip žodis "ir" per selektorių. Taigi tai taikoma t h tags AND td žymes IR paragrafų žymes su klasės raudona ir dvi žyma su ID firstred. Tai buvo būtent tai, ką anksčiau turėjome, tačiau vietoj to, kad reikėjo 4 CSS taisyklių, turime vieną taisyklę su keliais parinkikliais. Tai yra tai, ką kablelis atlieka, tai leidžia mums turėti keletą selektorių vienoje taisyklėje.
Šis metodas ne tik padeda kurti paprastesnes, švaresnes CSS rinkmenas, bet ir dar labiau pagerina būsimus naujinius. Dabar, jei norite pakeisti spalvą nuo raudonos iki mėlynos, turėsite pakeisti tik vieną vietą, o ne pagal originalias 4 stiliaus taisykles, kurias turėjome! Pagalvokite apie šį laiko taupymą per visą CSS failą ir pamatysite, kaip tai padės sutaupyti laiko ir erdvės ilguoju rumu!
Sintaksės variantas
Kai kurie žmonės pasirenka, kad CSS būtų įskaitomas, kiekvieną parinkiklį atskirdamas savo eilute, o ne rašyti viską vienoje eilutėje, kaip nurodyta pirmiau. Štai kaip tai bus padaryta:
th,
td
p.red
Div # pirmasis
{
spalva: raudona;
}
Atkreipkite dėmesį, kad po kiekvieno parinkiklio nustatote kablelį ir tada naudokite "įveskite", kad perjungtumėte kitą selektorių į savo eilutę. Po paskutiniojo rinkiklio neįtraukite kablelio.
Naudodamiesi kableliais tarp jūsų parinkiklių, sukursite kompaktiškesnį stiliaus lapą, kurį ateityje lengviau atnaujinti ir kurį šiandien lengviau skaityti!
Originalus straipsnis Jennifer Krynin. Redagavo Jeremy Girard 5/8/17