CSS ali Cascading Style Sheets so privlačen način za dodajanje vizualnih stilov na spletno mesto. S CSS lahko nadzirate postavitev strani, barve, tipografijo, sliko v ozadju in še veliko več. V bistvu, če je vizualni slog, potem je CSS način, kako te sloge prenesti na vaše spletno mesto.
Ko v dokument dodate sloge CSS, boste morda opazili, da se dokument začne dlje in dlje. Celo majhna spletna stran s samo nekaj strani lahko konča z veliko datoteko CSS - in zelo veliko spletno mesto z veliko in veliko stranmi edinstvene vsebine ima lahko zelo velike datoteke CSS. To se zgodi z odzivnimi spletnimi mesti, ki vsebujejo veliko medijskih poizvedb, vključenih v slogovne liste, da spremenijo, kako izgledajo slike, in stran za različne zaslone.
Da, datoteke CSS lahko dobijo dolgotrajne. To ni velik problem, ko gre za uspešnost spletnega mesta in hitrost prenosa, saj je tudi dolga datoteka CSS verjetno precej majhna (saj je res samo besedilni dokument). Kljub vsemu pa se vsak trenutek šteje, ko gre za hitrost strani, zato, če lahko naredite svojo slogansko pločevino bolj naklonjeno, je to dobra ideja. Tukaj je lahko »vejica« zelo priročna v vašem slogovnem listu!
Commas in CSS
Morda ste se spraševali, kakšno vlogo ima vejica v CSS selektorski sintaksi. Kot v stavkih, vejica prinaša jasnost - ne kodo - ločilcem. Z vejico v izbirniku CSS je v istih slogih ločenih več selektorjev.
Na primer, poglejmo nekaj CSS spodaj.
th {barva: rdeča; }td {barva: rdeča; }p.red {barva: rdeča; }div # firstred {barva: rdeča; }
S to sintakso pravite, da hočeš th oznake, td oznake odstavkov z rdečim razredom in oznako div z ID-jem, da so vse barve rdeče.
To je povsem sprejemljiv CSS, vendar obstajajo dve pomembni pomanjkljivosti pri pisanju na ta način:
- V prihodnosti, če se odločite, da barvo teh znakov spremenite v modro, jo morate spremeniti štirikrat v vašem slogovnem listu.
- V svoj slogovni list dodaja veliko dodatnih znakov, ki jih ne potrebujete. Ti 4 slogi se morda ne zdijo preveč, če pa to nadaljujete po celotnem slogovnem listu, se bodo vrstice povečale in ta listek bo precej večji, kot bi moral biti.
Da bi se izognili tem pomanjkljivostim in racionalizirali datoteko CSS, bomo poskusili z uporabo vejic.
Uporaba Commas za ločene izbirnike
Namesto da bi napisali 4 ločena izbirnika CSS in 4 pravila, lahko vse te sloge združite v eno lastnost pravila tako, da posamezne selektorje ločite z vejico. Evo, kako bi bilo to storjeno:
th, td, p.red, div # firstred {barva: rdeča; }
Znak za vejico v bistvu deluje kot beseda "in" znotraj izbirnika. To velja torej za th oznake INtd oznake in oznake odstavkov z razredno rdečo in oznako div z ID prvo. To je ravno tisto, kar smo imeli prej, vendar namesto da bi potrebovali 4 pravila CSS, imamo eno samo pravilo z več selektorji. To je tisto, kar vejica naredi v izbirniku, nam omogoča, da imamo več selektorjev v enem pravilu.
Ne samo, da ta pristop omogoča bolj preproste, čistejše CSS datoteke, prav tako omogoča prihodnje posodobitve veliko lažje. Zdaj, če želite spremeniti barvo z rdeče v modro, morate spremeniti samo eno mesto namesto prek prvotnih 4 slogovnih pravil, ki smo jih imeli! Razmislite o tem prihranku časa v celotni datoteki CSS in si lahko ogledate, kako vam bo to prihranilo čas in prostor v dolgem rutu!
Različica sintakse
Nekateri se odločijo, da bodo CSS bolj čitljivi tako, da vsakega selektorja ločijo na svoji liniji, namesto da bi napisali vse na isti vrstici kot zgoraj. Tako bi bilo to storjeno:
th,td,p.red,div # prvi{barva: rdeča;}
Upoštevajte, da za vsakega selektorja postavite vejico in nato uporabite »enter«, da prekinete naslednji izbirnik v svojo vrstico. Po končnem izbirniku NE dodate vejice.
Z uporabo vejice med vašimi selektorji ustvarite bolj kompaktni slogovni list, ki ga boste lažje posodabljali v prihodnosti, ki ga je lažje prebrati danes!
Izvorni članek Jennifer Krynin. Uredil Jeremy Girard dne 5/8/17
