HTML class – Minden, amit tudnod kell a HTML osztályokról

Tanuld meg ebből a cikkből a HTML osztályok (class) működését, valamint használatát.

0
HTML class, osztály használata

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>

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>

Eredmény

Ehhez nem kapcsoltam a létrehozott class-t.

Ehhez viszont kapcsoltam a létrehozott class-t.

Kis- és nagybetű

Fontos tudni, hogy bár a HTML nyelv alapvetően nem is-nagybetű érzékeny, azaz a HTML-ben teljesen mindegy, hogy <BODY>-t vagy <body>-t írsz, így is, úgy is felfogja ismerni. De az osztályok esetében ez másképp működik. A “piros” és a “PIROS” osztály nem ugyanaz. Szóval nagyon figyeljünk arra oda, hogy ugyanúgy hozzuk létre az osztályt, ahogy megpróbáljuk hozzárendelni egy elemhez.

Több osztály, egy elem

Fentebb már volt szó arról, hogy egy class, akár több elemhez is kapcsolható. De arról még nem volt szó, hogy egy elemhez, akár több class is kapcsolható.

Szintaktika

Létrehozást nem kell taglalni, mert arról fent már volt szó. Csak itt az a különbség, hogy egymás után kettő (vagy több) class-t kell létrehozni a fentebb taglalt módon. Alább az elemhez való több osztály hozzárendelését láthatjátok.

<p class="osztaly1 osztaly2">TARTALOM</p>

Csakugyan p esetében mutattam be a példát, de ugyanúgy, ahogy fentebb, ez is alkalmazható minden HTML elemre.

Példa több class, egy elem felállásra

HTML kód

<!DOCTYPE html>
   <HEAD>
       <STYLE>
            .piros
                {
                   color:red;
                }

             .sarga
                {
                   background-color:yellow;
                }
       </STYLE>
   </HEAD>

   <BODY>
        <p class="piros sarga">Ehhez két class-t kapcsoltam.</p>
   </BODY>
</HTML>

Eredmény

Ehhez két class-t kapcsoltam.

Különböző elem, ugyanaz az osztály

Fentebb már volt róla szó, hogy ugyanazt a class-t több elemre is ráhelyezhetjük. Ebből adódóan ugyanazt az osztályt, class-t akár több különböző típusú elemre is ráhelyezhetjük.

Példa egy class, több különböző elem felállásra

HTML kód

<!DOCTYPE html>
   <HEAD>
       <STYLE>
            .piros-hatter
                {
                  background-color:red;
                }
       </STYLE>
   </HEAD>

   <BODY>
        <p class="piros-hatter">p elem</p>
<h4 class="piros-hatter">h4 elem</h4>
   </BODY>
</HTML>

Eredmény

p elem

h4 elem