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.
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
