A CSS egy olyan leírónyelv, melynek segítségével különböző stíluslapokat hozhatunk létre és ágyazhatunk be HTML honlapjainkba. Ezek a stíluslapok befolyásolják az oldal megjelenését: meghatározhatjuk velük, hogy az egyes HTML elemek mekkora méretben, milyen színnel jelenjenek meg.
Mi is az a CSS ?
A CSS (Cascading Style Sheets) egy olyan leírónyelv, melynek segítségével különböző stíluslapokat hozhatunk létre és ágyazhatunk be HTML honlapjainkba. Ezek a stíluslapok befolyásolják az oldal megjelenését (design-ügyileg kiváló nyelv), meghatározhatjuk vele, hogy az egyes HTML tagek (bekezdések, táblázatok, címsorok stb.) hogyan jelenjenek meg, meghatározhatjuk a méretüket, színüket, stílusukat, típusukat stb.
A CSS története
A CSS megjelenésének oka az volt, hogy a weboldalakon megnőtt az igény az egyre bonyolultabb, kiforrottabb elemekre és formázásokra, amiket már az eredetileg egyszerű szöveges információk ábrázolására kitalált HTML-lel már nem nagyon lehetett megoldani. (Sok mindent meg lehetett, csak nagyon sok munka volt mindenhol beállítani a különböző formázásokat, így a nyelv elvesztette egyszerűségét, áttekinthetőségét). Itt jött képbe a CSS, mely sokkal rövidebbé, rugalmasabbá és szabadon kezelhetőbbé tette a HTML dokumentumokat.
Maga nyelv már elég régóta létezik, a CSS (1) 1996. december 17-én készült el. A nyelv kiadása óta több verziója is megjelent, 1998. május 12-én napvilágot látott a CSS 2 is (a CSS 2.1 és CSS 3 készülése pedig folyamatban van). A legelterjedtebb böngészők nagy része ma már támogatja a CSS nyelv elemeit, de még mindig vannak olyan böngészők is, amelyek egyes nyelvi elemeket rosszul jelenítenek meg vagy kihagynak, mert nem tudják értelmezni.
Miért éppen a CSS?
Most egy példán keresztül bemutatjuk, hogy hogyan tudjuk megkönnyíteni a munkánkat
a CSS-sel.
A feladat az, hogy készítsünk el két felsorolást és két bekezdést betűformázásokkal.
A feladatot először csak HTML-lel oldjuk meg, azután használjuk a CSS-t.
<html> <head> <title>Feladat megoldása HTML-lel</title> </head> <body> <ul> <font color="#EBEBEB"><li>Első felsorolás első sora</font></li> <font color="#EBEBEB"><li>Első felsorolás második sora</font></li> </ul> <font color="#EBEBEB"><p><font size="6">Első bekezdés</font></p> <ul> <font color="#EBEBEB"><li>Második felsorolás első sora</font></li> <font color="#EBEBEB"><li>Második felsorolás második sora</font></li> </ul> <p><font size="6">Második bekezdés</font></p> </body> </html>
Láthatjuk, ez egy általános HTML dokumentum, minden egyes bekezdés - és felsorolás
elemet külön kellett formázni, ez egy kicsit hosszadalmas dolog ennél nagyobb
dokumentumoknál. Sőt, még a tagekbe és belekavarodhatunk, nem tudjuk, hogy mit
hol zártunk le stb. És ha egy nagyobb dokumentumban mindent így formázunk, akkor
a lap olyan lassan fog betölteni, hogy a felhasználók megőrülnek. Most nézzük
meg, hogy ezt hogyan lehetett volna megoldani CSS-sel:
<html> <head> <title>Feladat megoldása CSS-sel</title> <style type ="text/css"> li { color: #EBEBEB } p { font-size: 28px } </style> </head> <body> <ul> <li>Első felsorolás első sora</li> <li>Első felsorolás második sora</li> </ul> <p>Első bekezdés</p> <ul> <li>Második felsorolás első sora</li> <li>Második felsorolás második sora</li> </ul> <p>Második bekezdés</p> </body> </html>
Mint láthatjuk, a dokumentum sokkal áttekinthetőbb, rugalmasabb, könnyebben szerkeszthető és lényegesen rövidebb lett. A HTML-ben a betűméretet csak 1-7 -ig választhatjuk ki, de a CSS-ben annyi Pixel-t (px) adunk meg, amennyit akarunk. Már egy ilyen kicsi dokumentumnál is tapasztalhatjuk a CSS előnyeit, és ez még nem minden, amit ez a nyelv tud...
Fontos megemlíteni, hogy a CSS nyelv magában nem sokat ér, ha valaki arra adja a fejét, hogy megtanulja és még nem ismeri a HTML-t legalább alapszinten, az előbb a HTML-lel kezdje, és csak azután (miután a HTML-t elsajátította) fogjon bele a CSS-be!
