CSS szintaktikája, szintaxisa

Ahhoz, hogy megfelelően tudjunk formázni CSS-el, ahhoz elengedhetetlen a CSS szintaktikájának tökéletes ismerete. Ez tanulható meg ebből a cikbből.

HTML stílus, stíluslap és CSS használata, avagy HTML style cikk nyitóképe

CSS szintaktikája, szintaxisa

Ahhoz, hogy megfelelően működő CSS kódokat írjunk, muszáj ismernünk a szintaxisát. A jó hír az, hogy a CSS szintaktikája nagyon egyszerű. Viszont három esetet kell megvizsgálnunk: az egyik, amikor a HTML elemen belül adjuk meg a formázási lehetőségeket, a másik amikor egy külső fájlba, a harmadik pedig amikor a <HEAD> szekcióba. Szerencsére mindegyik módszer nagyon egyszerű.

CSS szintaktikája a HTML elemen belül

Ebben az esetben a CSS formázásokat az adott elem nyitó címkéjébe adjuk meg az alábbi módon:

<ELEM style="STÍLUS.BEÁLLÍTÁSOK">TARTALOM</ELEM>
Code language: HTML, XML (xml)

Az „ELEM” helyére értelemszerűen az elem neve kerül, például p, div stb. Ezután következik a „style=” ezt hagyjuk változatlanul. Az egyenlőség jel után kell írni az adott elemre értelmezendő stílusbeállításokat. Ide jön például, hogy a szín legyen piros, amelyet úgy adhatunk meg, hogy: color:red;

Példa

HTML kód

<p style="color:red;">Ez a szöveg piros.</p>
Code language: HTML, XML (xml)

Eredmény

Ez a szöveg piros.

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

CSS szintaktikája a <HEAD>-en belül

Ilyenkor az összes CSS stílusbeállítás a HTML dokumentum <HEAD> részébe kerül. Ez a megoldás azért sokkal jobb, mint az előző, mert itt beállíthatjuk, hogy egyszerre az összes azonos elem ugyanazokat a stílusbeállításokat örökölje. Míg az előző megoldásnál ez nem volt lehetséges, hiszen ott csak egyetlen egy elemet tudtunk egyszerre formázni. Nézzük a <HEAD>-en belüli megvalósítást:

<HEAD>
ELEM {
STÍLUSBEÁLLÍTÁSOK;
}
</HEAD>
Code language: HTML, XML (xml)

Csak úgy mint fentebb, az „ELEM” helyére a szerkeszteni kívánt elem neve kerül, például p, a „STÍLUSBEÁLLÍTÁSOK” helyére szükséges beírnunk, hogy mit és hogyan szeretnénk formázni. Nézzünk rá egy példát, úgy könnyebb megérteni.

Példa

HTML kód

<!DOCTYPE html>
<html>
    <head>
        <STYLE>
           p {
               color:red;
             }
        </STYLE>
    </head>
    <body>
       <p>Ez a szöveg piros.</p>
    </body>
</html>
Code language: HTML, XML (xml)

Eredmény

Ez a szöveg piros.

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

A sárgával kiemelt részen van a hangsúly, ott határozzuk meg, hogy az összes <body>-ban található p elem színe piros legyen.

CSS szintaktikája külső fájlban

Ez a megoldás terjedt el a leginkább, hiszen itt már valóban le van választva a CSS a HTML-től. Így akár egyetlen egy CSS fájlt, több HTML dokumentumban is használhatunk. A szintaxisa így fest:

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

A fenti kódban semmit sem kell megváltoztatnunk, csak egyedül a CSS elérési útvonalát. Ha a HTML fájl és a CSS dokumentum ugyanabban a mappában van, akkor elég csak a CSS nevét megadni a kiterjesztéssel együtt. Alább látható egy példa:

Példa

HTML kód

<!DOCTYPE html>
<html>
    <head>
        link rel=stylesheet type="text/css" href="stilus.css">
    </head>
    <body>
       <p>Ez a szöveg piros.</p>
    </body>
</html>
Code language: HTML, XML (xml)

CSS kód (stilus.css)

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

Eredmény

Ez a szöveg piros.

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

A HTML kódban látható kiemelés mutatja, hogy hogyan adtuk meg a külső CSS fájlt és eléri útvonalát, a CSS kódban lévő kiemelés pedig azt mutatja, hogy milyen stílust alkalmaztunk.

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