
CSS használatának, csatolásának módszerei
Az előző leckékben már érintettük a mostani témát, de mindenképp érdemes még részletesebben is kifejteni a CSS használatának, csatolásának lehetőségeit. Azt már tudjuk, hogy mi a CSS, most pedig tanuljuk meg, hogy milyen módszerek állnak a rendelkezésünkre, ha szeretnénk a CSS formázás adta lehetőségeket kihasználni.
A CSS csatolásának 4 módszere van:
- Összekapcsolhatjuk a HTML dokumentumot egy külső CSS fájllal
- A HTML dokumentum <HEAD> részében is megadhatjuk a CSS-t
- Beimportálhatunk külső stíluslapot
- Beágyazhatjuk az adott elem kezdőcímkéjébe (tag-jébe) a stílus meghatározásokat
Alább megnézzük mind a négy módszer szintaktikáját, előnyét, hátrányát, plusz még példákat is nézünk minden egyes módszerre.
Beágyazott, inline stílus
Kezdjük talán a legegyszerűbb, leggyorsabb módszerrel a beágyazott, inline CSS-el. Azért hívják beágyazott vagy inline stílusnak, mert az adott elem kezdőcímkéjébe ágyazzuk be a stílusbeállításokat. Ebből következik, hogy ennél a módszernél a CSS a HTML fájlba kerül.
Szintaktika
<ELEM style="STÍLUS DEFINÍCIÓK;">TARTALOM</ELEM>
Code language: HTML, XML (xml)
A “style=” rész után kell idézőjelek közé megadnunk a kívánt stílus beállításait. Nézzünk meg egy példát, hogy könnyebben érthető legyen az inline stílus megadás.
Példa
HTML
<p style="color:red;">Ez egy piros szöveg lesz.</p>
<p>Ez nem piros, mert itt nincs stílusdefiníció.</p>
Code language: HTML, XML (xml)
Eredmény
Ez egy piros szöveg lesz.
Ez nem piros, mert itt nincs stílusdefiníció.
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
Előnyök
- Gyorsan és egyszerűen hozzátudjuk adni az adott elemhez a kívánt stílust.
Hátrányok
- Nem tudjuk egységesen szerkeszteni az adott elem összes előfordulását. Például, ha később létrehozunk egy újabb p elemet, akkor annál újra meg kell adni a rá vonatkozó stílusbeállításokat.
CSS elhelyezése a <HEAD>-ben
Az előző megoldással szemben ez már egy sokkal kedvezőbb megoldás, hiszen itt a CSS kódot a HTML dokumentum <HEAD> részébe helyezzük. Így akár már globálisan tudjuk formázni egy adott elem összes előfordulását.
Szintaktika:
<HEAD>
<style type="text/css">
STÍLUSDEFINÍCIÓ;
</style>
</HEAD>
Code language: HTML, XML (xml)
A fenti szintaxisból tisztán kivehető, hogy a stílus a fejrészbe kerül. Fontos, hogy a <style> és a </style> között adjuk meg a formázásokat.
Példa
HTML 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.