CSS
alapok




CSS
CSS

Miért CSS?


A szabványok betartása, a HTML és CSS használata a tartalom és dizájn elkülőnítésére olyan weboldalakat eredményez, amik mindenki számára elérhetők és jól is néznek ki. A dizájn CSS alapúvá tételével a HTML felszabadulhat a fölösleges elemek alól. Tisztísuk meg és használjuk csak a legszükségesebb dolgokat, hogy a kód kisméretű legyen és a HTML valóban csak azt az információt hordozza melyik elemnek mi a szerepe és nem, hogy hogyan néz ki. Egy alapvető példán keresztül nézzük meg, miért lesz egyszerűbb az életünk a CSS használatával. Vegyünk egy általános oldalt, ahol több címsor és bekezdés található. Szeretnénk, ha a címsoraink betűi nagyok és sötétvörösek lennének, míg a bekezdéseink betűi kisebbek és sötétzöldek. Ezt HTML formázással a következőképpen tudjuk megvalósítani:

  1. <html>
  2. <head>
  3. <title>CSS példa</title>
  4. </head>
  5. <body>
  6. <h1><font size="4" color="#a00000">Bevezetés</font></h1>
  7. <p><font size="2" color="#00a000">A vers...</font></p>
  8. <h1><font size="4" color="#a00000">Tárgyalás</font></h1>
  9. <p><font size="2" color="#00a000">A költő...</font></p>
  10. <h1><font size="4" color="#a00000">Összefoglalás</font></h1>
  11. <p><font size="2" color="#00a000">Végezetül...</font></p>
  12. </body>
  13. </html>

Mint láthatjuk, minden egyes címsor (h1) és bekezdés (p) esetén meg kellett határoznunk a megjelenést (font), ráadásul ezáltal sokkal kevésbé lett áttekinthető a HTML forrásunk. További probléma, hogy a betűk méretének meghatározására nincs más lehetőségünk (a szabvány szerint), csak az előre definiált (1-től 7-ig meghatározott) méretek közül kiválasztani a nekünk megfelelőt. Amennyiben egy bonyolultabb oldalról van szó, még áttekinthetetlenebbé válhat a forrás, bonyolultabbá téve az utólagos szerkesztést. Nem lehetne ezt a formázást egyszerűbben elérni? Nézzük, hogyan alakul ugyanez stíluslapok használatával:

  1. <html>
  2. <head>
  3. <title>CSS példa</title>
  4. <style type="text/css"><!--
  5. h1 { font-size: 20px; color: #a00000; }
  6. p { font-size: 12px; color: #00a000; }
  7. --></style>
  8. </head>
  9. <body>
  10. <h1>Bevezetés</font></h1>
  11. <p>A vers...</font></p>
  12. <h1>Tárgyalás</font></h1>
  13. <p>A költő...</font></p>
  14. <h1>Összefoglalás</font></h1>
  15. <p>Végezetül...</font></p>
  16. </body>
  17. </html>

A trükk a fejlécben látható style elemeken belül van. Meghatározzuk, hogy a HTML állományban levő összes címsor (h1) elem és bekezdés (p) elem a fentiekben meghatározott kívánságainknak megfelelően jelenjen meg. Csak egyszer kellett ezt megtenni, továbbá a kódunk is sokkal átláthatóbb lett. A pontos méretet is meghatározhattuk, ezúttal pixelben megadva azt, de további mértékegységek is rendelkezésünkre állnak. Amennyiben valamiért utólag módosítanunk kell a megjelenést, egyből csak egy helyen kell ezt megtennünk, s mindenhol meg is változik. Az egyszerűbb szerkeszthetőségen és karbantarthatóságon kívül az így elkészített dokumentum sokkal kisebb méretű is lesz, gyorsabban letöltődik, kisebb adatforgalmat generál. Ha egy külső állományban helyezzük el a stílusdefiníciókat, akkor több dokumentum megjelenését is befolyásolni tudjuk egyszerre, továbbá ha a böngésző gyorsítótárazza a meghatározásokat, az adatforgalom tovább csökken. További előny, hogy az újabb böngészők egyre inkább támogatják a szabványokat, s ha mi is tartjuk hozzá magunkat, akkor egyre kisebb munkával egyre több látogató fogja pontosan ugyanúgy látni a honlapunkat (az eddigi "minden böngészőn megnézem, hogy jó-e" stílusú munkával szemben). Persze mint a korábbiakban is ki lett hangsúlyozva, csodát egyelőre a CSS-től se várjunk, de mindenképpen számíthatunk rá, hogy ez fogja meghatározni a jövő honlapjainak megjelenését.





W3C CSS