CSS, oz Cascading Style Sheets, so sprejeti način v industriji spletnega oblikovanja za dodajanje vizualnih stilov na spletno mesto. S CSS lahko nadzorujete postavitev strani, barve, tipografija, slika za ozadje in še veliko več. V bistvu, če gre za vizualni slog, potem je CSS način, kako te sloge prenesti na svoje spletno mesto.
Ko dokumentu dodajate sloge CSS, boste morda opazili, da se dokument začne daljšati. Celo majhno spletno mesto z le peščico strani lahko na koncu dobi zajetno datoteko CSS - zelo veliko mesto z veliko in veliko stranmi edinstvene vsebine pa ima lahko zelo velike datoteke CSS. Temu se pridruži odzivna spletna mesta ki imajo veliko medijska vprašanja vključeni v slogovne liste, da spremenite videz videza in stran za različne zaslone.
Da, datoteke CSS lahko postanejo daljše. Ko gre za to, to ni večja težava zmogljivost spletnega mesta in hitrost prenosa, ker bo tudi dolga datoteka CSS verjetno precej majhna (saj gre v resnici le za besedilni dokument). Kljub temu je pri hitrosti strani vsak malenkost pomemben, zato je dobra ideja, če lahko svojo tabelo naredite vitkejšo. Tu je lahko "vejica" zelo priročna v vašem slogu!
Vejice in CSS
Morda ste se vprašali, kakšno vlogo ima vejica v sintaksi izbirnika CSS. Tako kot v stavkih vejica ločnicam prinaša jasnost - in ne kodo. Vejica v Izbirnik CSS ločuje več izbirnikov znotraj istih slogov.
Oglejmo si na primer 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 želite th oznake, td, oznake odstavkov z razredom rdeča in oznaka div z ID-jem najprej naredijo rdečo barvo sloga.
To je povsem sprejemljiv CSS, vendar obstajata dve pomembni pomanjkljivosti, če ga pišemo na ta način:
- Če se v prihodnosti odločite za spremembo barva pisave od teh lastnosti v modro, morate to spremeniti štirikrat v svojem slogu.
- Vašemu slogu doda veliko dodatnih znakov, ki jih ne potrebujete. Ti štirje slogi se morda ne zdijo preveč močni, toda če boste še naprej to počeli na celotnem slogovnem listu, se bodo vrstice seštevale in ta list bo veliko, veliko večji, kot bi moral biti.
Da se izognemo tem pomanjkljivostim in poenostavimo datoteko CSS, bomo poskusili uporabiti vejice.
Uporaba vejic za ločevanje izbirnikov
Namesto da pišete 4 ločene izbirnike CSS in 4 pravila, lahko kombinirati vse te sloge v eno lastnost pravila z ločitvijo posameznih izbirnikov z vejico. Evo, kako bi to naredili:
th, td, p.red, div # firstred {color: red; }
Znak z vejico v bistvu deluje kot beseda "ali" znotraj izbirnika. Torej to velja za th oznake ALI td oznake ALI oznake odstavkov z razredom rdeča ALI oznaka div s prvo oznako ID. To je točno tisto, kar smo imeli prej, vendar namesto da bi potrebovali 4 pravila CSS, imamo eno pravilo z več izbirniki. To počne vejica v izbirniku, omogoča nam, da imamo več izbirnikov v enem pravilu.
Ta pristop ne samo, da omogoča čistejše in čistejše datoteke CSS, temveč tudi olajša prihodnje posodobitve. Zdaj, če ste želeli spremeniti barvo iz rdeče v modro, morate spremembo izvesti samo na enem mestu, ne pa v prvotnih 4 slogovnih pravilih, ki smo jih imeli! Pomislite na prihranek časa v celotni datoteki CSS in videli boste, kako vam bo to dolgoročno prihranilo čas in prostor!
Variacija sintakse
Nekateri se odločijo, da bodo CSS bolj čitljivi, tako da vsak izbirnik ločijo v svoji vrstici, namesto da bi vse zapisali v eno vrstico, kot je opisano zgoraj. To bi naredili tako:
th,
td,
p.red,
div # firstred
{
barva: rdeča;
}
Upoštevajte, da za vsakim izbirnikom postavite vejico in nato uporabite "enter", da naslednji izbirnik razbijete v svojo vrstico. Vejice po končnem izbirniku NE dodajate.
Z uporabo vejic med izbirniki ustvarite več kompakten slog list to je lažje posodobiti v prihodnosti in danes je lažje prebrati!