Tsela ea ho Sebelisa Lihlopha tse ngata tsa CSS ka Element Single

Ha u felle feela ho sehlopha se le seng sa CSS ka ntho e itseng.

Li-Sheet Style Style (CSS) li u lumella hore u hlalose ponahalo ea sebopeho ka ho kenyelletsa litšobotsi tseo u li sebelisang ho seo. Litšoaneleho tsena li ka ba tse nang le ID kapa sehlopheng 'me, joaloka litšobotsi tsohle, li eketsa tlhahisoleseding e thusang likarolong tseo li khomaretsoeng ho tsona. Ho itšetlehile ka hore na ke tšobotsi efe eo u e kenyelletsang ho eona, u ka ngola mo khethi oa CSS hore u sebelise mekhoa e hlokahalang e bonts'ang e hlokahalang ho finyella ho shebahala le ho ikutloa ka ntlha eo le websaeteng ka kakaretso.

Le hoja li-ID kapa lihlopha li sebetsa ka morero oa ho li kenyelletsa ka melao ea CSS, mekhoa ea kajeno ea libopeho tsa marang-rang e rata lihlopha ho feta li-ID, karolo e itseng, hobane ha li na tse tobileng le tse bonolo ho sebetsa le ka kakaretso. E, u ntse u tla fumana libaka tse ngata tse sebelisang li-ID, empa litšobotsi tseo li ntse li sebelisoa ka mokhoa o fokolang ho feta nakong e fetileng ha lihlopha li nkile maqephe a mehleng ea kajeno.

Lihlopha tse le 'ngoe kapa tse ngata ka CSS?

Maemong a mangata u ne u tla beha tšobotsi e le 'ngoe ho sehlopha, empa ha u felle feela ho sehlopha se le seng feela ka tsela eo u nang le li-ID. Le hoja karolo e ka ba le tšobotsi e le 'ngoe feela ea ID, u ka fana ka lihlopha tse ngata tsa' mele 'me, maemong a mang, ho etsa joalo ho tla etsa hore leqephe la hau le be bonolo haholoanyane le ho fetoha haholoanyane!

Haeba o hloka ho fana ka lihlopha tse ngata ho sehlopha, o ka eketsa lihlopha tse eketsehileng 'me u li arole feela ka sebaka sa hau.

Ka mohlala, serapa sena se na le lihlopha tse tharo:

pullquote e hlahisitsoeng ka letsohong le letšehali "> Ena e tla ba temana ea serapa

Sena se beha lihlopha tse tharo tse latelang serapeng sa serapa:

  • Pullquote
  • E kentse
  • Ka ho le letšehali

Hlokomela libaka pakeng tsa e 'ngoe le e' ngoe ea bohlokoa ba sehlopha sena. Libaka tseo ke tsona tse li khethang e le lihlopha tse fapaneng. Hona ke kahoo mabitso a sehlopha a ke keng a ba le libaka ho bona, hobane ho etsa joalo ho tla ba beha lihlopha tse fapaneng.

Ka mohlala, haeba u ne u sebelisa "pullquote-e bontšitsoeng-e letšehali" ntle le sebaka, e tla be e le ea boleng bo le bong, empa mohlala o ka holimo, moo mantsoe ana a mararo a arohanngoa le sebaka, a ba beha e le litekanyetso tsa motho ka mong. Ke habohlokoa ho utloisisa mohopolo ona ha u ntse u etsa qeto ea hore na ke litekanyetso life tsa sehlopha tseo u lokelang ho li sebelisa maqepheng a hau a marang-rang.

Hang ha u se u e-na le sehlopha sa hau sa bohlokoa ka HTML, u ka ba fa likarolo ho CSS ea hau 'me u sebelise mekhoa eo u ka ratang ho e eketsa. Ka mohlala.

.pullquote {...}
.feetsed {...}
p.left {...}

Mehlala ena, litlhaloso tsa CSS le lipatlisiso tsa bobeli li ka ba ka hare ho li-curly braces, e leng mokhoa oo mefuta eo e neng e tla sebelisoa ho khetho e nepahetseng.

Tlhokomeliso - ha u beha sehlopha ho se itseng (mohlala, p.left), o ntse o ka e sebelisa e le karolo ea lenane la lihlopha; leha ho le joalo, hlokomela hore e tla ama feela lintlha tseo tse hlalositsoeng ho CSS. Ka mantsoe a mang, mokhoa oa p.left o tla sebetsa feela ho lirapa le sehlopha sena ho tloha ha mo khethi oa hau a bolela hore o tla e sebelisa "lirapa tse nang le bohlokoa ba sehlopha sa 'letšehali'". Ka lehlakoreng le leng, baokameli ba babeli ba mehlala ha ba hlalosetse ntho e itseng, kahoo ba tla sebetsa ho ntho leha e le efe e sebelisang litekanyetso tseo tsa sehlopha.

Melemo ea lihlopha tse ngata

Lihlopha tse ngata li ka nolofalletsa ho eketsa liphello tse khethehileng ho lihlopha ntle le ho ba le mokhoa o mocha oa mofuta oo.

Ka mohlala, u ka 'na ua batla ho ba le bokhoni ba ho phahamisa likarolo ho ea ho le letšehali kapa ka potlako. U ka 'na ua ngola lihlopha tse peli tse tsamaeang le ho le letona ka ho fofa feela: ho le letšehali; le float: ho le letona; ho bona. Joale, neng le neng ha u e-na le ntho eo u lokelang ho e phahamisa ka letsohong le letšehali, u ka eketsa sehlopha sa "letšehali" lenaneng la sehlopha sa lona.

Ho na le mohala o motle oa ho tsamaea mona, leha ho le joalo. Hopola hore litekanyetso tsa marang-rang li etsa hore ho be le karohano ea setaele le sebopeho. Mohaho o sebetsoa ka HTML ha mokhoa o ntse o le CSS.

Haeba tokomane ea hau ea HTML e tletse likarolo tseo bohle ba nang le mabitso a lihlopha tse kang "khubelu" kapa "ho le letšehali", e leng mabitso a laolang hore na likarolo li shebahala joang ho e-na le hore na li hokae, u tšela moeli ona pakeng tsa mohaho le mokhoa. Ke leka ho fokotsa mabitso a sehlopha sa ka sa semantic ka hohle kamoo ho khonehang ka lebaka lena.

Lihlopha tse ngata, Semantics, le JavaScript

Molemo o mong oa ho sebelisa lihlopha tse ngata ke hore o u fa menyetla e mengata ea ho sebelisana.

U ka sebelisa lihlopha tse ncha ho lihlopha tse teng ho sebelisa JavaScript ntle le ho tlosa lihlopha tsa pele. U ka boela ua sebelisa lihlopha ho hlalosa li- semantics tsa karolo . Sena se bolela hore o ka eketsa lihlopha tse eketsehileng ho hlalosa hore na seo se bolela eng ka mokhoa oa semantically. Ena ke tsela eo Microformats e sebetsang ka eona.

Likotsi tsa Lihlopha Tse Ngata

Ntho e kholo ka ho fetisisa ea ho sebelisa lihlopha tse 'maloa likarolong tsa hau ke hore e ka etsa hore ba se ke ba hlola ba shebahala ba bile ba laola nako. Ho ka 'na ha e-ba thata ho fumana hore na ke mefuta efe e amang karolo e itseng le haeba mangolo a mangolo a e ama. Mekhoa e mengata e fumanehang kajeno, joaloka Bootstrap, sebelisa haholo likarolo tse nang le lihlopha tse ngata. Khoutu eo e ka tsoa ka ntle mme e thata ho sebetsa ka potlako ha o sa hlokomele.

Ha o sebelisa lihlopha tse ngata, o boetse o beha kotsing ea ho ba le mokhoa oa sehlopha se le seng ho feta mokhoa oa e mong esita le haeba u ne u sa ikemisetsa ho etsa sena. Sena se ka etsa hore ho be thata ho fumana hore na ke hobane'ng ha mekhoa ea hau e sa sebelisoe le ha e bonahala eka e lokela ho e sebelisoa.

U lokela ho tseba hantle, esita le litšobotsi tse sebelisitsoeng ho ntho e le 'ngoe!

Ka ho sebelisa sesebelisoa sa lisebelisoa tsa Webmaster ho Chrome, u ka bona habonolo hore na litlelase tsa hau li ama mekhoa ea hau joang le ho qoba bothata bona ba mekhoa le litšoaneleho tse loantšanang.

Sehlooho sa pele sa Jennifer Krynin. E hlophisitsoeng ke Jeremy Girard ka la 8/7/17