Inline, beágyazott és külső stíluslapok: Íme, mit kell tudni
A front-end weboldal fejlesztése gyakran háromlábú székeként jelenik meg. Ezek a lábak a következők:
Ennek a székletnek a második szakasza, a CSS vagy a Cascading Style Sheets, ma itt nézünk. Pontosabban szeretnénk foglalkozni a háromféle stílusgal, amelyeket hozzáadhat egy dokumentumhoz.
- Inline stílusok
- Beágyazott stílusok
- Külső stílusok
Az ilyen típusú CSS-stílusok mindegyikének előnyei és hátrányai vannak, ezért alaposabban megvizsgáljuk mindegyiküket egyenként.
Inline stílusok
Az inline stílusok olyan stílusok, amelyeket közvetlenül a HTML dokumentum címkéjében írnak. Az inline stílusok csak az adott címkére vonatkoznak. Íme egy példa egy szabványos linkre vagy horgonyra, címkére alkalmazott inline stílusra:
Ez a CSS-szabály az alapértelmezett aláhúzott szövegbevitelt kikapcsolja. Az oldal azonban nem változtatna meg más linken. Ez az inline stílusok egyik korlátozása. Mivel csak egy adott elemre változnak, a HTML-kóddal ezekkel a stílusokkal kell szétoszthatja a tényleges oldaltervezést. Ez nem jó gyakorlat. Tény, hogy egy lépést távolítottak el a "betűtípus" címkék napjától és a weboldalakon található struktúra és stílus keverékétől.
Az inline stílusok is nagyon magas sajátossággal rendelkeznek.
Ez nagyon nehéz ezeket felülírni más, nem inline stílusokkal. Például, ha a webhelyet érzékenyre szeretné állítani, és módosítani szeretné, hogy egy elem hogyan nézzen át bizonyos megszakítási pontokat média lekérdezések használatával kapcsolatban, egy elemen belüli stílusok ezt nagyon megnehezítik.
Végső soron az inline stílusok csak nagyon kevéssé használatosak.
Valójában ritkán használok inline stílusokat weboldalain.
Beágyazott stílusok
A beágyazott stílusok olyan stílusok, amelyek be vannak ágyazva a dokumentum fejrészébe. A beágyazott stílusok csak a beágyazott oldal címkéit érintik. Ez a megközelítés ismételten elutasítja a CSS egyik erősségét. Mivel minden oldalnak stílusai lennének
, ha szeretne egy sitewide változást készíteni, mint például a pirosról a zöldre mutató linkek színének megváltoztatására, minden oldalon módosítania kell ezt a módosítást, mivel minden oldal beágyazott stíluslapot használ. Ez jobb, mint az inline stílusok, de sok esetben problematikus.
Stíluslapok, amelyek hozzáadódnak a
egy dokumentumnak is jelentős számú jelölő kódot ad hozzá az oldalhoz, ami szintén megnehezíti az oldal kezelését a jövőben.
A beágyazott stíluslapok előnye, hogy a terhelést azonnal az oldalával kell végrehajtani, ahelyett, hogy más külső fájlokat kellene betölteni. Ez előnyös lehet a letöltési sebesség és a 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 dokumentumban írnak, majd csatolják a különbözõ webes dokumentumokhoz. A külső stíluslapok befolyásolhatják a hozzájuk csatolt dokumentumokat, ami azt jelenti, hogy ha van egy 20 oldalas weboldala, ahol minden oldal ugyanazt a stíluslapot használja (általában ez a művelet), vizuális változást hozhat mindenkinek az ilyen oldalak egyszerű szerkesztésével.
Ez megkönnyíti a hosszú távú webhelykezelést.
A külső stíluslapok hátránya az, hogy oldalakra van szükség a külső fájlok letöltéséhez és betöltéséhez. Nem minden oldal használ minden stílusot a CSS lapon, így sok oldal egy sokkal nagyobb CSS-oldalt fog betölteni, mint amire valóban szüksége van.
Bár igaz, hogy a külső CSS-fájlok teljesítmény-hitje van, minden bizonnyal minimalizálható. Reálisan a CSS-fájlok csak szöveges fájlok, ezért általában nem túl nagyok. Ha az egész webhely 1 CSS-fájlt használ, akkor azt is megkapja, hogy az eredetileg betöltött dokumentumot a dokumentum tárolja.
Ez azt jelenti, hogy az első oldalon néhány látogatásnál kis teljesítményű találatot lehet elérni, de a későbbi oldalak a gyorsítótárazott CSS-fájlt használják, így bármely találatot elutasítják. A külső CSS-fájlok hogyan készítek minden weboldalamat.