Tri vrste CSS stilova

Izrada web stranica s prednjim dijelom često je predstavljena kao stolica s tri noge koja se sastoji od:

• HTML za strukturu stranice
• CSS za vizualne stilove
• Javascript za ponašanja

Druga noga ove stolice, Cascading Style Sheets, podržava tri različita stila koja možete dodati u dokument.

1. Ugrađeni stilovi
2. Ugrađeni stilovi
3. Vanjski stilovi

Svaki od ovih CSS stilova predstavlja jedinstvene prednosti i nedostatke.

Ugrađeni stilovi

Ugrađeni stilovi su stilovi koji se zapisuju izravno u oznaku u HTML dokumentu. Ugrađeni stilovi utječu samo na određenu oznaku na koju su primijenjeni:

Ovo CSS pravilo deaktivira standardno ukrašavanje teksta za podcrtavanje ove veze. Međutim, to ne bi promijenilo nijedan drugi link na stranici. To je jedno od ograničenja umetnutih stilova. Budući da se mijenjaju samo na određenoj stavci, morat ćete zasipati HTML tim stilovima kako biste postigli jedinstveni dizajn stranice. To nije najbolja praksa: Zapravo je to jedan korak udaljen od dana font oznake i primjese strukture i stila na web stranicama.

Ugrađeni stilovi također zahtijevaju vrlo visoku specifičnost. Zbog toga ih je teško prepisati s drugim, ne-ugrađenim stilovima. Na primjer, ako želite web stranicu prilagoditi i pomoću nje promijeniti način na koji element gleda na određene točke prekida medijski upiti, ugrađeni stilovi na elementu otežavaju to.

Ugrađeni stilovi prikladni su samo kada ih koristite štedljivo, u pristupu "iznimka od pravila" koji jedan ili dva elementa odvaja od njihovih vršnjaka na stranici.

Ugrađeni stilovi

Ugrađeni stilovi nalaze se u glavi dokumenta. Zatvoreni su u oznake i izgledaju poput vanjskih CSS datoteka unutar tog dijela dokumenta.

Ugrađeni stilovi utječu samo na oznake na stranici u koju su ugrađeni. Još jednom, ovaj pristup negira jednu od snaga CSS-a. Budući da svaka stranica sadrži stilove definirane u zaglavlju, ako želite promijeniti cijelu web lokaciju - poput promjene boje veza od crvene do zelene - ovu ćete promjenu trebati unijeti na svaku stranicu, jer svaka stranica koristi ugrađeni stil list. Ovaj je pristup bolji od umetnutih stilova, ali je u mnogim slučajevima i dalje problematičan.

Tablice s stilovima koje se dodaju u glavu dokumenta također dodaju značajnu količinu označnog koda na tu stranicu, što također može otežati upravljanje stranicom u budućnosti.

Prednost ugrađenih stilskih tablica je u tome što se oni učitavaju odmah sa samom stranicom, umjesto da zahtijevaju učitavanje drugih vanjskih datoteka. Ova tehnika može imati koristi od brzine preuzimanja i perspektive izvedbe.

Vanjski listovi stilova

Većina web stranica danas koristi vanjske tabele stilova. Vanjski stilovi su stilovi koji su napisani u zasebnom dokumentu, a zatim priloženi raznim web dokumentima. Pozvani su u glavni dokument pomoću a oznaka u glavi dokumenta. Vanjske tablice stilova mogu se nalaziti na istom poslužitelju kao i HTML ili se mogu u potpunosti povući s drugog poslužitelja. To je često slučaj s imovinom, poput fontova, koje mnoge web stranice posuđuju od Googlea.

Vanjski listovi stilova utječu na bilo koji dokument kojem su priloženi, što znači da ako imate web stranicu s 20 stranica na kojoj svaka stranica koristi isti tablicu stilova (to se obično radi), možete vizualno izmijeniti svaku od tih stranica jednostavnim uređivanjem tog jednog stila list. Ova ekonomija znatno olakšava dugoročno upravljanje web stranicama.

Loša strana vanjskih listova stilova je ta što one zahtijevaju stranice za dohvaćanje i učitavanje tih vanjskih datoteka. Neće svaka stranica koristiti svaki stil na CSS listu, pa će toliko stranica učitati puno veću CSS stranicu nego što je to zapravo potrebno.

Iako je istina da postoji pogodak za izvedbu vanjskih CSS datoteka, to se sigurno može minimizirati. Realno, CSS datoteke su samo tekstualne datoteke, pa za početak nisu velike. Ako cijela vaša web lokacija koristi jednu CSS datoteku, dobit ćete i prednost predmemoriranja tog dokumenta nakon što je početno učitan, što znači da moglo bi doći do blagog pogotka izvedbe na prvoj stranici za neke posjete, ali sljedeće stranice će koristiti predmemoriranu CSS datoteku, pa bi bilo pogodaka bilo negiran.