CSS definíciója: Mi az a CSS, hogyan működik a CSS? Fontos információk a CSS működésével kapcsolatban

Vedd fel velünk a kapcsolatot, kattints!

CSS


A CSS definíciója

A CSS (Cascading Style Sheets – „lépcsőzetes stíluslapok”) egy, a W3C által létrehozott szabvány, amely a weboldalak megjelenésének testreszabását teszi lehetővé. A CSS első verziója 1996-ban jött létre, mert a HTML nem volt alkalmas a webhelystílusok részletes beállítására.
A weboldalak különböző betűtípusokat, színes háttereket és egyéb stílusokat használtak, és ezek módosítása nagyon hosszadalmas és gyakran drága feladatnak bizonyult, főleg a nagyobb webhelyeken. A W3C ezt a problémát szerette volna áthidalni a CSS-sel.

 

A HTML és a CSS manapság szinte elválaszthatatlanok egymástól. A HTML-t csupán jelölőnyelvként szokás használni, vagyis csak a webhely tartalmának elhelyezésére szolgál. A CSS felel az oldalak esztétikai jellemzőiért, beleértve a betűtípusokat, a betűméreteket, a bekezdések megjelenését, a színeket, az animációkat és így tovább.
Habár egy webhely elméletileg tökéletesen működhet CSS nélkül is, mindenféle stílus hiányában rendkívül kezdetlegesnek és olcsónak tűnne.

 

A CSS előnyei

Nagyon könnyedén fel lehet ismerni azokat a webhelyeket, amelyek nem használnak CSS-t. Ha veled is előfordult már, hogy egy oldal fehér háttérrel, rendezetlen képekkel és bekezdésekkel, illetve fekete és kék szöveges elemekkel jelent meg, akkor valószínűleg nem töltött be megfelelően a CSS dokumentum, ami ezen hiányzó stílusokat tartalmazta.
Manapság sok oldal elrendezése is CSS-sel kerül kialakításra, ezért CSS nélkül sok oldal teljesen átláthatatlanná és használhatatlanná válik.

 

A CSS megjelenése előtt minden stílusjellemzőt HTML-lel kellett megoldani, tehát külön meg kellett adni a hátteret, a szövegek színeit, az elemek elrendezését, és minden mást is – már ha a HTML lehetővé tette az elképzeléseket.

A CSS egyik legnagyobb előnye, hogy ezek a stílusok egy teljesen különálló fájlban is elhelyezhetők, amire aztán elég csak hivatkozni a HTML dokumentum tetején. A stílusok így nem foglalják a helyet a HTML-ben, így mindkét fájl átláthatóbb és könnyebben szerkeszthető.

Ezzel a módszerrel több oldalhoz is hozzá lehet csatolni ugyan azt a CSS fájlt, aminek köszönhetően egyetlen fájlal lehet módosítani akár több száz, vagy több ezer oldal stílusát is.
A modern CSS szinte korlátlan lehetőséget biztosít a különböző stílusok kialakítására, így igazán egyedi, látványos, de funkcionális weboldalak alakíthatók ki vele.

 

A CSS működése

A CSS egyszerű angol nyelvű szintaxist használ, és különféle szabályok vonatkoznak rá.
A CSS működéséhez először is ismerned kell a HTML dokumentum elemeit. Ezek például a bekezdések (

) vagy általános blokkok (

) és így tovább. Az elemkehez továbbá osztályok (class) és azonosítók (ID) is megadhatók, hogy könnyebben meg tudd különböztetni őket, és különálló csoportokat alakíthass ki belőlük.

 

Kiválasztók

A CSS használatához először is meg kell adnod, hogy mely elemtípusokra, osztályokra vagy azonosítókra szeretnéd alkalmazni a kívánt stílust – ez nevezzük kiválasztásnak. Például megszabhatod, hogy az összes bekezdés (

) elemet szeretnéd-e megváltoztatni, vagy csak azokat, amikhez egy adott osztályt rendeltél hozzá.

 

Stílusdeklarációk

A kiválasztást egy {kapcsos zárójelek közé zárt} blokk követi, amely a stílusdeklarációkat tartalmazza. Itt adhatod meg, hogy mekkora legyen a betűméret, milyen színeket szeretnél alkalmazni, mekkora legyen a térköz az elemek között, és így tovább.

 

Belső, külső és inline CSS stílusok

Egy HTML dokumentumban három helyen is megadhatod a kívánt CSS stílusokat, de egyáltalán nem mindegy, hogy hol használod őket.

Külső CSS

A külső CSS használata a leggyakoribb legkényelmesebb módszer. Külső CSS használatakor egy különálló .css kiterjesztésű fájlra kell hivatkoznod a HTML dokumentumban, és a böngésző ebből a fájlból olvassa majd ki, hogy mely elemekre milyen stílusokat kell alkalmaznia azok megjelenítésekor.
Ezt a különálló, külső CSS fájlt bármennyi HTML dokumentumhoz hozzácsatolhatod ezzel az egyszerű hivatkozási módszerrel, tehát ez az egyetlen észszerű módszer, ha több tucat, vagy akár több száz oldalon szeretnéd ugyan azt a stílust használni.

 

Belső CSS

A belső CSS a közvetlenül a HTML dokumentumban deklarált CSS stílusokat jelenti. Ezek a stílusok általában a dokumentum tetején helyezkednek el.
A belső CSS ideális gyors és egyszerű CSS stílusok alkalmazására, viszont ezek csak arra a HTML dokumentumra vonatkoznak majd, amelyben szerepelnek. Ez egy ritkábban használt módszer, mert kevés gyakorlati előnyt kínál a külső CSS-sel szemben. Egyedül akkor lehet igazán hasznos, ha nem férsz hozzá a külső CSS fájlhoz.

 

Inline CSS

Az inline CSS közvetlenül a HTML elemek