zoltanhosszu.com | blog » css3 http://blog.zoltanhosszu.com Zoltan Hosszu's blog about xHTML, CSS, JavaScript, PHP Wed, 07 Apr 2010 20:07:53 +0000 en hourly 1 http://wordpress.org/?v=3.0 CSS, egy szebb és jobb jövőért http://blog.zoltanhosszu.com/2009/05/css-egy-szebb-es-jobb-jovoert/ http://blog.zoltanhosszu.com/2009/05/css-egy-szebb-es-jobb-jovoert/#comments Wed, 06 May 2009 20:50:56 +0000 Zoltan http://blog.zoltanhosszu.com/?p=37 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.

]]> http://blog.zoltanhosszu.com/2009/05/css-egy-szebb-es-jobb-jovoert/feed/ 1