Lépcsőzetes stíluslapok sok előnye van. Lehetővé teszik, hogy ugyanazt a stíluslapot használja az egész webhelyen. Ennek kétféle módja van:
- összekapcsolás a LINK elemmel
- importálás az @import paranccsal
A külső stíluslapok előnyei és hátrányai
Az egyik legjobb dolog lépcsőzetes stíluslapok az, hogy felhasználhatja őket webhelye konzisztenciájának megőrzéséhez. Ennek legegyszerűbb módja egy külső stíluslap összekapcsolása vagy importálása. Ha ugyanazt a külső stíluslapot használja webhelye minden oldalához, biztos lehet benne, hogy az összes oldal ugyanaz lesz stílusok.
A külső stíluslapok használatának néhány előnye az, hogy egyszerre több dokumentum megjelenését és hangulatát vezérelheti. Ez különösen akkor hasznos, ha egy csapat emberrel dolgozik a weboldal létrehozásában. Sok stílusszabály nehéz lehet megjegyezni, és bár van nyomtatott stílusútmutatója, unalmas hogy folyamatosan lapozgassa annak eldöntésére, hogy a példaszöveget 12 pontos Arial betűtípussal vagy 14 ponttal kell írni Futár.
Létrehozhat olyan stílusosztályokat, amelyek sokféle HTML elemen használhatók. Ha gyakran használ egy speciális Wingdings betűtípust, hogy külön hangsúlyt fektessen az oldalán található különféle dolgokra, használhatja a Wingdings osztály, amelyet a stíluslapon állított be, hogy létrehozza őket, ahelyett, hogy meghatározna egy adott stílust a hangsúly.
Könnyedén csoportosíthatja stílusait a hatékonyság érdekében. A CSS által elérhető összes csoportosítási módszer használható a külső stíluslapokban, és ez nagyobb ellenőrzést és rugalmasságot biztosít az oldalain.
Ennek ellenére nagyon jó okok vannak arra, hogy ne használjunk külső stíluslapokat. Egyrészt megnövelhetik a letöltési időt, ha sokukhoz linkel.
Minden alkalommal, amikor új CSS fájlt hoz létre, és összekapcsolja vagy importálja a dokumentumba, ehhez a webböngészőnek újabb hívást kell kezdeményeznie a webszerverre a fájl megszerzéséhez. A szerverhívások pedig lelassítják az oldal betöltési idejét.
Ha csak kevés stílusa van, azok megnövelhetik oldalának bonyolultságát. Mivel a stílusok nem láthatók közvetlenül a HTML-ben, bárkinek, aki az oldalt nézi, be kell szereznie egy másik dokumentumot (a CSS-fájlt), hogy kiderüljön, mi történik.
Külső stíluslap létrehozása
A külső stíluslapokat ugyanúgy írják, mint a beágyazott és a belső stíluslapokat. De csak a stílusra van szükséged választó és a nyilatkozat. Nincs szüksége STYLE elemre vagy attribútumra a dokumentumban.
Mint minden másnál CSS, a szabály szintaxisa a következő:
választó {tulajdonság: érték; }
Ezeket a szabályokat egy kiterjesztésű szöveges fájlba írják.
.css. Például megnevezheti a stíluslapját.
stílusok.css.
CSS-dokumentumok összekapcsolása
A stíluslap összekapcsolásához használja a LINK elemet. Ennek vannak a rel és a href attribútumai. A rel attribútum megmondja a böngészőnek, hogy mit kapcsol össze (ebben az esetben egy stíluslap), a href attribútum pedig megtartja a CSS fájl elérési útját.
Van egy választható attribútumtípus is, amellyel meghatározhatja a csatolt dokumentum MIME típusát. Erre nincs szükség a HTML5-ben, de HTML 4-es dokumentumokban kell használni.
Itt található az a kód, amelyet egy CSS stíluslap összekapcsolására használna, a styles.css néven:
HTML 4 dokumentumba pedig a következőket írja:
type = "text / css">
CSS stíluslapok importálása
Az importált stíluslapok a STYLE elembe kerülnek. Ezután beágyazott stílusokat is használhat, ha úgy tetszik. Az importált stílusokat az összekapcsolt stíluslapokba is felveheti. Írja be a STYLE vagy CSS dokumentumba:
@import url (' http://www.yoursite.com/styles.css');