
HTML class – Minden, amit tudnod kell a HTML osztályokról
A HTML osztályokat (angolul HTML class – inkább így használják) arra használjuk, hogy meghatározzunk bennük egy stílust és azt egyszerre több elemre is ráhúzhassuk.
Például létrehozunk egy olyan HTML class-t, osztályt, amelybe definiáljuk, hogy a szövegszín piros legyen, ezután ezt az osztályt ráhúzhatjuk bármire, akár egy h1-re, akár egy p-re. Amire ráhúzzuk, az felveszi az osztály tulajdonságait, jelenesetben a piros színt.
HTML class, osztály szintaktikája
A HTML osztályok szintaktikáját kicsit nehezebb elmagyarázni, hiszen két “fronton” történik a meghatározása.
Osztály, class létrehozása
A HTML class-t vagy a HEAD-en belül elhelyezett STYLE-ba kell létrehozni vagy egy külső CSS fájlban.
Fontos, hogy az osztály neve mindig ponttal (.) kezdődik, ebből tudja a böngésző, hogy ez egy osztály. Ha megadtuk a nevet, akkor egy kapcsos zárójellel meg kell nyitnunk az osztályt, majd e mögé írhatjuk a stílus meghatározásokat. (Például: color:red;)
.osztaly
{
STÍLUS MEGHATÁROZÁSOK;
}
Class, osztály hozzárendelése egy elemhez
Ha létrehoztuk a class-t, akkor azután szükséges hozzárendelnünk valamilyen elemhez. Valójában nem kötelező hozzárendelni semmihez, de ha nem rendeljük semmihez, akkor nem sok értelme volt létrehozni. Azt viszont megtehetjük, hogy most hozzuk létre, de csak később rendeljük elemekhez. A példában egy p elemmel nézzük meg a hozzárendelést, de valójában bármihez hozzárendelhetjük.
<p class="osztaly">TARTALOM</p>
Code language: HTML, XML (xml)
Példa class, osztály használatára
HTML kód
<!DOCTYPE html>
<HEAD>
<STYLE>
.piros
{
color:red;
}
</STYLE>
</HEAD>
<BODY>
<p>Ehhez nem kapcsoltam a létrehozott class-t.</p>
<p class="piros">Ehhez viszont kapcsoltam a létrehozott class-t.</p>
</BODY>
</HTML>
Code language: HTML, XML (xml)
Eredmény
Ehhez nem kapcsoltam a létrehozott class-t.
Ehhez viszont kapcsoltam a létrehozott class-t.