Class vs ID
Ang Cascading Style Sheets (CSS) ay isang wika na naglalarawan sa hitsura at pag-format ng isang dokumentong nakasulat gamit ang isang markup language. Ang CSS ay malawakang ginagamit sa istilo ng mga web page na nakasulat sa HTML. Pinapayagan ng CSS na tukuyin ang iyong sariling mga tagapili ng istilo bilang karagdagan sa paglalapat ng mga istilo para sa mga elemento ng HTML. Ginagawa ito gamit ang ID at mga tagapili ng klase. Kapag tumutukoy ng istilo para sa isang natatanging elemento, ginagamit ang tagapili ng ID. Kapag tumutukoy ng istilo para sa isang pangkat ng mga elemento, ginagamit ang tagapili ng klase.
Ano ang Klase?
Sa CSS, maaaring gamitin ang Class selector para ilapat ang iyong sariling istilo sa isang pangkat ng mga elemento. Ang Class selector ay ginagamit upang maglapat ng isang partikular na istilo sa isang hanay ng mga elemento na may parehong klase. Sa CSS, ang isang class selector ay nakikilala sa pamamagitan ng isang full stop (.). Ang sumusunod ay isang halimbawa ng isang tagapili ng klase na tinukoy sa CSS.
.my_class {
kulay: asul;
timbang ng font: bold;
}
Ang HTML ay maaaring sumangguni sa klase na tinukoy sa CSS sa pamamagitan ng paggamit ng attribute class tulad ng ipinapakita sa ibaba.
Ito ang aking pag-format
Ito na naman ang aking pag-format
Tulad ng ipinakita sa itaas, ang parehong klase ay maaaring gamitin para sa maraming elemento at ang isang elemento ay maaaring gumamit ng maraming klase. Kapag maraming klase ang ginamit sa parehong elemento, ipinapasok ang mga klase sa attribute ng klase na nililimitahan ng isang puwang tulad ng ipinapakita sa ibaba.
Ito ang aking pag-format gamit ang dalawang klase
Ano ang ID?
Sa CSS, maaaring gamitin ang tagapili ng ID upang ilapat ang iyong sariling istilo sa isang natatanging elemento. Sa CSS, tinutukoy ang isang tagapili ng ID sa pamamagitan ng hash (). Ang sumusunod ay isang halimbawa ng tagapili ng ID na tinukoy sa CSS.
my_ID {
kulay: pula;
text-align:right;
}
Ang HTML ay maaaring sumangguni sa tagapili ng ID na tinukoy sa CSS sa pamamagitan ng paggamit ng attribute id tulad ng ipinapakita sa ibaba.
Ito ang aking pag-format bilang tagapili ng ID
Ang ID ay natatangi. Samakatuwid, ang bawat elemento ay maaari lamang magkaroon ng isang ID at ang bawat pahina ay maaari lamang magkaroon ng isang elemento na may partikular na ID. Ang mga ID ay may mahalagang katangian na maaaring magamit sa isang browser. Kung ang URL ng page ay naglalaman ng hash value (hal. https://myweb.commy_id) susubukan ng browser na awtomatikong hanapin ang elementong may ID na “my_id” at mag-scroll sa web page upang ipakita ang elementong iyon. Ito ay isang dahilan kung bakit ang page ay dapat magkaroon ng isang elemento na may partikular na ID, para mahanap ng browser ang elementong iyon.
Ano ang pagkakaiba ng Class at ID?
Kahit na parehong maaaring gamitin ang Class selector at ID selector para ilapat ang sarili mong istilo sa mga elemento sa isang web page, mayroon silang ilang mahahalagang pagkakaiba. Maaaring gamitin ang tagapili ng klase upang ilapat ang iyong sariling istilo sa isang pangkat ng mga elemento, habang ginagamit ang tagapili ng ID upang maglapat ng istilo sa iisang natatanging elemento. Kapag gumagamit ng mga ID, ang bawat elemento ay maaari lamang magkaroon ng isang ID at ang bawat pahina ay maaari lamang magkaroon ng isang elemento na may partikular na ID, ngunit ang Klase ay maaaring gamitin para sa maraming elemento at ang isang elemento ay maaaring gumamit ng maraming Klase. Higit pa rito, maaaring gamitin ang ID upang awtomatikong mag-scroll ng page upang ipakita ang elementong may ID na iyon, ngunit hindi ito posible sa tagapili ng klase.
