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.
