CSS használati útmutató: A CSS használata
Ebben a rövid cikkben a CSS használatát fogjuk bemutatni. Ha nem tudnád, hogy mi az a CSS, akkor itt olvashatsz róla.
Hogyan kell használni a CSS-t?
1. lépés: Módszer kiválasztása.
Először is el kell döntenünk, hogy hogyan szeretnénk használni a CSS-t.
Négy különböző módszer létezik:
- inline, beágyazott CSS
- <HEAD>-be kerülő CSS
- külső CSS fájlba kerülő CSS beágyazással
- külső CSS fájlba kerülő CSS importálással
Mind a négy módszernek megvannak az előnyei és a hátrányai is. Ha nem ismered ezeket a módszereket, akkor itt olvashatsz róluk bővebben.
2. lépés: Válasszuk ki a formázandó elemet.
El kell döntenünk, hogy melyik elemet szeretnénk formázni. Ez az elem lehet egy egyszerű p, egy div, vagy akár egy id-val, class-al rendelkező elem is. Persze ezeken kívül bármilyen más elem lehet.
A kiválasztás úgy működik, hogy el kell döntenünk, hogy mit szeretnénk formázni. Ha például létrehoztunk egy szöveget, amit p tag-ek közé raktunk és ezzel szeretnénk valamilyen műveletet végezni (például megváltoztatni a színét), akkor egyértelmű, hogy a számunkra szükséges elem a p lesz. Viszont, ha van egy div-ünk, amibe szerepel egy csomó p és img és egységesen szeretnénk szerkeszteni az egész div területét, akkor a választandó elem a div lesz.
3. lépés: Stílus alkalmazása.
Az előző lépésben már megtaláltuk, hogy mit szeretnénk formázni, most azt kell eldöntenünk, hogy milyen stílust szeretnénk alkalmazni rá. Például, ha az előbb kiválasztottunk egy p elemet és szeretnénk a szöveg színét pirossá tenni, akkor a p elemre a color utasítást kell alkalmaznunk red értékkel.
>> Különböző CSS utasításokról, parancsokról és a hozzájuk tartozó értékekről itt olvashatsz. <<
Példa
Az előző három lépést nézzük végig most egy példán keresztül szemléltetve.
1. lépés: Módszer kiválasztása.
Mivel ez egy rendkívül egyszerű példa, így most a számunkra legmegfelelőbb módszer az inline, beágyazott megoldás. Emiatt a második lépésben kiválasztott elemünk egy „style=” attribútumot fog kapni. Így:
<ELEM style="">Tartalom</ELEM>
Code language: HTML, XML (xml)2. lépés: Válasszuk ki a formázandó elemet.
A példánál maradva én most egy p elemet szeretnék formázni. Ezért a kódunk így módosul:
<p style="">Tartalom</p>
Code language: HTML, XML (xml)3. lépés: Stílus alkalmazása.
Fentebb említettem, hogy a piros színt szeretnénk alkalmazni. Ehhez ez szükséges:
<p style="color:red;">Tartalom</p>
Code language: HTML, XML (xml)
