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!