Inline, ugrađeni i vanjski stilski listovi: Evo što trebate znati
Front-end web razvoj često se predstavlja kao 3-legged stolica. Te noge su sljedeće:
Druga etapa ove stolice, CSS ili Cascading Style Sheets, ono što danas gledamo ovdje. Naime, želimo se baviti 3 vrste stilova koje možete dodati dokumentu.
- Inline stilovi
- Ugrađeni stilovi
- Vanjski stilovi
Svaka od ovih vrsta CSS stilova ima svoje prednosti i nedostatke, pa neka se dublje pogledaju na svaki od njih pojedinačno.
Inline stilovi
Inline stilovi su stilovi koji su napisani izravno u oznaci u HTML dokumentu. Inline stilovi utječu samo na određenu oznaku na koju se primjenjuju. Evo primjera inline stila koji se primjenjuje na standardnu vezu ili sidro, oznaku:
Ovo pravilo CSS-a pretvorilo bi standardni ukratko uklanjanje teksta ove veze. Međutim, ne bi bilo kakve druge veze na stranici. To je jedno od ograničenja inline stilova. Budući da se mijenjaju samo na određenoj stavci, trebate složiti svoj HTML tim stilovima kako biste postigli stvarni dizajn stranice. To nije najbolja praksa. Zapravo, to je jedan korak uklonjen iz dana "font" oznake i mješavine strukture i stila na web stranicama.
Inline stilovi također imaju vrlo visoku specifičnost.
To ih čini vrlo teško prebrisati s drugim, ne-inline stilova. Na primjer, ako želite da web mjesto bude responzivno i da promijenite način na koji neki element gleda određene prekidne točke pomoću medijskih upita , inline stilovi na elementu učinit će to vrlo teško.
U konačnici, inline stilovi su zapravo samo prikladni kada se koriste vrlo rijetko.
Zapravo, rijetko ikada koristim inline stilove na mojim web stranicama.
Ugrađeni stilovi
Ugrađeni stilovi su stilovi koji su ugrađeni u glavu dokumenta. Ugrađeni stilovi utječu samo na oznake na stranici na kojoj su ugrađeni. Još jednom ovaj pristup negira jednu od prednosti CSS-a. Budući da svaka stranica ima stilove u
, ako želite izmijeniti sitewide, kao što je promjena boje veza od crvene do zelene, trebali biste izvršiti tu promjenu na svakoj stranici, budući da svaka stranica koristi ugrađeni stilski list. Ovo je bolje od onih inline stilova, ali je ipak problematično u mnogim slučajevima.
Stilske liste koje se dodaju u
dokumenta također dodaju značajnu količinu označnog koda na tu stranicu, što također može učiniti stranicu teže upravljati u budućnosti.
Prednost ugrađenih stilskih ploča je da se opterećenje odmah vrši s samom stranicom, umjesto da se učita da se druge vanjske datoteke učitaju. To može imati koristi od brzine preuzimanja i perspektive izvedbe .
Vanjske listove stilova
Većina web stranica danas koristi vanjske stilove listova. Vanjski stilovi su stilovi koji su napisani u zasebnom dokumentu i zatim priključeni na različite web dokumente. Vanjski stilski listovi mogu utjecati na svaki dokument na koji su povezani, što znači da ako imate web stranicu od 20 stranica na kojima svaka stranica upotrebljava isti stilski obrazac (to je obično način na koji se to radi), svaku možete napraviti vizualnu promjenu onih stranica jednostavnim uređivanjem tog stilskog lista.
To olakšava dugoročno upravljanje stranicama.
Slabo na vanjski stilski list je da zahtijevaju stranice za dohvaćanje i učitavanje tih vanjskih datoteka. Nijedna stranica neće koristiti svaki stil na CSS listi, tako da će mnoge stranice učitati mnogo veću stranicu CSS od one koja je zapravo potrebna.
Iako je istina da postoji hit performansi za vanjske CSS datoteke, to svakako može biti minimiziran. Realno, CSS datoteke su samo tekstualne datoteke, tako da obično nisu veoma velike za početak. Ako cijela web-lokacija upotrebljava 1 CSS datoteku, dobit ćete i prednost tog dokumenta koji se spremaju nakon što se prvo učita.
To znači da bi na prvoj stranici moglo doći do slabog učinka, no stranice koje slijede će koristiti predmemorenu CSS datoteku, pa će svaki hit biti negiran. Vanjske CSS datoteke stvaraju sve moje web stranice.