Nu nuju teu dugi ka kelas CSS tunggal per unsur.
Cascading Style cadar (CSS) ngidinan Anjeun pikeun nangtukeun pintonan unsur sacara hooking kana atribut nu dilarapkeun ka unsur éta. atribut ieu tiasa boh jeung ID atanapi kelas hiji sarta, kawas sagala atribut, aranjeunna nambahkeun inpo mantuan kana elemen anu aranjeunna meungkeut. Gumantung kana nu atribut Anjeun nambahkeun hiji unsur, anjeun tiasa nulis pamilihan CSS panawaran gaya visual nu dipikabutuh nu diperlukeun pikeun ngahontal katingal jeung ngarasa keur nu unsur jeung ramatloka sakabéhna.
Bari boh Gajah Mungkur atanapi kelas dianggo keur kaperluan hooking kana poto eta sareng aturan CSS, métode desain web modern ni'mat kelas ngaliwatan Gajah Mungkur, dina bagian, sabab kirang husus sarta gampang pikeun digawe sareng sakabéh. Sumuhun, Anjeun masih bakal manggihan loba situs nu ngagunakeun Gajah Mungkur, tapi maranéhanana atribut ayeuna keur dilarapkeun langkung sparingly ti nu geus kaliwat bari kelas geus direbut kaca web modern.
Kelas hiji atawa langkung di CSS?
Dina kalolobaan kasus Anjeun bakal ngadaptarkeun atribut kelas hiji nepi ka unsur, tapi anjeun sabenerna teu dugi ka ngan hiji kelas maranéhna cara anjeun kalawan Gajah Mungkur. Bari unsur ukur bisa boga atribut ID tunggal, nu pancen tiasa masihan unsur sababaraha kelas na, dina sababaraha kasus, lakukeun sangkan baris nyieun kaca anjeun gampang gaya na leuwih fleksibel!
Lamun perlu napelkeun sababaraha kelas hiji unsur, Anjeun bisa nambahkeun kelas tambahan sarta saukur misahkeun sareng spasi dina atribut Anjeun.
Contona, ayat ieu boga tilu kelas:
"pullquote
diulas ditinggalkeun"> Ieu bakal jadi téks paragraf
Ieu susunan tilu golongan handap dina tag ayat:
- Pullquote
- diulas
- ditinggalkeun
Perhatikeun spasi antara unggal salah sahiji nilai kelas ieu. Maranéhanana spasi aya naon susunan aranjeunna nepi salaku béda, kelas individu. Ieu ogé naha ngaran kelas teu tiasa gaduh rohangan di éta, kusabab ngalakukeun kitu bakal nyetel poto eta jadi kelas misah.
Contona, lamun dipake "pullquote-diulas-kénca" tanpa spasi, éta bakal jadi salah sahiji nilai kelas, tapi dina conto di luhur, dimana tilu kecap nu dipisahkeun ku rohangan, susunan aranjeunna salaku nilai individu. Kadé ngartos Konsep ieu mutuskeun on nu nilai kelas ngagunakeun on webpages Anjeun.
Sakali anjeun boga nilai kelas anjeun dina HTML, anjeun lajeng bisa napelkeun ieu salaku kelas di CSS anjeun sarta nerapkeun gaya maneh bakal hoyong tambah. Salaku conto.
.pullquote {...}
.featured {...}
p.left {...}
Dina conto ieu, anu declarations CSS jeung nilai pasang bakal jero braces Curly, nu kumaha jalma gaya bakal dilarapkeun kana pamilihan luyu.
Catetan - lamun disetél kelas pikeun unsur husus (contona, p.left), anjeun masih bisa make eta salaku bagian tina daptar kelas; kumaha oge, jadi sadar yen eta wungkul bakal mangaruhan maranéhanana elemen nu dieusian di CSS di. Kalayan kecap séjén, dina gaya p.left hijina baris dilarapkeun ka ayat kalawan kelas ieu saprak pamilihan anjeun sabenerna nyebutkeun panawaran ka "ayat sareng nilai kelas tina 'tinggaleun'". Sacara jelas, nu sejenna dua selectors dina conto teu nangtukeun unsur nu tangtu, sangkan maranéhna bakal dilarapkeun ka sagala unsur anu ngagunakeun eta nilai kelas.
Kaunggulan tina langkung ti kelas
Sababaraha kelas bisa nyieun leuwih gampang pikeun nambahkeun épék husus ka elemen tanpa ngabogaan nyieun gaya sakabeh anyar pikeun unsur éta.
Contona, anjeun bisa jadi hoyong miboga kamampuh ngambang elemen ka kenca atawa ka katuhu gancang. Anjeun bisa nulis dua kelas kenca sareng ka katuhu jeung ngan ngambang: ditinggalkeun; tur ngambang: katuhu; di antarana. Lajeng, iraha wae nu kagungan unsur nu peryogi ngambang ditinggalkeun, anjeun bakal saukur nambahan kelas "tinggaleun" pikeun daptar kelas na.
Aya garis rupa leumpang ka dieu, salawasna. Inget yen standar web ngarahkeunnana nu separation tina gaya jeung struktur. Struktur ieu diatur liwat HTML bari gaya aya dina CSS.
Mun dokumen HTML anjeun ngeusi elemen nu sagala boga ngaran kelas kawas "beureum" atawa "tinggaleun", nu mangrupakeun ngaran nu ngarahkeunnana kumaha elemen kudu néangan tinimbang naon aranjeunna, anjeun nyebrang yén garis antara struktur jeung gaya. Kuring coba ngawatesan ngaran kelas non-semantis kuring saloba mungkin pikeun alesan ieu.
Sababaraha kelas, Semantik, jeung JavaScript
Kauntungan sejen migunakeun sababaraha kelas téh nya éta méré Anjeun loba kemungkinan interactivity langkung.
Anjeun tiasa nerapkeun kelas anyar pikeun elemen aya maké JavaScript tanpa nyoplokkeun salah sahiji kelas awal. Anjeun oge bisa make kelas keur ngartikeun semantik tina unsur . Ieu ngandung harti bisa nambahan kana kelas tambahan keur ngartikeun naon unsur nu hartina semantically. Ieu kumaha Microformats jalan.
Kalemahan langkung ti kelas
Nu disadvantage pangbadagna pikeun ngagunakeun sababaraha kelas on elemen anjeun téh nya éta bisa nyieun éta bit unwieldy ka kasampak di jeung ngatur kana waktu. Ieu bisa jadi hésé pikeun nangtukeun naon anu gaya keur mangaruhan unsur sarta lamun sagala Aksara anu impacting eta. Loba frameworks sadia kiwari, kawas Bootstrap, sangkan pamakéan beurat unsur kalawan sababaraha kelas. Kode nu bisa kaluar tina leungeun na teuas digawekeun ku pisan gancang lamun henteu ati.
Lamun anjeun make sababaraha kelas, Anjeun ogé ngajalankeun résiko ngabogaan gaya pikeun hiji kelas override gaya sejen malah lamun teu diniatkeun keur ieu. Ieu lajeng bisa nyieun hésé pikeun angka kaluar naha gaya Anjeun teu keur dilarapkeun sanajan nembongan yen aranjeunna kedah.
Anjeun kudu jadi sadar spésifisitas, sanajan jeung atribut dilarapkeun ka nu salah unsur!
Ku ngagunakeun alat anu kawas éta parabot webmaster dina Chrome, anjeun tiasa leuwih gampang tingali kumaha kelas anjeun anu mangaruhan gaya anjeun sarta ulah aya masalah ieu gaya conflicting jeung atribut.
Aslina artikel ku Jennifer Krynin. Diédit ku Jeremy Girard on 8/7/17