Třída vs ID
Cascading Style Sheets (CSS) je jazyk, který popisuje vzhled a formátování dokumentu napsaného pomocí značkovacího jazyka. CSS se široce používá pro stylování webových stránek napsaných v HTML. CSS umožňuje kromě použití stylů pro prvky HTML specifikovat vlastní selektory stylů. To se provádí pomocí selektorů ID a třídy. Při zadávání stylu pro jeden jedinečný prvek se použije selektor ID. Při zadávání stylu pro skupinu prvků se používá selektor třídy.
Co je to třída?
V CSS lze selektor třídy použít k aplikaci vlastního stylu na skupinu prvků. Selektor třídy se používá k použití konkrétního stylu na sadu prvků se stejnou třídou. V CSS je selektor třídy označen tečkou (.). Následuje příklad selektoru třídy definovaného v CSS.
.moje_třída {
barva: modrá;
font-weight: bold;
}
HTML může odkazovat na třídu definovanou v CSS pomocí atributové třídy, jak je uvedeno níže.
Toto je moje formátování
Toto je zase moje formátování
Jak je uvedeno výše, stejnou třídu lze použít pro více prvků a jeden prvek může používat více tříd. Když je ve stejném prvku použito více tříd, třídy se vloží do atributu class odděleného mezerou, jak je uvedeno níže.
Toto je moje formátování pomocí dvou tříd
Co je ID?
V CSS lze selektor ID použít k aplikaci vlastního stylu na jeden jedinečný prvek. V CSS je selektor ID identifikován pomocí hashe (). Následuje příklad selektoru ID definovaného v CSS.
my_ID {
barva: červená;
text-align:right;
}
HTML může odkazovat na selektor ID definovaný v CSS pomocí atributu id, jak je uvedeno níže.
Toto je můj formátovací formulář pro výběr ID
ID jsou jedinečná. Každý prvek tedy může mít pouze jedno ID a každá stránka může mít pouze jeden prvek s tímto konkrétním ID. ID mají důležitou vlastnost, kterou lze použít s prohlížečem. Pokud adresa URL stránky obsahuje hodnotu hash (např. https://myweb.commy_id), prohlížeč se pokusí automaticky najít prvek s ID „my_id“a posouváním webové stránky tento prvek zobrazí. To je jeden z důvodů, proč by stránka měla mít jeden prvek s tímto konkrétním ID, aby prohlížeč mohl tento prvek najít.
Jaký je rozdíl mezi třídou a ID?
Přestože jak selektor třídy, tak selektor ID lze použít k použití vlastního stylu na prvky na webové stránce, mají některé důležité rozdíly. Selektor třídy lze použít k použití vlastního stylu na skupinu prvků, zatímco selektor ID se používá k použití stylu na jeden jedinečný prvek. Při použití ID může mít každý prvek pouze jedno ID a každá stránka může mít pouze jeden prvek s tímto konkrétním ID, ale třídu lze použít pro více prvků a jeden prvek může používat více tříd. Kromě toho lze ID použít k automatickému posouvání stránky a zobrazení prvku s tímto ID, ale to není možné pomocí selektoru třídy.
