A CSS Site Wide használata
A weboldalak a stílus és a struktúra kombinációi, és a mai webes oldalon a legjobb gyakorlat, ha a webhely két aspektusa egymástól elválik.
A HTML mindig is az, ami biztosítja a webhely struktúráját. A web első napjaiban a HTML tartalmazott stílusinformációkat is. Az olyan elemek, mint a címke, a HTML-kódban eltakarták, hozzáadva a megjelenés és az érzelmi információkat a strukturális információk mellett. Az internetes szabványok mozgása arra késztetett minket, hogy megváltoztassuk ezt a gyakorlatot, és inkább helyezzük el az összes stílusinformációt a CSS vagy a Cascading Style Sheets-be. Ezzel egy lépéssel tovább, a jelenlegi ajánlások az, hogy a "külső stíluslap" néven ismerkednek meg webhelye stílusának igényeivel.
A külső stíluslap előnyei és hátrányai
A Cascading stíluslapok egyik legjobb dologja, hogy használhatja őket, hogy megőrizzék az egész webhelyet. A legegyszerűbb módja egy külső stíluslap összekapcsolása vagy importálása. Ha ugyanazt a külső stíluslapot használja a webhely minden oldalára, biztos lehet benne, hogy az összes oldal azonos stílusban fog működni. A jövőben is könnyebbé teheti a változtatásokat. Mivel minden oldal ugyanazt a külső stíluslapot használja, a lap minden változása hatással lesz minden webhelyoldalra. Ez sokkal jobb, mintha minden oldalt külön-külön kellene változtatni!
A külső stíluslapok előnyei
- Több dokumentum megjelenését egyszerre szabályozhatja.
- Ez különösen akkor hasznos, ha olyan embercsapattal dolgozik, aki létrehozza webhelyét. Sok stílus szabály nehéz emlékezni, és bár lehet nyomtatott stílusú útmutató, akkor nem hatékony és fárasztó, hogy folyamatosan flipping keresztül, hogy meghatározza, hogy a példa szövegét kell írni 12 pont Arial betűtípus, vagy 14 pontos futár. Mivel mindent egy helyen, és mivel ez a hely is ott van, ahol változtatni tudna, akkor sokkal könnyebbé teheti a karbantartást.
- Létrehozhat olyan stílusosztályokat, amelyeket sok különböző HTML elemen felhasználhat .
- Ha gyakran használ egy bizonyos betűtípus-stílusot, hogy hangsúlyozza a különböző dolgokat az oldalán, használhatja a stíluslapon beállított osztálytulajdonságot a megjelenés és érzés megszerzéséhez, ahelyett, hogy meghatározna egy adott stílust az egyes példányok számára. hangsúly.
- A stílusok egyszerűbb csoportosítása hatékonyabb lehet.
- A CSS-hez rendelkezésre álló összes csoportmunka külső stíluslapokban használható, és ez nagyobb ellenőrzést és rugalmasságot biztosít az Ön oldalain.
A külső stíluslapok hátrányai
- A külső stíluslapok növelhetik a letöltési időt, különösen, ha rendkívül nagyok. Mivel a CSS-fájl egy különálló dokumentum, amelyet be kell tölteni, hatással lesz a teljesítményre a letöltés végrehajtásához.
- A külső stíluslapok nagyon gyorsan megyek, mivel nehéz eldönteni, hogy egy stílus már nincs használatban, mert az oldal eltávolításakor nem törlődik. A CSS-fájlok megfelelő kezelése fontos, különösen akkor, ha több ember dolgozik ugyanazon a fájlon.
- Ha csak egy oldalas weboldala van, akkor külső fájlok létrehozása a CSS-hez nem feltétlenül szükséges, mivel csak egy oldalt szeretne stílusossá tenni. A külső CSS előnyei közül sok elveszik, ha csak egy oldalsó webhely van.
Külső stíluslap létrehozása
A külső stíluslapok a dokumentum szintű stíluslapokhoz hasonló szintaxissal jönnek létre. Azonban mindössze annyit kell tennie, hogy a választó és a nyilatkozat. A dokumentumszintű stíluslaphoz hasonlóan a szabály szintaxisa:
választó {tulajdonság: érték;}Ezeket a szabályokat a .css kiterjesztésű szövegfájlba mentse. Ez nem feltétlenül szükséges, de ez egy jó szokás, hogy bejusson, így azonnal felismerheti a stíluslapokat a telefonkönyvben.
Miután elkészült egy stíluslap-dokumentum, csatolnia kell a weboldalakhoz . Ezt kétféle módon lehet elvégezni:
- összekapcsolása
- A stíluslap összekapcsolásához a HTML-címkét használja. Ennek az attribútuma rel , type , and href . A rel attribútum megmondja, hogy mi kapcsolódik (ebben az esetben egy stíluslap), a típus határozza meg a böngésző MIME-típusát, és a href az .css fájl elérési útja.
- importálása
- Az importált stíluslapot egy dokumentumszintű stíluslapon belül importálhatja, így külső stíluslap attribútumait importálhatja, anélkül, hogy elvesztené a dokumentum-specifikusakat. Úgy hívja, hogy hasonló módon hívja a kapcsolt stíluslapot, csak a dokumentumszintű stílus nyilatkozaton belül kell hívni. Bármely olyan külső stíluslapot importálhat, amennyit a weboldal fenntartásához szükséges.
Jennifer Krynin eredeti cikke. Szerkesztette Jeremy Girard 8/8/17