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.

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.

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Előnyök:

  • Elég egyetlen egyszer megadnunk egy elem stílusbeállítását és az összes előfordulásakor olyan lesz, amilyennek szeretnénk.

Hátrányok:

  • Csak azon az oldalon fog szerepelni a meghatározott formázás, amelyik dokumentumba elhelyeztük. Azaz ha a weboldalunk több aloldalból áll, akkor csak azon az oldalon fog létezni a formázás, ahol megadtuk.

CSS fájl hozzácsatolása HTML dokumentumhoz

A fejlesztők kedvenc megoldása, hiszen nagyon rugalmas és könnyen értelmezhetővé teszi a kódot. Ebben az esetben az összes CSS formázást egy külső, a HTML dokumentumtól különálló fájlba tesszük. Ez azért kiváló megoldás, mert ha több aloldalunk van, akkor mindegyik aloldalba beköthetjük ugyanazt a CSS fájlt, így mindegyiken élni fog a CSS dokumentumban szereplő formázás.

Szintaktika

<HEAD>
   <link rel=stylesheet type="text/css" href="CSS.ELÉRÉSI.ÚTVONALA">
</HEAD>
Code language: HTML, XML (xml)

Ha a CSS fájl és a HTML dokumentum ugyanabba a mappába van, akkor elegendő csak a CSS fájl nevére hivatkozni és nem kell az elérési útvonalát megadni. A kód többi elemét nem kell módosítanunk.

A különálló CSS fájlba lévő stílus szintaktikája:

ELEM {
  TULAJDONSÁG: ÉRTÉK;
}

Fontos tudnivalók

  • A CSS fájl kiterjesztése: .css
  • Akár több CSS fájlt is hozzácsatolhatunk a HTML dokumentumunkhoz.

Példa

HTML kód

<!DOCTYPE html>
<head>
    <link rel=stylesheet type="text/css" href="stilus.css">
</head>

<body>
   <p>Minden p-nek pirosnak kell lennie.</p>
   <p>Ennek is.</p>
</body>
</html>
Code language: HTML, XML (xml)

CSS kód (stilus.css)

p {
color:red;
}
Code language: CSS (css)

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 példát elemezve láthatjuk, hogy a HTML kód <HEAD> részébe becsatoljuk a stilus.css nevű fájlt, amelyben meghatároztuk, hogy a p elemek pirosan jelenjenek meg. Így a jobb oldalt eredményként látható, hogy az összes p elemünk piros lett.


Előnyök:

  • Ha egyszer meghatározzuk a CSS stílusbeállításait, akkor többé már nem kell. Elég, ha minden egyes HTML dokumentumban csak ezt az egy fájlt csatoljuk be.

Hátrányok:

  • Egy kicsit időigényes lehet, mert létre kell hoznod egy új fájlt, majd becsatolnod a HTML dokumentumba.

CSS importálása

Ez a módszer nagyon hasonlít az előzőhöz, jelen esetben az @import segítségével külső stíluslapokat importálhatunk be HTML dokumentumunkba.

Szintaktika

@import url(ELÉRÉSI.ÚTVONAL);
Code language: CSS (css)

Pár információ az @import-ról

  • A @import segítségével lehetőségünk van egy CSS fájlba egy másik CSS fájlt importálni.
  • A @import utasításnak a dokumentum fejrészében kell elhelyezkednie, de fontos, hogy a @charset deklaráció után legyen megtalálható.
  • A sor végére kötelező kitenni a pontosvesszőt, hogy ezzel lezárjuk az utasítást.

Példa

HTML kód

<!DOCTYPE html>
<head>
<meta charset="utf-8">
   @import url("STILUS.css");
</head>

<body>
   <p>Minden p-nek pirosnak kell lennie.</p>
   <p>Ennek is.</p>
</body>
</html>
Code language: HTML, XML (xml)

CSS kód (stilus.css)

p {
color:red;
}
Code language: CSS (css)

Eredmény

Minden p-nek pirosnak kell lennie.

Ennek is.

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Jól látható, hogy az előző módszerhez képest körülbelül semmi sem változott, csak annyi, hogy itt másképp “kötöttük be” a CSS fájlt.

Összegzés

Ezzel a CSS csatolási lehetőségek végére értünk, mindenki eldöntheti, hogy számára melyik a legjobb, legegyszerűbb módszer. Minden helyzetben más és más módszer használata ajánlott. Ha nagyon egyszerű, kevés CSS kóddal járó oldalt készítünk, akkor jó megoldás lehet az inline CSS használata, ha kicsit bonyolultabb, de csak egy oldalból álló weblapot készítünk, akkor a fejrészbe való becsatolás ajánlott. Ezeknél bonyolultabb esetekben mindenképp külső CSS fájllal érdemes dolgozni.

Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!

További leckék