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.