Dili ka limitado sa usa ka klase sa CSS kada elemento.
Ang Cascading Style Sheets (CSS) nagtugot kanimo sa paghubit sa pagpakita sa usa ka elemento pinaagi sa pagsumpay sa mga kinaiya nga imong gipadapat nianang elemento. Kini nga mga hiyas mahimong mahimo ug ID o klase ug, sama sa tanan nga mga hiyas, kini makadugang sa makatabang nga impormasyon ngadto sa mga elemento nga gilakip niini. Depende sa unsang hiyas nga imong idugang sa usa ka elemento, mahimo ka magsulat sa usa ka selector sa CSS aron sa paggamit sa mga gikinahanglan nga mga estilo sa visual nga gikinahanglan aron sa pagkab-ot sa hitsura ug pagbati alang niana nga elemento ug sa website sa kinatibuk-an.
Samtang ang mga ID o mga klase nagtrabaho alang sa katuyoan nga maglakip sa mga lagda sa CSS, ang mga modernong pamaagi sa paghimo sa web naghatag og pabor sa mga klase sa mga ID, sa usa ka bahin, tungod kay sila dili kaayo piho ug mas sayon sa pagtrabaho sa kinatibuk-an. Oo, makakita ka pa gihapon og daghang mga site nga naggamit sa mga ID, apan ang mga hiyas gipadapat nga mas gamay kay kaniadto samtang ang mga klase nakuha na sa modernong mga web page.
Single o Multiple nga mga klase sa CSS?
Sa kadaghanang mga kaso imong ibutang ang usa ka hiyas sa usa ka klase ngadto sa usa ka elemento, apan sa pagkatinuod ikaw dili limitado sa usa lamang ka klase nga paagi nga ikaw adunay mga ID. Samtang ang usa ka elemento adunay usa lamang ka hiyas sa ID, mahimo ka nga makahatag sa usa ka elemento sa daghang mga klase ug, sa pipila ka mga kaso, ang paghimo niini makahimo sa imong panid nga mas sayon nga mag-istilo ug labi ka madugangan!
Kon kinahanglan mo nga mag-assign sa daghang mga klase sa usa ka elemento, mahimo nimong idugang ang dugang nga mga klase ug ibulag lang kini sa usa ka luna sa imong kinaiya.
Pananglitan, kining parapoha adunay tulo ka klase:
pullquote featured left "> Kini ang teksto sa paragraph
Kini nagtakda sa mosunod nga tulo ka mga klase sa tag sa parapo:
- Pullquote
- Gipili
- Sa wala
Matikdi ang mga luna tali sa matag usa niining mga hiyas sa klase. Kadtong mga luna mao ang nagpalahi kanila nga nagkalainlain, indibidwal nga mga klase. Mao usab kini ang hinungdan nganong ang mga ngalan sa klase dili dunay mga luna diha kanila, tungod kay ang paghimo niini magtukod niini nga managlahi nga mga klase.
Pananglitan, kung gigamit nimo ang "pullquote-featured-left" nga walay luna, kini usa ka bili sa klase, apan ang pananglitan sa ibabaw, diin kining tulo ka mga pulong nahimulag sa usa ka luna, gipahamutang kini isip indibidwal nga mga bili. Mahinungdanon nga masabtan kini nga konsepto samtang ikaw modesisyon kung unsang klase nga mga mithi ang gamiton sa imong mga webpage.
Sa higayon nga imong maangkon ang imong mga hiyas sa klase sa HTML, mahimo nimo kini itudlo isip mga klase sa imong CSS ug i-apply ang mga estilo nga gusto nimo idugang. Pananglitan.
.pullquote {...}
.featured {...}
p.left {...}
Niini nga mga pananglitan, ang mga deklarasyon sa CSS ug ang mga parisan nga mga pares anaa sa sulod sa mga kulot nga kurbada, nga mao ang pag-apply sa mga estilo ngadto sa tukmang selector.
Hinumdomi - kon imong itakda ang klase sa usa ka partikular nga elemento (sama pananglit, p.left), mahimo nimo kini gamiton isip kabahin sa lista sa mga klase; Apan nahibal-an nga kini makaapektar lamang sa mga elemento nga gitakda sa CSS. Sa laing pagkasulti, ang estilo sa p.left magamit lamang sa mga parapo niini nga klase tungod kay ang imong selektor sa pagkatinuod nag-ingon sa paggamit niini ngadto sa "mga parapo nga may bili sa klase sa 'wala'". Sa kasukwahi, ang laing duha ka mga tigpili sa panig-ingnan wala magtino sa usa ka elemento, aron kini magamit sa bisan unsang elemento nga naggamit sa mga hiyas sa klase.
Kaayohan sa daghang mga klase
Ang daghang mga klase makahimo nga mas sayon ang pagdugang sa mga espesyal nga epekto sa mga elemento nga dili kinahanglan nga maghimo og bag-ong estilo alang niana nga elemento.
Pananglitan, ikaw mahimo nga adunay abilidad sa paglutaw sa mga elemento sa wala o sa tuo sa madali. Mahimo nimo isulat ang duha ka klase nga nahibilin ug tuo sa float: left; ug paglutaw: matarung; diha kanila. Unya, sa matag higayon nga adunay usa ka elemento kinahanglan ka nga molutaw sa wala, imong idugang ang klase nga "wala" sa listahan sa klase.
Adunay usa ka maayong linya aron makalakaw dinhi, bisan pa niana. Hinumdomi nga ang mga sumbanan sa web nagdikta sa panagbulag sa estilo ug estraktura. Gihimo ang hulma pinaagi sa HTML samtang ang estilo anaa sa CSS.
Kung ang imong HTML nga dokumento puno sa mga elemento nga ang tanan adunay mga pangalan sa klase nga sama sa "pula" o "wala", nga mga ngalan nga nagdikta kung unsa ang hitsura sa mga elemento kay sa unsa kini, imong gilabyan ang linya tali sa estraktura ug estilo. Gisulayan nako nga limitahan ang akong mga ngalan sa klase nga dili semantiko kutob sa mahimo tungod niini nga hinungdan.
Daghang mga klase, Semantiko, ug JavaScript
Ang laing kaayohan sa paggamit sa daghang mga klase mao nga kini naghatag kanimo og daghang mga posibilidad sa interactivity.
Mahimo nimo mapadapat ang mga bag-ong klase sa mga elemento nga naggamit sa JavaScript nga dili makuha ang bisan unsang mga klase. Mahimo usab nimo gamiton ang mga klase aron mahibal-an ang mga semantiko sa usa ka elemento . Kini nagpasabot nga ikaw makadugang sa mga dugang nga mga klase aron mahibal-an kung unsa ang gipasabot niini nga semantically. Mao kini ang gibuhat sa Microformats.
Mga Disbentaha sa daghang mga klase
Ang pinakadako nga disbentaha sa paggamit sa daghang mga klase sa imong mga elemento mao nga kini makahimo kanila sa usa ka gamay nga dili mabuhat sa pagtan-aw ug pagdumala sa paglabay sa panahon. Mahimong malisud ang pagtino unsa nga mga estilo ang naka-apekto sa elemento ug kung adunay bisan unsang mga script nga naka-apekto niini. Daghan sa mga gambalay nga anaa karon, sama sa Bootstrap, nagamit sa daghang mga elemento nga adunay daghang mga klase. Kanang kodigo dili makalusot ug lisud sa pagtrabaho nga dali kung dili ka mag-amping.
Kon mogamit ka og daghang mga klase, imong gipadagan ang kapeligrohan nga ang estilo sa usa ka klase mo-override sa estilo sa lain bisan kung wala nimo kini giplano. Dayon kini makahimo nga lisud mahibal-an kung nganong ang imong mga estilo wala maaplikar bisan kung kini makita nga kinahanglan.
Kinahanglan nimo nga mahibal-an ang pagkasegurado, bisan pa sa mga kinaiya nga gigamit sa usa ka elemento!
Pinaagi sa paggamit sa usa ka himan nga sama sa mga himan sa Webmaster sa Chrome, mas sayon nimo masabtan kon giunsa sa imong mga klase ang naka-apekto sa imong mga estilo ug malikayan kining sulud sa magkasumpaki nga mga estilo ug mga hiyas.
Ang orihinal nga artikulo ni Jennifer Krynin. Gi-edit ni Jeremy Girard sa 8/7/17