Trieda vs ID
Cascading Style Sheets (CSS) je jazyk, ktorý popisuje vzhľad a formátovanie dokumentu napísaného pomocou značkovacieho jazyka. CSS sa široko používa na úpravu webových stránok napísaných v HTML. CSS umožňuje okrem použitia štýlov pre prvky HTML špecifikovať vlastné selektory štýlu. To sa vykonáva pomocou selektorov ID a triedy. Pri zadávaní štýlu pre jeden jedinečný prvok sa používa selektor ID. Pri zadávaní štýlu pre skupinu prvkov sa používa selektor triedy.
Čo je trieda?
V CSS možno použiť selektor triedy na použitie vlastného štýlu na skupinu prvkov. Selektor triedy sa používa na aplikovanie špecifického štýlu na množinu prvkov s rovnakou triedou. V CSS je selektor triedy označený bodkou (.). Nasleduje príklad selektora triedy definovaného v CSS.
.moja_trieda {
farba: modrá;
font-weight: bold;
}
HTML môže odkazovať na triedu definovanú v CSS pomocou atribútu class, ako je uvedené nižšie.
Toto je moje formátovanie
Toto je opäť moje formátovanie
Ako je uvedené vyššie, rovnakú triedu možno použiť pre viacero prvkov a jeden prvok môže používať viacero tried. Keď sa v tom istom prvku použije viacero tried, triedy sa vložia do atribútu class oddeleného medzerou, ako je uvedené nižšie.
Toto je moje formátovanie pomocou dvoch tried
Čo je ID?
V CSS je možné použiť selektor ID na použitie vlastného štýlu na jeden jedinečný prvok. V CSS je selektor ID identifikovaný hashom (). Nasleduje príklad selektora ID definovaného v CSS.
my_ID {
farba: červená;
text-align:right;
}
HTML môže odkazovať na selektor ID definovaný v CSS pomocou atribútu id, ako je uvedené nižšie.
Toto je moje formátovanie formulára na výber ID
ID sú jedinečné. Preto môže mať každý prvok iba jedno ID a každá stránka môže mať iba jeden prvok s týmto špecifickým ID. ID majú dôležitú vlastnosť, ktorú možno použiť s prehliadačom. Ak adresa URL stránky obsahuje hodnotu hash (napr. https://myweb.commy_id), prehliadač sa pokúsi automaticky nájsť prvok s ID „my_id“a rolovaním webovej stránky zobrazí tento prvok. To je jeden z dôvodov, prečo by stránka mala obsahovať jeden prvok s týmto špecifickým ID, aby prehliadač mohol tento prvok nájsť.
Aký je rozdiel medzi triedou a ID?
Napriek tomu, že selektor triedy aj selektor ID možno použiť na použitie vlastného štýlu na prvky webovej stránky, majú niektoré dôležité rozdiely. Selektor triedy možno použiť na aplikovanie vlastného štýlu na skupinu prvkov, zatiaľ čo selektor ID sa používa na aplikovanie štýlu na jeden jedinečný prvok. Pri použití ID môže mať každý prvok iba jedno ID a každá stránka môže mať iba jeden prvok s týmto špecifickým ID, ale triedu možno použiť pre viacero prvkov a jeden prvok môže používať viacero tried. Okrem toho je možné ID použiť na automatické posúvanie stránky, aby sa zobrazil prvok s týmto ID, ale to nie je možné pomocou selektora triedy.
