HTML id – Minden, amit tudnod kell a HTML azonosítóról

Tanuld meg ebből a cikkből a HTML azonosítók (id) működését, valamint használatát.

0
HTML id, azonosító használata

HTML id – Minden, amit tudnod kell a HTML azonosítóról

A HTML id nagyon hasonló a HTML class-hez. (Amiről itt találsz információkat.) A HTML azonosítókat (ami angolul id) is arra használjuk, hogy meghatározzunk bennük egy stílust, amit akár több elemre is ráhúzhatunk.

Például létrehozunk egy olyan HTML id-t, azonosítót, amelybe definiáljuk, hogy a szövegszín piros legyen, ezután ezt az azonosítót ráhúzhatjuk bármire, akár egy h1-re, akár egy p-re, akár egy span-ra. Amire ráhúzzuk, az felveszi az azonosító tulajdonságait, jelenesetben a piros színt.

HTML id, azonosító szintaktikája

Jelenesetben is kétfelé kell bontanunk a szintaktikát. Az első az id létrehozása, míg a második az azonosító hozzárendelése egy elemhez.

Azonosító, id létrehozása

A class esetében a létrehozáshoz egy pontot (.) kellett megadnunk, de az id esetében egy kettős keresztet (#) kell.

A létrehozás csakugyan a HEAD-en belüli STYLE-ban vagy egy különálló CSS fájlban történik.

Itt is nagyon fontos a kis- és nagybetű, az azonosító és az AZONOSÍTÓ nem ugyanazt jelenti.

#azonosito
    {
        STÍLUS MEGHATÁROZÁSOK;
    }
Code language: PHP (php)

Id, azonosító hozzárendelése egy elemhez

Fontos, hogy az azonosítókat is hozzárendelhetjük akár több elemhez is. A példában egy p elemhez fogom hozzárendelni a létrehozott azonosítót, de valójában minden HTML elemmel működik.

<p id="azonosito">TARTALOM</p>
Code language: HTML, XML (xml)

Példa id, azonosító használatára

HTML kód

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

   <BODY>
       <p>Ehhez nem kapcsoltam hozzá a létrehozott id-t.</p>
        <p id="piros">Ehhez viszont hozzákapcsoltam a létrehozott id-t.</p>
   </BODY>
</HTML>
Code language: HTML, XML (xml)

Eredmény

Ehhez nem kapcsoltam hozzá a létrehozott id-t.

Ehhez viszont hozzákapcsoltam a létrehozott id-t.

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

Kis- és nagybetű

Fentebb már volt róla szó, de fontos tudatosítani, hogy az azonosítók esetében van kis- és nagybetű megkülönböztetés. Ha egy azonosítót kisbetűvel hozunk létre, akkor nem hivatkozhatunk rá nagybetűvel.

Több azonosító, egy elem

Bár a HTML class-ból többet is felhalmozhatunk egy elemre, de ez a tulajdonság nem hasznosítható az id-knál.

Különböző elem, ugyanaz az azonosító (id)

Bár ez lehet sokaknak magától értetődő, de azért fontos megemlíteni, hogy ugyanaz az id, akár több különböző elemre is ráhelyezhető.

Példa egy id, 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 id="piros-hatter">p elem</p>
<h4 id="piros-hatter">h4 elem</h4>
   </BODY>
</HTML>
Code language: HTML, XML (xml)

Eredmény

p elem

h4 elem

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

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