CSS használatának, csatolásának módszerei

Ebből a cikkből megtudhatod, hogy milyen CSS csatolási módszerek állnak a rendelkezésünkre, ha szeretnénk a CSS formázás adta lehetőségeket kihasználni.

0
CSS használatának, csatolásának módszerei cikk nyitóképe

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.

Tartalomjegyzék
WordPress bővítmények

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 kód

<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.