Értékelések átlaga:

4.27778

Átlag: 4.3 (18 szavazatból)

A Te értékelésed: Válassz!Cancel ratingGyengeMég elmegyJóNagyon jóKiváló

 

A CSS kód elsajátítása komoly lépés egy profi honlap elkészítése felé. A CSS előnye, hogy külön kezeli a külcsínt meghatározó formázásokat a szöveges tartalmat rögzítő HTML-kódtól, így a HTML-dokumentumot nem kell annyira teletűzdelni rengeteg, gyakran ismétlődő formázási elemmel. Korábban, a CSS bevezetése előtt a dokumentumok megjelenését meghatározó elemek a HTML kódon belül voltak - a betűtípusok, színek, háttér stílusok, elrendezések, dobozok, keretek és méretek külön meg voltak adva. A CSS használatával a webfejlesztők ezeket az információkat áthelyezhetik a stíluslapra, így a HTML kód egyszerűbb, világosabb lesz. (Stíluslap, angolul CSS = Cascaded Style Sheet.) A HTML dokumentumok kisebbé válnak, a lapok letöltési sebessége is javulhat.
Példa: A következő HTML elem megadja, hogy a benne foglalt szövegre az a formázás érvényes, amelyet a CSS-ben 4-es címsortípus néven rögzítettünk:

Mivel a CSS-ben megadtuk, hogy ehhez a szövegtípushoz milyen betűméret, szín, stb. tartozik, a HTML-ben nem kell újból és újból begépelni a minden egyes beállítást. Ezzel a dokumentum rövidebbé, átláthatóbbá válik.

Hogyan néz ki ez a formázás a CSS oldaláról?
Például így: h4 {text-align: left; color: blue; font-family: "Arial"; font-style: italic;}
Ezek után, ha a HTML-dokumentumban bárhová beilleszted a hivatkozást a h4-es címsorra, a jelek közé illesztett szöveget balra rendezve (left), kék színnel (blue), Arial betütípussal és dőlt betűvel (italic) fogja megjelenni.
A jobb átláthatóság és szerkeszthetőség céljából a CSS-dokumentumban ezt elemeire bontva helyezik el:

h4 {
text-align: left;
color: blue;
font-family: "Arial";
font-style: italic;
}

A CSS abból a szempontból is kedvező, hogy nagyon egyszerűen lehet módosítani a stílusbeállításokat. Ha eldöntjük, hogy a szöveg ezentúl más színű, méretű kell legyen, nem kell a teljes oldalt végigbogarászni a kódokat keresve, elég a CSS lapon átírni egy-két kódot, ami azonnal módosítja a teljes HTML dokumentumban az adott szövegtípus megjelenését.
A CSS stílusinformációkat beépíthetjük a HTML dokumentum fejlécébe, de csatolhatjuk külső fájlként is.
Több lapból álló honlapstruktúra esetén célszerűbb külön CSS fájlba elhelyezni a formázásokat, mert így mindegyik HTML lapról erre a CSS-re tudunk hivatkozni, így a honlapunk különböző oldalai teljesen egységes formázással fognak megjelenni. Ha pedig úgy döntünk, hogy változtatunk a honlapunk megjelenésén, elég a CSS fájlt módosítani, ez egyszerre hatással lesz az összes oldalra. További előny, hogy mivel a webböngészők gyakran eltárolják az egyszer már letöltött CSS stíluslapokat a gyorsítótárban, a honlap oldalainak meglátogatása során a böngésző elég egyszer letöltse a CSS fájlt, így a letöltési sebesség gyorsul.
Ha nem tervezed, hogy fáradtságos munkával profi CSS-íróvá képezd magad, a webről könnyedén letölthetsz kész CSS-sablonokat.
Ha viszont komolyabban érdeklődsz a CSS-írás részletei iránt, azt a Weblaborban elolvashatod.
Kapcsolódó fejelzet: HTML-szerkesztő programok és CSS-sablonok