Cascading style sheets - Egymásba hulló stíluslapok

Ez a magyar fordítása amiből garantáltan semmit nem lehet megérteni. (Fordítják még egymásba ágyazott stíluslapoknak is)

A CSS fájl írja le egy böngészőben megjelenő oldal formázását. Betűméreteket, margókat, színeket, elrendezéseket, jobbra-balra igazítást, betűtípusokat és nagyjából mindent, amiből felépül az oldal design-ja.

Képzeljük el, hogy készítünk egy szöveges dokumentumot mondjuk klasszikus MS Word formátumban. Írunk címet szöveget, fejléceket, táblázatokat. Utána formázzuk, színezzük, elrendezzük, jobbra-balra igazítjuk majd az egészet elmentjük.

Ekkor az elmentett egy darab fájlban két alapvető információ típus van:

  • A tartalom, a begépelt szöveg
  • A formátum. Az, hogy mekkora a betűméret, milyen típus, hogy vannak rendezve a bekezdések, stb..

Előnye az, hogy egyszerű, könnyű tárolni, átküldeni, megosztani.

Hátránya, hogy nehézkesen módosítható. Ha azt szeretnénk, hogy minden bekezdés egy kicsit nagyobb behúzással legyen balról vagy minden főcím betűmérete egyel nagyobb legyen a színe pedig kék akkor végig kell menni a dokumentumon és egyesével átjavítani.

A dokumentum építőelemei csak egyesével módosíthatóak. Nincs olyan parancs, hogy minden kép balra igazodjon, vagy minden címsor csupa nagybetű legyen.

Az Internetes dokumentumok szerencsére másképp működnek.

Leegyszerűsítve a dolgot, itt minden (jól felépített) dokumentum (honlap egy-egy oldala) két fájlból áll:

  • Egy Html fájl. Ebben van a szöveges tartalom
  • Egy Css fájl. Ebben van leírva, hogy a szöveges tartalom pontosan hogyan jelenjen meg. Milyen méretű betűk, milyen szín, mekkora dobozban legyen elhelyezve, az oldal melyik részén, stb...

A megoldás óriási előnye, hogy a szöveg formázási információt csak egyszer kell tárolni, nem pedig bekezdésenként, vagy annál is kisebb egységekben.

Központilag, egy helyről módosítható így például ha egy honlap esete fekete háttérrel kell, hogy megjelenjen, nappal világossal akkor elég csak két css fájlt készíteni de a begépelt szöveg változatlan maradhat.

Bővebb információ magyar nyelven: http://weblabor.hu/cikkek/cssalapjai1

Angol nyelven: http://www.w3schools.com/css/default.asp