Mi az a külső stíluslap?

Külső stíluslap határozza meg, hogyan néz ki egy weboldal. Stíluslap segítségével megadhatja például a szöveg méretét, színét és betűtípusát, a gombok színét, vagy a menük és oldalsávok helyzetét.

Külső stíluslapon használt kód

Az alapvető weboldal létrehozásához kétféle kódot használnak:

• HyperText jelölőnyelv (HTML): Meghatározza egy weboldal tartalmát. Tartalmazza a tényleges szöveget egy jelöléssel, amely meghatározza, hogy a szöveg szakaszai bekezdések, címsorok vagy listák. Tartalmaz továbbá linkeket az oldalon megjelenő képekhez és hiperhivatkozásokat külső oldalakhoz.
• Lépcsőzetes stíluslapok (CSS): A tartalom megjelenítésének meghatározásához használt kódolási nyelv. Meghatározza, hogy az egyes típusú szövegelemek hogyan jelenjenek meg, és ugyanolyan típusú elemeket különbözőképpen jeleníthet meg, ha különböző osztályokba tartoznak, vagy más azonosítóval rendelkeznek. Ez lehetővé teszi, hogy a menük és a listák nagyon eltérő módon viselkedjenek egy weboldal fő szövegén belül.

Általában a stílus és a tartalom elkülönítése jó ötlet, mivel ez lehetővé teszi, hogy egyszerre egyetlen dologra koncentráljon. Ez még fontosabbá válik egy csapatban, lehetővé téve a tartalom és a prezentáció szakembereinek, hogy a többitől függetlenül dolgozhassanak. Talán ennél is fontosabb, hogy ez lehetővé teszi egyetlen stílusutasítások egységes alkalmazását egy egész weboldalon.

A weboldal vizuális bemutatása ezután egyetlen stíluslapról megváltoztatható anélkül, hogy minden weboldalt külön szerkesztene. Nagyobb, összetett webhelyek esetén számos stíluslap használható a szöveg, a menük és az oldalakon belüli felosztás vezérlésére. Ez a stíluslap-gyűjtemény "témának" nevezhető.

Külső CSS használata a HTML és a CSS összekapcsolásához

Lehetséges, hogy a CSS stílust közvetlenül egy weboldal HTML-be illeszti, a CSS segítségével pedig minden bekezdést és fejlécet külön-külön stílusozhat. Ez a fajta inline stílus általában nem jó ötlet, mivel elveszíti a stílus és a tartalom elválasztásának minden előnyét. Leginkább az, hogy elveszíti a képességét, hogy egyetlen fájlból folyamatosan frissítse az egész webhelyet.

A stílus alkalmazásának helyes módja a webhelyen az, ha egyetlen külső stíluslapfájlt hoz létre minden alkalmazandó stílustípushoz, majd hivatkozik ezekre a fájlokra minden HTML-fájlból. Például a következő külső stíluslapok lehetnek:

• text.css
• menük.css
• elrendezés.css

A külső stíluslapokon belül módosíthatja a CSS-kódot anélkül, hogy megváltoztatná azokat fájlnevek, vagyis az ezekre a fájlokra való hivatkozások az összes weboldal HTML-jében nem lesznek megváltozott.

Példák HTML-re és CSS-re

Egy nagyon egyszerű HTML oldal a következő kódot tartalmazhatja:

 Minden rólam!

Ez az oldal rólam szól, és miért vagyok fantasztikus.

Ehhez az oldalhoz egy egyszerű külső stíluslap kapcsolható, ha a következő kódot hozzáadja a.

type = "text / css"
href = "myStyle.css" />

Hozzon létre egy másik, az index.html mappában található myStyle.css nevű szövegfájlt, amely a következő kódot tartalmazza:

h1 {
szín: # FF7643;
font-face: Arial '
}
p {
piros szín;
betűméret: 1,5em;
}