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 (
<p>
) vagy általános blokkok (
<div>
) é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. <div>
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 (
<p>
) 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 közé kerül a
<style> tagbe.