Az elülső weboldal fejlesztését gyakran háromlábú székletként ábrázolják, amely a következőkből áll:
- HTML a helyszín felépítéséhez
- CSS a vizuális stílusokhoz
- Javascript a viselkedéshez
A széklet második része, a Cascading Style Sheets három különböző stílust támogat, amelyeket hozzáadhat egy dokumentumhoz.
- Beillesztett stílusok
- Beágyazott stílusok
- Külső stílusok
Ezen CSS-stílusok mindegyike egyedi előnyökkel és hátrányokkal jár.
Beillesztett stílusok
A beillesztett stílusok olyan stílusok, amelyeket közvetlenül a HTML-dokumentum címkéjébe írnak. A beágyazott stílusok csak az adott címkét érintik, amelyre alkalmazzák őket:
Ez a CSS-szabály deaktiválja ennek az egy hivatkozásnak a szokásos aláhúzási szövegdíszítését. Ez azonban nem változtatna meg más linket az oldalon. Ez az inline stílusok egyik korlátja. Mivel ezek csak egy adott elemen változnak, az egységes oldalterv elérése érdekében ezeket a stílusokat kell szemetelnie a HTML-jével. Ez nem a legjobb gyakorlat: Valójában ez egy lépés a mai naptól
betűtípus címkék, valamint a weboldal és a szerkezet és a stílus keveréke.Az inline stílusok szintén nagyon magas specifitást igényelnek. Ez megnehezíti őket, hogy felülírják más, nem inline stílusokkal. Például, ha egy webhelyet adaptívvá akar tenni, és a használatával megváltoztatja, hogy egy elem hogyan néz ki bizonyos töréspontokra média lekérdezések, az elemen belüli stílusok megnehezítik ezt.
A beillesztett stílusok csak akkor alkalmazhatók, ha takarékosan használja őket, a "kivétel a szabálytól" megközelítésben, amely egy vagy két elemet elkülönít társaiktól az oldalon.
Beágyazott stílusok
A beágyazott stílusok a dokumentum fejében találhatók. Be vannak zárva címkékkel, és nagyon hasonlítanak a dokumentum CSS fájljainak külső részéhez.
A beágyazott stílusok csak azokat a címkéket érintik, amelyekbe be vannak ágyazva. Ez a megközelítés ismételten cáfolja a CSS egyik erősségét. Mivel minden oldalon a fejlécben meghatározott stílusok találhatók, ha egész webhelyen változtatni szeretne - például megváltoztatni a színét a linkek vörösről zöldre - ezt a változtatást minden oldalon el kell végeznie, mivel minden oldal beágyazott stílust használ lap. Ez a megközelítés jobb, mint az inline stílusok, de sok esetben még mindig problematikus.
A dokumentum fejlécéhez hozzáadott stíluslapok szintén jelentős mennyiségű jelölőkódot adnak az adott oldalhoz, ami szintén nehezítheti az oldal kezelését a jövőben.
A beágyazott stíluslapok előnye, hogy azonnal betöltődnek magával az oldallal, ahelyett, hogy más külső fájlokat kellene betölteni. Ez a technika előny lehet a letöltési sebesség és teljesítmény szempontjából.
Külső stíluslapok
A legtöbb weboldal ma külső stíluslapokat használ. A külső stílusok olyan stílusok, amelyeket külön dokumentumba írnak, majd csatolnak a különböző webes dokumentumokhoz. Az a használatával behívják őket a fő dokumentumba címke a dokumentum fejében. A külső stíluslapok vagy ugyanazon a szerveren tartózkodhatnak, mint a HTML, vagy teljesen behúzhatók egy másik szerverről. Ez gyakran előfordul olyan eszközök esetében, mint például a betűtípusok, amelyeket sok webhely kölcsönöz a Google-tól.
Külső stíluslapok befolyásolja a csatolt dokumentumokat, ami azt jelenti, hogy ha van 20 oldalas webhelye, ahol minden oldal ugyanazt a stíluslapot használja (ez általában így történik), vizuálisan módosíthatja az egyes oldalakat az adott stílus egyszerű szerkesztésével lap. Ez a gazdaság sokkal könnyebbé teszi a telephelyek hosszú távú kezelését.
A legtöbb professzionális web-tervező elsődleges CSS-fájlt használ a webhely elrendezésének és tervezésének szabályozásához.
A külső stíluslapok hátránya, hogy oldalakra van szükségük a külső fájlok beolvasásához és betöltéséhez. Nem minden oldal fogja használni a CSS-lap minden stílusát, ezért sok oldal sokkal nagyobb CSS-oldalt tölt be, mint amire valójában szükség van.
Bár igaz, hogy a külső CSS fájlok esetében van teljesítményütemezés, mindenképpen minimalizálható. Valójában a CSS-fájlok csak szöveges fájlok, így kezdetben nem nagyok. Ha a teljes webhely egyetlen CSS fájlt használ, akkor azt is élvezheti, hogy a dokumentum az első betöltés után gyorsítótárba kerül, ami azt jelenti, hogy előfordulhat, hogy néhány látogatás esetén az első oldalon enyhe teljesítményütem van, de a következő oldalak a gyorsítótárazott CSS fájlt használják, így minden találat tagadták.