Rozdiel medzi id a triedou v CSS

Obsah:

Aké sú pravidlá CSS
Čo je id
Čo je trieda
Rozdiel medzi id a triedou v CSS

The hlavný rozdiel medzi id a triedou v CSS je, že id sa používa na použitie štýlu na jeden jedinečný prvok, zatiaľ čo trieda sa používa na použitie štýlu na viacero prvkov.

Vo vývoji webových aplikácií existujú rôzne technológie. Hlavnými jazykmi pre vývoj webových stránok sú HTML, CSS a JavaScript. HTML je skratka pre Hyper Text Markup Language. Pomáha rozvíjať štruktúru webovej stránky. JavaScript pomáha zvyšovať dynamiku webovej stránky. CSS je skratka pre kaskádové štýly. Pomáha to pridať štýly a zvýšiť prezentáciu webových stránok. Na prvky HTML sa vzťahujú pravidlá CSS. Selektory CSS tiež pomáhajú nájsť prvky a použiť požadovaný štýl na značky HTML. id a class sú dva typy voličov.

Trieda, pravidlá CSS, ID

Aké sú pravidlá CSS

CSS pozostáva zo súboru pravidiel. Prehliadač môže tieto pravidlá interpretovať a použiť ich na zadané prvky v dokumente. Pravidlo štýlu CSS pozostáva z troch sekcií. Sú to selektor, majetok a hodnota. Vyhlásenie sa týka kombinácie majetku a hodnoty. Zjavujú sa vo dvojici kučeravých zátvoriek nasledovne.

selektor {vlastnosť: hodnota; }

Volič - Pomáha identifikovať prvok a použiť štýl

Nehnuteľnosť - Atribút. Všetky atribúty HTML sú konvertované na vlastnosti CSS. Niektoré príklady sú farba, zarovnanie textu, orámovanie atď.

Hodnota - Hodnota je to, čo je majetku priradené. Farbe vlastnosti je možné napríklad priradiť modrú.

Čo je id

Programátor môže definovať pravidlo štýlu na základe id prvkov. Všetky prvky s rovnakým ID budú použité s definovaným štýlom. Ak chcete vybrať prvok s konkrétnym identifikátorom, mal by existovať symbol # (hash) a za ním id prvku.

Predpokladajme, že súbor HTML obsahuje nasledujúci príkaz.

Súbor CSS obsahuje nasledujúci kus kódu.

#header1 {

farba: modrá;

}

Keď prehliadač interpretuje príkaz HTML, skontroluje id prvku h1, ktorým je hlavička1 v súbore CSS. Potom použije definované pravidlo CSS na prvok h1. Preto sa text Hello World zobrazí v modrej farbe.

ID je na stránke jedinečné. Preto sa volič ID používa pre jeden jedinečný prvok.

Čo je trieda

Podobne ako id, programátor môže definovať pravidlá štýlu na základe triedy prvku. Všetky prvky s rovnakou triedou budú použité s definovaným štýlom. Na výber prvku s konkrétnou triedou by malo existovať a. (bodka) symbol, za ktorým nasleduje názov triedy.

Predpokladajme, že súbor HTML obsahuje nasledujúce príkazy.

Súbor CSS obsahuje nasledujúci kus kódu.

.header1 {

farba: modrá;

}

Keď prehliadač interpretuje príkaz HTML, skontroluje triedu prvku h1, ktorou je hlavička1 v súbore CSS. Potom použije definované pravidlo CSS na všetky prvky h1. Preto sa text Hello World 1 a Hello World 2 zobrazí modrou farbou.

Je možné použiť rovnakú triedu na viacerých prvkoch. Selektor triedy sa preto používa pre viacero prvkov.

Rozdiel medzi id a triedou v CSS

Definícia

id je selektor v CSS, ktorý štylizuje prvok so zadaným id, zatiaľ čo class je selektor v CSS, ktorý štylizuje vybrané prvky so zadanou triedou.

Syntax

Syntax id je deklaráciami #id {css; }. Syntax triedy je deklarácia.class {css; }

Použitie

Ďalej je použitie id na použitie štýlu na jeden konkrétny prvok. Použitie triedy je na aplikovanie štýlu na viac prvkov.

Záver

ID a trieda sú dva selektory v CSS, ktoré umožňujú použitie štýlu na prvky HTML. Hlavný rozdiel medzi id a triedou v CSS je v tom, že id sa používa na aplikáciu štýlu na jeden jedinečný prvok, zatiaľ čo trieda sa používa na aplikovanie štýlu na viacero prvkov.