A CSS használata [CSS használati útmutató]

Ebben a cikkben a CSS használatát fogjuk bemutatni a tervezéstől a megvalósításig.

A CSS használata [CSS használati útmutató]

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)

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