Lihlopha le Li-ID Ho Thusa ho Eketsa CSS ea hau
Ho haha marang-rang a Websaete ea kajeno ho hloka kutloisiso e tebileng ea CSS (Li-Sheet Style Style). Tsena ke litaelo tseo u fanang ka marang-rang ho tsona ho fumana hore na li tla tsamaisoa joang fensetereng ea sebadi. U sebelisa letoto la "mekhoa" ea tokomane ea hau ea HTML e tla etsa hore ponahalo le maikutlo a hau a maqephe a hau a marang-rang a be teng.
Ho na le mekhoa e mengata ea ho sebelisa mekhoa ena e boletsoeng ka holimo ho feta tokomane, empa hangata o batla ho sebelisa setaele feela ka likarolo tse ling tse ngotsoeng, empa ha se maemo ohle a seo.
U ka boela ua batla ho etsa mokhoa oo u ka o sebelisang likarolong tse 'maloa tsa tokomane, ntle le hore u pheta molao oa mokhoa oa motho ka mong. Ho finyella mekhoa ena e lakatsoang, o tla sebelisa litšoaneleho tsa HTML le temo. Litšoaneleho tsena ke litšobotsi tsa lefats'e tse ka sebelisoang hoo e batlang e le lethathamong le leng le le leng la HTML . Seo se bolela hore ho sa tsotellehe hore na u na le lipale tsa lipale, lirapa, lihlopha, lethathamo kapa likaroloana tse ling tsa HTML tse ngotseng, u ka fetisetsa litlelaseng tsa thuto le tsebo ho u thusa ho finyella mosebetsi ona!
Likhetho tsa Sehlopha
Sehlopha se khethollang se u lumella hore u behe mekhoa e mengata ho eona ntho e le 'ngoe kapa letšoao lengolong. Ka mohlala, u ka 'na ua batla ho ba le likarolo tse itseng tsa temana ea hau e bitsitsoeng ka' mala o sa tšoaneng ho tsoa ho mangolo a mangolong. Lihlopha tsena tse totobetseng li ka ba "temoho" tseo u li behang leqepheng. U ka abela lirapa tsa hau ka lihlopha tse kang tsena:
p {mmala: # 0000ff; }}
p.alert {mmala: # ff0000; }}
Mekhoa ena e ne e tla beha 'mala oa lirapa tsohle ho blue (# 0000ff), empa serapa leha e le sefe le sebopeho sa sehlopha sa "tlhokomeliso" se ka be se ngotsoe ka bofubelu (# ff0000). Lebaka ke hore tšobotsi ea sehlopha e na le sebopeho se phahameng ho feta puso ea pele ea CSS, e sebelisang feela khetho ea tag.
Ha u sebetsa le CSS, puso e tobileng e tla feta tekanyetso e fokolang. Kahoo, ho latela mohlala ona, taelo e akaretsang e beha 'mala oa lirapa tsohle, empa molao oa bobeli, o tobileng ho feta ho feta ho lirapa tse ling feela.
Tsela ena e ka sebelisoa ka marang-rang a mang a HTML:
Serapa sena se ne se tla bontšoa ka botala, e leng se setle bakeng sa leqephe.
Serapa sena se ne se tla boela se be seputsoa.
'Me serapa sena se ne se tla bontšoa ka bofubelu kaha setho sa sehlopha se ne se tla tlola mebala e tloaelehileng ea botala ho tloha ho khetho ea setho sa setho.
Mohlala oo, mokhoa oa "p.alert" o tla sebetsa feela ho lihlopha tsa serapa tse sebelisang sehlopha seo sa "tlhokomeliso". Haeba u ne u batla ho sebelisa sehlopha seo ka likarolo tse ngata tsa HTML, u ka tlosa karolo ea HTML ho tloha tšimolohong ea mohala oa mokhoa (e-ba le bonnete ba hore u tlohe nako (.) sebakeng seo), joaloka ena:
.alert {mobala o ka morao: # ff0000;}
Hona joale sehlopha sena se fumaneha ho ntho leha e le efe e e hlokang. Karolo efe kapa efe ea HTML ea hau ea boleng ba "class" e tla fumana mokhoa ona. Ka HTML mona ka tlase, re na le serapa le sehlooho sa bobeli se sebelisang sehlopha sa "tlhokomeliso". Bobeli ba bona ba ne ba tla ba le mokokotlo-'mala oa bofubelu o thehiloeng ho CSS eo re sa tsoa e bontša.
Serapa sena se ne se tla ngoloa ka bofubelu.
H2 ena h2 e tla ba e khubelu.
Liwebsaeteng kajeno, litšobotsi tsa sehlopha li atisa ho sebelisoa lits'ebetsong tse ngata hobane li bonolo ho sebetsa le tsona ho tloha ka pono e tobileng ea hore li-ID li. U tla fumana maqephe a mangata a hona joale a HTML a tla tlatsoa ka litšobotsi tsa sehlopha, tse ling tsa tsona li pheta-pheta ka makhetlo a mangata tokomaneng le tse ling tse ka hlahang hang feela.
Selekane tsa ID
Mokhetho oa khetho o lumella hore u fane ka lebitso seterateng se itseng ntle le ho se kopanya le tag kapa karolo e 'ngoe ea HTML . E re u na le karohano karolong ea hau ea HTML e nang le tlhahisoleseding mabapi le ketsahalo.
U ka fana ka karohano ena ea ID ea "ketsahalo", 'me joale haeba u batla ho hlalosa hore na karohano e na le moeli o bophara o bophara ba 1 pixel o ngola khoutu ea hau e kang:
#event {moeli}: 1px matla # 000; }}
Bothata ba ba khethi ba ID ke hore ba ke ke ba pheta-pheta ka tatellano ea HTML. Ba tlameha ho ba ba ikhethang (o ka sebelisa ID e tšoanang maqepheng a mangata a sebaka sa hau, empa hanngoe feela ka mongolo ka mong oa HTML). Kahoo haeba u ne u e-na le liketsahalo tse 3 tseo bohle ba neng ba li hloka moeling ona, o tla hloka ho ba fa litšobotsi tsa ID tsa "event1", "event2" le "event3" le mokhoa ka mong. Ka lebaka leo, ho ka ba bonolo haholoanyane ho sebelisa tšebotsi e boletsoeng ka holimo ea "ketsahalo" le ho e sebelisa kaofela ka nako e le 'ngoe.
Bothata bo bong bo nang le litšobotsi tsa ID ke hore li na le tsebo e phahameng ho feta litšobotsi tsa sehlopha. Sena se bolela hore haeba u hloka ho ba le CSS e fetang mokhoa oa pele, ho ka ba thata ho etsa joalo haeba u itšetlehile haholo ka li-ID. Ke ka lebaka lena bahoeletsi ba bangata ba marang-rang ba tlohileng ho sebelisa li-ID molemong oa bona, esita le haeba ba ikemiselitse ho sebelisa bohlokoa boo hanngoe, 'me ho e-na le hoo ba retelehetse ho litšobotsi tse seng kae tsa sehlopha bakeng sa mefuta eohle ea mefuta.
Sebaka se seng seo ID e nang le sona se etsahalang ha u batla ho theha leqephe le nang le lihlopha tsa li-anchor. Ka mohlala, haeba u na le websaeteng ea sethala sa parallax e nang le litaba tsohle ka lekhasi le le leng le li-link tse "kenang" likarolong tse sa tšoaneng tsa leqephe leo. Sena se etsoa ho sebelisa litšoaneleho tsa ID le li-link tsa melaetsa tse sebelisang lihlopha tsena tsa anchor.
U ka feela u eketsa bohlokoa ba tšobotsi eo, e etelletsoeng ke letšoao la #, ho tšobotsi ea hau ea link, joaloka ena:
Lena ke link
Ha o totobetse kapa o amme, kgokahanyo ena e tla fihla ho karolo ea leqephe le nang le tšobotsi ena ea ID. Haeba ho se karolo e leqepheng lena e sebelisitseng boleng ba ID ena, kgokahanyo e ke ke ea etsa letho.
Hopola, haeba o batla ho hlahisa maqepheng a ho kopanya setšeng, tšebeliso ea litšoaneleho tsa ID e tla hlokoa, empa u ntse u ka ea ho lihlopha bakeng sa merero ea kakaretso ea CSS. Ena ke tsela eo ke e tšoaeang maqephe kajeno - Ke sebelisitse ba khethileng ba sehlopha ka hohle kamoo ho ka khonehang mme ke retelehela ho li-ID ha ke hloka tšebetso ea ho nka khato feela joaloka hook ea CSS empa hape e le khokahanyo ea maqephe.
Sehlooho sa pele sa Jennifer Krynin. E hlophisitsoeng ke Jeremy Girard ka la 8/9/17