Mga Klase at Mga ID Tulong Palawakin ang Iyong CSS
Ang pagbuo ng mga website sa Web ngayon ay nangangailangan ng malalim na pag-unawa sa CSS (Cascading Style Sheets). Ito ang mga tagubilin na nagbibigay sa iyo ng isang website upang matukoy kung paano ito magiging layout sa window ng browser. Nag-aplay ka ng isang serye ng mga "estilo" sa iyong HTML na dokumento na lilikha ng hitsura at pakiramdam ng iyong webpage.
Maraming mga paraan upang mailapat ang mga nabanggit na estilo sa isang dokumento, ngunit kadalasan ay nais mong gumamit ng estilo sa ilan lamang sa mga elemento sa isang dokumento, ngunit hindi lahat ng mga elemento ng sangkap na iyon.
Maaari mo ring nais na lumikha ng isang estilo na maaari mong ilapat sa ilang mga elemento sa isang dokumento, nang hindi na kailangang ulitin ang estilo ng panuntunan para sa bawat indibidwal na pagkakataon. Upang makamit ang mga nais na estilo, gagamitin mo ang mga attribute ng klase at ID HTML. Ang mga katangiang ito ay pandaigdigang mga katangian na maaaring ilapat sa halos bawat HTML na tag . Iyon ay nangangahulugan na kung ikaw ay mga dibersiyon, mga talata, mga link, mga listahan o alinman sa iba pang mga piraso ng HTML sa iyong dokumento, maaari mong i-on ang mga katangian ng class at ID sa tulungan kang magampanan ang gawaing ito!
Class Selectors
Pinapayagan ka ng tagapili ng klase na magtakda ng maramihang mga estilo sa parehong elemento o tag sa isang dokumento. Halimbawa, maaaring gusto mong magkaroon ng ilang mga seksyon ng iyong teksto na tinatawag sa ibang kulay mula sa natitirang bahagi ng teksto sa dokumento. Ang mga naka-highlight na seksyon ay maaaring isang "alerto" na iyong itinatakda sa pahina. Maaari mong italaga ang iyong mga talata sa mga klase tulad nito:
p {color: # 0000ff; }
p.alert {color: # ff0000; }
Ang mga estilo na ito ay magtatakda ng kulay ng lahat ng mga talata sa asul (# 0000ff), ngunit ang anumang talata na may katangian ng klase ng "alerto" ay sa halip ay sa pamamagitan ng naka-istilong pula (# ff0000). Ito ay dahil ang katangian ng klase ay may mas mataas na pagtitiyak kaysa sa unang panuntunan ng CSS, na gumagamit lamang ng isang tagapili ng tag.
Kapag nagtatrabaho sa CSS, ang isang mas tiyak na panuntunan ay sasapaw sa isang mas tiyak na isa. Kaya sa halimbawang ito, ang mas pangkalahatang panuntunan ay nagtatakda ng kulay ng lahat ng mga talata, ngunit ang pangalawang, mas tiyak na panuntunan kaysa sa pinapalitan ang setting na iyon sa ilang parapo lamang.
Narito kung paano ito magagamit sa ilang markup ng HTML:
Ang talatang ito ay ipapakita sa asul, na siyang default para sa pahina.
Ang talatang ito ay magiging asul din.
At ang talatang ito ay ipapakita sa pula dahil ang katangian ng klase ay patungan ang karaniwang asul na kulay mula sa estilo ng selector ng selector.
Sa halimbawang iyon, ang estilo ng "p.alert" ay nalalapat lamang sa mga elemento ng talata na gumagamit ng "alerto" na klase. Kung gusto mong gamitin ang klase sa maraming maramihang elemento ng HTML, tatanggalin mo lamang ang elemento ng HTML mula sa simula ng estilo ng tawag (siguraduhing iwanan ang panahon (.) sa lugar), tulad nito:
.alert {background-color: # ff0000;}
Ang klase na ito ay magagamit na ngayon sa anumang elemento na nangangailangan nito. Anumang piraso ng iyong HTML na may halaga ng katangian ng klase ng "alerto" ay makakakuha ng estilo na ito ngayon. Sa HTML sa ibaba, mayroon kaming parehong talata at antas ng heading na 2 na gumagamit ng "alerto" na klase. Ang parehong mga ito ay may isang background-kulay ng pula batay sa CSS na ipinakita lamang namin.
Ang parapo na ito ay nakasulat sa pula.
At ang h2 na ito ay pula din.
Sa mga website ngayon, ang mga katangian ng klase ay kadalasang ginagamit sa karamihan ng mga elemento dahil mas madali silang magtrabaho mula sa isang pananaw na partikularidad na ang mga ID ay. Makakakita ka ng mga kasalukuyang HTML na mga pahina upang mapunan ng mga katangian ng klase, ang ilan sa mga ito ay paulit-ulit nang maraming beses sa isang dokumento at iba pa na maaaring lumitaw nang isang beses.
ID Selectors
Pinapayagan ka ng ID selector na magbigay ng pangalan sa isang partikular na estilo nang hindi iniuugnay ito sa isang tag o iba pang elemento ng HTML . Sabihing mayroon kang isang dibisyon sa iyong HTML markup na naglalaman ng impormasyon tungkol sa isang kaganapan.
Maaari mong ibigay ang dibisyong ito ng ID na katangian ng "kaganapan", at pagkatapos kung nais mong balangkas ang dibisyon na may 1-pixel na lapad na itim na hangganan sumulat ka ng ID code na katulad nito:
#event {border: 1px solid # 000; }
Ang hamon sa mga tagapili ng ID ay hindi na nila maaaring ulitin sa isang HTML na dokumento. Dapat silang maging kakaiba (maaari mong gamitin ang parehong ID sa maraming pahina ng iyong site, ngunit isang beses lamang sa bawat indibidwal na dokumentong HTML). Kaya kung mayroon kang 3 mga kaganapan na kailangan ng lahat ng hangganan na ito, kakailanganin mong bigyan sila ng mga katangiang ID ng "event1", "event2" at "event3" at estilo bawat isa sa kanila. Samakatuwid, magiging mas madali ang paggamit ng nabanggit na katangian ng klase ng "kaganapan" at estilo ng mga ito nang sabay-sabay.
Ang isa pang hamon na may mga katangian ng ID ay ang pagkakaroon ng mas mataas na pagtitiyak sa mga katangian ng klase. Nangangahulugan ito na kung kailangan mong magkaroon ng CSS na nag-override sa dating naitatag na estilo, maaari itong maging mahirap na gawin ito kung ikaw ay lubos na umasa sa mga ID. Ito ay dahil sa kadahilanang ito na maraming mga web developer ang lumipat mula sa paggamit ng mga ID sa kanilang markup, kahit na nilayon lamang nilang gamitin ang halaga na iyon minsan, at sa halip ay nakabukas sa mga katangian na hindi gaanong tukoy sa klase para sa halos lahat ng mga estilo.
Ang isang lugar kung saan ang mga katangian ng ID ay nakasalalay sa pag-play ay kapag nais mong lumikha ng isang pahina na may mga link sa anchor sa pahina. Halimbawa, kung mayroon kang isang website ng estilo ng paralaks na naglalaman ng lahat ng nilalaman sa isang pahina na may mga link na "tumalon" sa iba't ibang bahagi ng pahinang iyon. Ginagawa ito gamit ang mga katangian ng ID at mga link ng teksto na gumagamit ng mga link na ito ng anchor.
Gusto mo lamang idagdag ang halaga ng katangiang iyon, na nauna sa # na simbolo, sa href attribute ng link, tulad nito:
Ito ang link
Kapag nag-click o hinawakan, ang link na ito ay lilipat sa bahagi ng pahina na may katangiang ID na ito. Kung walang ginamit na elemento sa pahina ang halaga ng ID na ito, ang link ay hindi magagawa.
Tandaan, kung nais mong lumikha ng in-page na nagli-link sa isang site, ang paggamit ng mga katangian ng ID ay kinakailangan, ngunit maaari ka pa ring lumipat sa mga klase para sa pangkalahatang mga layunin sa estilo ng CSS. Ito ay kung paano ko markahan ang mga pahina ngayon - Ginamit ko ang mga tagapili ng klase hangga't maaari at bumaling lamang sa mga ID kapag kailangan ko ang katangian na kumilos hindi lamang bilang isang kawit para sa CSS kundi pati na rin bilang isang in-page na link.
Orihinal na artikulo ni Jennifer Krynin. Ini-edit ni Jeremy Girard noong 8/9/17