Hogy mi is az a CSS? A web(lapok) egyik legfontosabb összetevője. A CSS nélkül szerintem még mindig valahol a web őskorában járnánk és a Netscape Navigatoros weblapoknál még mindig nem nagyon lehetne szebbeket készíteni, esetleg csak hosszú-hosszú HTML kódsorok megírásával. A Cascading Style Sheet egy “hálóközileg” elfogadott webes nyelv, amit a böngésző fordít le, dolgoz fel és a honlapok grafikus részleteinek megformázását teszi egyszerűbbé és könnyen módosíthatóvá. Például körülbelül 5 sor szöveggel megformázható elfogadhatóra egy bekezdés (<p>), hogy egyedi betűtípusa, betűmérete, színe és sorköze legyen. Hasznos, nem?
A nyelv maga jelenleg a kettes és hármas verzió között stagnál, a legtöbb böngésző (Firefox, Safari, Chrome) támogatja a hármas verzió nagyrészét (kb 80%), de a jó öreg IE persze megint csak le van maradva: bár az IE8 kezd ledolgozni a lemaradásából, még így is sok-sok munkaórát kell beleölni a sitebuildereknek, ha CSS3 kód részeket is írnak IE8-ra.
A továbbiakban megnézzük, hogy hogyan is működik és mikre is lehet használni a CSS-t.
Az első és legfontosabb tanácsom, hogy ne kezdjünk el CSS-t írni a weblapunkhoz mielőtt nem vagyunk tisztában nagyjából a HTML nyelvvel, a CSS ugyanis erre épül, ugyanakkor a HTML teszi azt használhatóvá és használandóvá. A HTML sajnos elég szegényes készletekkel rendelkezik a webdesignerek számára, az a néhány meglévő stíluselem pedig csak körülményesen használható és minden egyes alkalommal be kell írni, amikor a szövegben vastaggal írt részeket mondjuk piros színűre akarod színezni:
<font color="red"><b>ez a szöveg piros</b></font>, ez nem piros
Na most ezt el lehet képzelni egy nagyobb táblázat megformázásánál, amikor mondjuk minden egyes fejlécnél ezeket be kell írni és a kiemelt elemeknél is hasonló eszközöket kell alkalmazni… A legnagyobb problémája igazából az, hogy egy idő után átláthatatlanná teszi a forrást.
A CSS kód egyszerűen a <style type=”text/css”>…</style> tagek közt a HTML fájlba illesztve aktivizálódik. Persze a komolyabb oldalakhoz már külön fájlokat használnak a fejlesztők (a ZoltanHosszu.com CSS fájljai: zoltanhosszu.css, zoltanhosszu_hu.css), de egyelőre mi még megelégedhetünk a <head> részbe illesztett kóddal. A fentiekkel szemben a CSS verzió így néz ki:
<style type="text/css">
b {
color: red;
}
</style>
A HTML hozzá pedig:
<b>ez a szöveg piros</b>, ez nem piros
Ezt a rövid kódot a forrásfájlba illesztve az összes <b> taggel jelölt rész piros színűre változik. Bár ezen a rövid szövegrészen első ránézésre úgy tűnhet, hogy bonyolítom itt az életetek, higyjétek el, hosszútávon nagyon megéri!
A leghasznosabb dolog a CSS-ben talán az, hogy különböző HTML tageket, mint pl <a>, <p>, <h1>, mind-mind egységes stílussal láthatunk el; ha pedig módosítani szeretnénk valamit a honlapon, akkor csak egy dolgot kell megkeresni, átírni és voila, mindenhol megváltozott a linkek színe, a fejlécek betűtípusa és a bekezdések sorköze:
<style type="text/css">
a {
color: #800;
font-weight: bold;
}
p {
line-height: 1.2em;
}
h1 {
font-family: georgia, serif;
}
</style>
A nyelv maga nagyon könnyen és gyorsan tanulható, hiszen a legtöbb stíluselem elég jól magyarázza önmagát (pl line-height: sorköz; width: szélesség; color: betűszín, border: keret) és ha egyszer megértette az ember a működését, nagyon szép dolgokra képes.
Sajnos megvannak a maga hátulütői is a nyelvnek, használatával igazán meg lehet tapasztalni a böngészők közti különbségeket: még a Firefox 2 és a Firefox 3 között is kellemes kis eltérések vannak (annak ellenére, hogy elvileg mindkettő megfelel a web standars-nek), az Internet Explorert pedig hadd ne említsem.
Mindezek ellenére számomra a webfejlesztés egyik legkedvesebb eleme.
Remélem érhető volt a cikk, ha pedig bármilyen kérdésetek van, ne féljetek azt a hozzászólásoknál feltenni; de persze jöhetnek javaslatok is! A következő CSS-sel kapcsolatos cikkben megnézünk néhány felhasználást (pl hogy mik is azok a CSS osztályok és hogyan is kell őket használni), amivel nagyon leegyszerűsödik a HTML oldalak formázása.
Tagek: chrome, CSS, css3, firefox, internet explorer, kezdő, safari
Gyerünk, következő cikket :ááá
)))