Mi az a CSS? A CSS jelentése, bemutatása
Ha ismerkedtél már a weboldalfejlesztéssel, vagy olvastál a HTML-ről, akkor biztosan szembejött veled a CSS is. Hiszen a CSS az egyik legalapvetőbb nyelv a weboldal készítés során. Ebben a cikkben részletesen bemutatjuk, hogy mit jelent a CSS, mire lehet használni, illetve bemutatjuk azt is, hogy hogyan épül fel egy CSS kód. Egyszerűen fogalmazva bemutatjuk a CSS alapjait.
A CSS jelentése, fogalma
A WikiPedia így fogalmazza meg a CSS definícióját: ,,A CSS (Cascading Style Sheets, magyarul: lépcsőzetes stíluslapok) a számítástechnikában egy stílusleíró nyelv, mely a HTML vagy XHTML típusú strukturált dokumentumok megjelenését írja le.”
Egy kicsit egyszerűbben megfogalmazva én úgy írnám le, hogy: a CSS-el formázhatjuk meg a weboldalunk megjelenését. Például állíthatjuk be a szöveg méretét, kinézetét, színét, határozhatjuk meg, hogy egy oldalon belül hol helyezkedjen el egy kép, hogy hogy nézzen ki ez a kép, legyen-e kerete, le legyen-e kerekítve a sarka stb.
Mire lehet használni a CSS-t?
A teljesség igénye nélkül most felsorolok pár dolgot, amelyet CSS-el lehet megoldani. (Azért nem sorolom fel az összeset, mert a CSS segítségével körülbelül mindent elintézhetünk, így ez egy soha véget nem érő lista volna.)
- háttérkép beállítása
- háttérszín beállítása
- szövegméret beállítása
- szövegszín beállítása
- betűtípus meghatározása
- képek elhelyezkedésének meghatározása
- szövegigazítás változtatása
- tartalmak keretezése
- margó beállítása
- stb
Miért találták ki a CSS-t, ha ott van a HTML is?
Aki már ismeri a HTML nyelvet az nagyon jól tudja, hogy a HTML-t azért találták ki, hogy leírjuk vele a weboldal tartalmát. Fontos, hogy a tartalmát és nem a kinézetét.
De ahogy haladtunk előrébb az időben, úgy megjelent a fejlesztők részéről az az igény, hogy jó lenne, ha tudnánk a tartalmunkat formázni is. Ezáltal szebbé, egyedibbé tenni weboldalunkat.
Ezért bevezették a HTML nyelven belül történő formázást, amely kisebb káoszhoz vezetett. Nagyon nehéz és idegőrlő volt minden egyes HTML elemhez egyesével hozzáadni a megfelelő formázást.
Ennek a problémának a megoldására a W3C (World Wide Web Consortium) 1990-ben létrehozta a CSS-t. A CSS leválasztja a formázást a HTML-től, emiatt egy sokkal könnyebben átlátható rendszert alkot.
Hogy néz ki egy CSS kód?
A CSS kód megjelenése a csatolási módjától függ, de azt elmondhatjuk általánosságban, hogy (ha nem inline módszert használunk, akkor) először jön az elem neve, amit formázni szeretnénk, majd azután jön az, ahogyan szeretnénk formázni. Például:
ELEM {
TULAJDONSÁG: ÉRTÉK;
}
Az elem helyére az az elem kerül, amit formázni szeretnénk, például egy p. A tulajdonság helyére az kerül, amelyik tulajdonságát szeretnénk formázni, például, ha a színét szeretnénk, akkor a color. Az érték helyére azt kell írnunk, ahogyan szeretnénk formázni a tulajdonságot. Például a szín esetében, ha pirossá akarjuk tenni, akkor a red. Így néz ki végül a kód.
p {
color: red;
}
Code language: CSS (css)Stílusok, stíluslapok csatolási lehetőségei
Egy HTML fájlhoz többféleképpen is csatolhatjuk a CSS stíluslapot:
- Összekapcsolhatjuk a HTML dokumentumunkat egy külső CSS fájllal
- A HTML dokumentumon belül a <HEAD> szekcióban is megadhatjuk a stílusbeállításokat
- Beimportálhatjuk külső stíluslapként
- Beágyazhatjuk az elem kezdő tag-jébe is a stílus definíciókat
Alább csak nagyon röviden elemzem ezeket a módszereket, mert később következik egy lecke, ahol sokkal részletesebben kifejtem az összes módszert.
Beágyazott, inline stílus
Ez a legegyszerűbb és talán leggyorsabb módszer is, de mindezek ellenére a legkevésbé is ajánlott
Szintaktika
<ELEM style="STÍLUS DEFINÍCIÓK;">TARTALOM</ELEM>
Code language: HTML, XML (xml)A szintaxisból látszik, hogy itt az adott elem kezdőcímkéjébe biggyesztjük be a stílusbeállításokat. Rendkívül gyorsan használható, mert nem kell új fájlt létrehoznunk, nem kell külső fájlt becsatolnunk. A hátránya az, hogy így csak egyetlen egy elem stílusbeállítását határoztuk meg. Mindegyik elemnek egyesével kell megadnunk a stílusát, ami nagyon időigényes.
Stílus (STYLE) a HEAD szekcióba
Ez a megoldás már sokkal elegánsabb, de még mindig nem a legjobb.
Szintaktika
<HEAD>
<style type="text/css">
ELEM {STÍLUSDEFINÍCIÓ;}
</style>
</HEAD>
Code language: HTML, XML (xml)A fenti példából látszik, hogy ebben az esetben a stílusbeállításokat a <HEAD> részben helyezzük el, így már lehetőségünk van arra, hogy globálisan formázzuk az összes elemet. Nem szükséges az összes p elemhez bekattintanunk és begépelnünk, hogy piros legyen. Elég csak a <HEAD>-en belül megadnunk, hogy az összes p elem piros legyen.
HTML dokumentum összekapcsolása külső CSS fájllal
Ez a legszebb és leginkább átlátható módszer, hiszen itt a CSS fájl teljesen el van választva a HTML fájltól. Külön fájlba kerül a CSS és a HTML is, így a kód nagyon átlátható marad.
A HTML dokumentum CSS fájllal való összekötésének szintaktikája
<link rel=stylesheet type="text/css" href="CSS.ELÉRÉSI.ÚTVONALA">
Code language: HTML, XML (xml)Ezt a kódot a HTML fájl <HEAD> részében kell elhelyezni! A fenti kódban egyedül a „href=” utáni részt kell módosítani, ide jön a CSS fájl elérési útvonala.
A CSS fájlban lévő stílus megadás szintaktikája
ELEM
{
STÍLUSDEFINÍCIÓ;
}
Stíluslap importálása
Az @import funkció használatával külső stíluslapokat importálhatunk be a HTML dokumentumba. Ez a módszer nagyban hasonlít az előzőhöz.
Szintaktika
@import url(ELÉRÉSISI.ÚTVONALL);
Code language: CSS (css)Ez a kód is ugyanúgy a HTML dokumentum <HEAD> szekciójába kerül.
Példa CSS használatára
HTML + CSS kód
<!DOCTYPE html>
<head>
<style type="text/css">
p {color:red;}
</style>
</head>
<body>
<p>Minden p-nek pirosnak kell lennie.</p>
<p>Ennek is.</p>
</body>
</html>
Code language: HTML, XML (xml)Eredmény
Minden p-nek pirosnak kell lennie.
Ennek is.
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
A fenti kódban az látszik, hogy a stílusbeállításokat a HTML dokumentum fej részébe helyeztem el. Meghatároztam benne, hogy a p elemek színe piros legyen.
