Ang mga klase ug ID motabang sa pagpalapad sa imong CSS
Ang pagtukod sa mga website sa Web karon nagkinahanglan og lawom nga pagsabot sa CSS (Cascading Style Sheets). Kini mao ang mga panudlo nga imong gihatag sa usa ka website aron mahibal-an kon unsaon kini sa layout sa window sa browser. Gipadapat nimo ang usa ka serye sa mga "estilo" sa imong HTML nga dokumento nga maghimo sa hitsura ug pagbati sa imong webpage.
Adunay daghang mga paagi sa paggamit sa mga gihisgutan nga mga estilo sa usa ka dokumento, apan kasagaran gusto nimo nga gamiton ang usa ka estilo sa pipila lamang sa mga elemento sa usa ka dokumento, apan dili ang tanan nga mga hitabo sa maong elemento.
Mahimo usab ikaw nga maghimo og usa ka estilo nga imong mahimo nga magamit sa daghang mga elemento sa usa ka dokumento, nga dili kinahanglan nga sublion ang estilo nga lagda alang sa matag indibidwal nga hitabo. Aron mahimo kini nga mga estilo, imong gamiton ang mga hiyas sa klase ug ID HTML. Kini nga mga hiyas mao ang global nga mga kinaiya nga mahimong ikapadapat sa hapit matag tag sa HTML .Kana nagpasabot nga bisan ikaw ang mga pagbahin sa estilo, mga parapo, mga link, mga lista o bisan unsa nga lain nga mga piraso sa HTML sa imong dokumento, mahimo ka nga mahimong mga hiyas sa klase ug ID sa makatabang kanimo sa pagtuman niini nga tahas!
Mga Tigpili sa Klase
Ang tigpili sa klase nagtugot kanimo sa pagtakda og daghang mga estilo sa parehas nga elemento o tag sa usa ka dokumento. Pananglitan, gusto nimo nga adunay pipila ka mga bahin sa imong teksto nga gitawag sa laing kolor gikan sa ubang bahin sa teksto sa dokumento. Kini nga mga highlight nga mga seksyon mahimo nga usa ka "alerto" nga imong gipahimutang sa panid. Mahimo nimong itudlo ang imong mga parapo sa mga klase nga sama niini:
p {color: # 0000ff; }
p.alert {color: # ff0000; }
Ang kini nga mga estilo magabutang sa kolor sa tanan nga mga parapo sa asul (# 0000ff), apan ang bisan unsa nga parapo nga adunay usa ka hiyas sa klase nga "alert" sa baylo pinaagi sa istilo sa red (# ff0000). Kini tungod kay ang hiyas sa klase adunay mas taas nga pagkasegurado kay sa una nga lagda sa CSS, nga naggamit lamang sa usa ka selector sa tag.
Sa diha nga nagtrabaho uban sa CSS, ang usa ka mas espisipiko nga lagda mag-override sa dili kaayo piho nga usa. Busa sa niini nga panig-ingnan, ang labaw nga kinatibuk-an nga lagda nagbutang sa kolor sa tanan nga mga parapo, apan ang ikaduha, labaw nga espesipikong lagda kay sa nagpatigbabaw sa maong kahimtang sa mga parapo lamang.
Ania kung unsaon kini gamiton sa pipila ka markup sa HTML:
Kini nga parapo gipakita sa asul, nga mao ang default alang sa panid.
Kini nga parapo mahimo usab nga asul.
Ug kini nga parapo gipakita sa pula tungod kay ang hiyas sa klase maoy mag-overwrite sa standard blue nga kolor gikan sa styling selector styler.
Sa maong pananglitan, ang estilo sa "p.alert" magamit lamang sa mga elemento sa parapo nga mogamit sa klase nga "alert". Kung gusto nimo gamiton kana nga klase sa daghang mga elemento sa HTML, gikuha nimo ang HTML element gikan sa sinugdanan sa estilo nga tawag (siguraduhon nga mobiya sa panahon (.) sa dapit), sama niini:
.alert {background-color: # ff0000;}
Kini nga klase karon anaa sa bisan unsang butang nga nagkinahanglan niini. Ang bisan unsang piraso sa imong HTML nga adunay usa ka hiyas sa klase nga bili sa "alerto" karon makabaton niining estilo. Diha sa HTML sa ubos, aduna kitay parapo ug heading level 2 nga naggamit sa "alert" nga klase. Ang duha niini adunay usa ka background-kolor nga pula nga base sa CSS nga gipakita lang namo.
Kini nga parapo gisulat nga pula.
Ug kini nga h2 pula usab.
Sa mga website karon, ang mga hiyas sa klase kasagaran nga gigamit sa kadaghanan nga mga elemento tungod kay kini mas sayon sa pagtrabaho uban sa usa ka piho nga panglantaw nga mga ID. Makita nimo ang pinaka-bag-ong mga pahina sa HTML nga mapuno sa mga hiyas sa klase, nga ang pipila niini gibalikbalik sa daghang mga higayon sa usa ka dokumento ug sa uban nga mahimo lamang makita sa makausa.
ID Selectors
Ang ID nga nagpili nagtugot kanimo sa paghatag sa usa ka ngalan sa usa ka piho nga estilo nga dili makig-uban niini sa usa ka tag o laing elemento sa HTML . Ingnon ka nga adunay dibisyon sa imong HTML markup nga adunay impormasyon bahin sa usa ka panghitabo.
Mahimo nimong ihatag kining pagkabahin sa usa ka hiyas sa ID sa "panghitabo", ug dayon kung gusto nimo nga gihan-ay ang pagbahin sa 1 ka pixel nga lapad nga itom nga utlanan imong isulat ang ID code nga sama niini:
#event {border: 1px solid # 000; }
Ang hagit uban sa mga tigpili sa ID mao nga dili kini mahimo nga gisubli sa usa ka dokumento sa HTML. Kinahanglan kini nga talagsaon (mahimo nimong gamiton ang samang ID sa daghang mga pahina sa imong site, apan kas-a lamang sa matag indibidwal nga dokumento sa HTML). Busa kon ikaw adunay 3 nga mga panghitabo nga gikinahanglan sa tanan niini nga utlanan, kinahanglan nimo nga hatagan sila sa mga hiyas sa ID sa "event1", "event2" ug "event3" ug estilo sa matag usa kanila. Busa, mas sayon nga gamiton ang gihisgotan nga hiyas sa klase sa "hitabo" ug estilo kini sa tanan.
Ang laing hagit nga adunay mga hiyas sa ID mao nga sila adunay mas taas nga pagkatinuod kaysa sa mga hiyas sa klase. Kini nagpasabot nga kung kinahanglan nimo nga adunay CSS nga nag-override sa kanhi gitukod nga estilo, mahimong malisud ang pagbuhat sa ingon kon masaligon ka kaayo sa mga ID. Tungod niini nga hinungdan nga daghang mga web developers ang mibalhin gikan sa paggamit sa mga ID sa ilang marka, bisan kon sila nagtinguha lamang sa paggamit niana nga bili sa makausa, ug sa baylo nagliso ngadto sa dili kaayo piho nga mga hiyas sa klase alang sa hapit tanan nga mga estilo.
Ang usa ka lugar diin ang mga hiyas sa ID nga gipakita sa diha nga gusto ka nga maghimo og usa ka panid nga may sulod nga mga anchor link. Pananglitan, kung ikaw adunay usa ka style sa parallax style nga naglangkob sa tanang sulod sa usa ka panid nga adunay mga link nga "mo-jump" sa lainlaing mga bahin sa panid. Gihimo kini gamit ang mga hiyas sa ID ug mga link sa teksto nga naggamit niining mga anchor links.
Imong idugang lamang ang bili nianang hiyas, nga gisundan sa # simbolo, ngadto sa href nga kinaiya sa sumpay, sama niini:
Kini ang link
Sa dihang i-klik o mahikap, kini nga link maglakip sa bahin sa panid nga adunay kini nga hiyas sa ID. Kung walay elemento sa panid nga gigamit niini nga ID nga bili, ang link dili mohimo sa bisan unsang butang.
Hinumdomi, kung gusto ka nga maghimo sa in-page nga pag-link sa usa ka site, ang paggamit sa mga attribute ID gikinahanglan, apan mahimo ka gihapon mag-abli sa mga klase alang sa pangkinatibuk-ang mga katuyoan sa CSS style. Mao kini ang akong pagmarka sa mga panid karong adlawa - Gigamit nako ang mga pinili sa klase kutob sa mahimo ug mahimo lamang nga mga ID kon gikinahanglan ko ang kinaiya nga molihok dili lamang sa usa ka kaw-itanan alang sa CSS kondili usab ingon nga in-page link.
Ang orihinal nga artikulo ni Jennifer Krynin. Gi-edit ni Jeremy Girard sa 8/9/17