Tri vrste slogov CSS

Razvoj spletnega mesta na sprednji strani je pogosto predstavljen kot trikrako blato, sestavljeno iz:

• HTML za strukturo spletnega mesta
• CSS za vizualne sloge
• Javascript za vedenje

Druga noga tega blata, Cascading Style Sheets, podpira tri različne sloge, ki jih lahko dodate v dokument.

1. Vstavljeni slogi
2. Vdelani slogi
3. Zunanji slogi

Vsak od teh stilov CSS predstavlja edinstvene prednosti in slabosti.

Vstavljeni slogi

Vstavljeni slogi so slogi, ki so zapisani neposredno v oznako v dokumentu HTML. Vstavljeni slogi vplivajo samo na določeno oznako, za katero so uporabljeni:

To pravilo CSS deaktivira standardno dekoracijo besedila za podčrtavanje te povezave. Vendar ne bi spremenila nobene druge povezave na strani. To je ena od omejitev vstavljenih stilov. Ker se spremenijo samo na določenem elementu, bi morali svoj HTML zasuti s temi slogi, da bi dosegli enotno zasnovo strani. To ni najboljša praksa: pravzaprav je le en korak odmaknjen od dni pisave oznake ter dodatek strukture in sloga na spletnih straneh.

Vgrajeni slogi zahtevajo tudi zelo visoko specifičnost. Zaradi tega jih je težko prepisati z drugimi, nelinearnimi slogi. Če želite na primer spletno mesto narediti odzivno in z uporabo spremeniti videz elementa na določenih mejnih točkah medijska vprašanja, vstavljeni slogi elementa to otežujejo.

Vstavljeni slogi so primerni le, če jih uporabljate zmerno, v pristopu »izjema od pravila«, ki enega ali dva elementa loči od vrstnikov na strani.

Vdelani slogi

Vdelani slogi so v glavi dokumenta. Zaprti so oznake in so podobne zunanjim datotekam CSS znotraj tega dela dokumenta.

Vdelani slogi vplivajo samo na oznake na strani, v katero so vdelani. Ta pristop še enkrat zanika eno od prednosti CSS. Ker vsaka stran vsebuje sloge, določene v glavi, če želite spremeniti celotno spletno mesto, na primer spremeniti barvo povezav od rdeče do zelene - to spremembo bi morali izvesti na vsaki strani, saj vsaka stran uporablja vdelani slog list. Ta pristop je boljši od vstavljenih stilov, vendar je v mnogih primerih še vedno problematičen.

Preglednice, ki so dodane na glavo dokumenta, na to stran dodajo tudi znatno količino označevalne kode, kar lahko tudi oteži upravljanje strani v prihodnosti.

Prednost vdelanih slogovnih listov je, da se takoj naložijo s samo stranjo, namesto da bi zahtevali nalaganje drugih zunanjih datotek. Ta tehnika lahko koristi hitrosti prenosa in perspektivi učinkovitosti.

Zunanje sloge

Večina spletnih mest danes uporablja zunanje slogovne liste. Zunanji slogi so slogi, ki so zapisani v ločenem dokumentu in nato priloženi različnim spletnim dokumentom. V glavni dokument jih pokličejo s pomočjo oznako v glavi dokumenta. Zunanji slogovni listi se lahko nahajajo na istem strežniku kot HTML ali pa jih je mogoče v celoti potegniti z drugega strežnika. To se pogosto dogaja pri sredstvih, kot so pisave, ki si jih številna spletna mesta izposodijo pri Googlu.

Zunanji slogovni listi vplivajo na kateri koli dokument, ki so mu priloženi, kar pomeni, da če imate 20-stransko spletno mesto, kjer vsaka stran uporablja isti slog (to se običajno počne), lahko vizualno spremenite vsako stran, tako da preprosto uredite ta slog list. To gospodarstvo olajša dolgoročno upravljanje strani.

Slaba stran zunanjih slogov je, da zahtevajo strani za pridobivanje in nalaganje teh zunanjih datotek. Vsaka stran ne bo uporabila vsakega sloga na listu CSS, zato bo veliko strani naložilo veliko večjo stran CSS, kot je dejansko potrebna.

Res je, da za zunanje datoteke CSS obstaja uspešnost, vendar jo je vsekakor mogoče zmanjšati. Realno so datoteke CSS samo besedilne datoteke, zato za začetek niso velike. Če vaše celotno spletno mesto uporablja eno samo datoteko CSS, dobite tudi prednost predpomnjenja tega dokumenta, potem ko je prvotno naložen, kar pomeni, da pri nekaterih obiskih bi lahko na prvi strani prišlo do rahle uspešnosti, vendar bodo naslednje strani uporabile predpomnjeno datoteko CSS, zato bi bil vsak zadetek izničeno.