Ou pa limite a yon sèl klas CSS pou chak eleman.
Cascading Style Sheets (CSS) pèmèt ou defini aparans yon eleman pa akrochaj nan atribi yo ke ou aplike nan eleman sa a. Sa yo atribi ka swa ak ID oswa yon klas epi, tankou tout atribi, yo ajoute enfòmasyon itil nan eleman yo ke yo te atache a. Tou depan de ki atribi ou ajoute nan yon eleman, ou ka ekri yon seleksyon CSS pou aplike estil ki nesesè vizyèl yo ki bezwen reyalize gade nan epi santi w pou eleman sa a ak sit entènèt la kòm yon antye.
Pandan ke idantite oswa klas travay nan bi pou yo akrochaj nan yo ak règleman CSS, modèn entènèt konsepsyon metòd favè klas sou ID yo, an pati, paske yo gen mwens espesifik ak pi fasil yo travay avèk an jeneral. Wi, w ap toujou jwenn anpil sit ki itilize idantite yo, men atribi sa yo ap aplike plis ti kras pase nan tan lontan an pandan y ap klas yo te pran sou paj entènèt modèn.
Single oswa plizyè kou nan CSS?
Nan pifò ka ou ta asiyen yon atribi klas sèl nan yon eleman, men ou aktyèlman yo pa limite a sèlman yon sèl klas yo jan ou ye ak IDs. Pandan ke yon eleman ka sèlman gen yon atribi ID sèl, ou ka absoliman bay yon eleman miltip klas, epi, nan kèk ka, fè sa pral fè paj ou pi fasil style ak pi plis fleksib!
Si ou bezwen bay klas miltip nan yon eleman, ou ka ajoute klas yo anplis epi tou senpleman separe yo ak yon espas nan atribi ou.
Pa egzanp, paragraf sa a gen twa klas:
pullquote chin an tap kite "> Sa a ta dwe tèks la nan paragraf la
Sa a kouche twa klas sa yo nan tag paragraf la:
- Pullquote
- Anons Spesyal
- Left
Avi espas ki genyen ant chak youn nan valè klas sa yo. Espas sa yo se sa ki kouche yo kòm diferan, klas endividyèl elèv yo. Sa a se poutèt sa non klas pa ka gen espas nan yo, paske fè sa ta mete yo kòm klas separe.
Pou egzanp, si ou itilize "pullquote-tap-gòch" san yon espas, li ta yon valè klas, men egzanp ki anwo a, kote twa pawòl sa yo separe ak yon espas, kouche yo kòm valè endividyèl. Li enpòtan pou konprann konsèp sa a menm jan ou deside ki valè klas yo itilize nan paj ou yo.
Yon fwa ou gen valè klas ou a nan HTML, ou ka Lè sa a, bay sa yo kòm klas nan CSS ou ak aplike estil yo ou ta vle ajoute. Pa egzanp.
. pullquote {...}
.featured {...}
p.left {...}
Nan egzanp sa yo, deklarasyon CSS yo ak valè pè yo ta anndan aparèy òtopedik yo Curly, ki se ki jan estil sa yo ta dwe aplike nan selektè ki apwopriye a.
Remak - si ou mete yon klas nan yon eleman espesifik (pa egzanp, p.left), ou ka toujou itilize li kòm yon pati nan yon lis klas; Sepandan, ou dwe konnen ke li pral sèlman afekte eleman sa yo ki espesifye nan CSS la. Nan lòt mo, style p.left la ap aplike sèlman nan paragraf ak klas sa a depi selektè ou a aktyèlman li di pou aplike li nan "paragraf ak yon valè klas de 'kite'". Nan contrast, de lòt selektè nan egzanp lan pa presize yon eleman sèten, pou yo ta aplike nan nenpòt eleman ki itilize valè klas sa yo.
Avantaj nan Klas miltip
Klas miltip ka fè li pi fasil pou ajoute efè espesyal nan eleman san yo pa gen kreye yon style tout nouvo pou eleman sa a.
Pou egzanp, ou ka vle gen kapasite nan flote eleman nan bò gòch la oswa dwa byen vit. Ou ta ka ekri de klas ki te kite ak dwa ak jis flote: kite; ak flote: dwa; nan yo. Lè sa a, chak fwa ou te gen yon eleman ou bezwen flote kite, ou ta tou senpleman ajoute klas la "kite" nan lis klas li yo.
Gen yon liy amann nan mache isit la, sepandan. Sonje ke estanda entènèt dikte separasyon estil ak estrikti. Estrikti se okipe atravè HTML pandan y ap style se nan CSS.
Si dokiman HTML ou ranpli ak eleman ke tout gen non klas tankou "wouj" oswa "kite", ki se non ki dikte ki jan eleman ta dwe gade olye ke sa yo ye, w ap travèse ki liy ant estrikti ak style. Mwen eseye limite non klas semantik mwen yo otank posib pou rezon sa a.
Kou Plizyè, Semantics, ak JavaScript
Yon lòt avantaj pou itilize plizyè klas se ke li ba ou anpil posiblite entèaktivite.
Ou ka aplike nouvo klas nan eleman ki deja egziste yo lè l sèvi avèk JavaScript san yo pa retire nenpòt nan premye klas yo. Ou kapab tou itilize klas pou defini semantik yo nan yon eleman . Sa vle di ou ka ajoute sou klas adisyonèl pou defini kisa eleman sa a vle di semantik. Sa a se ki jan mikroformats ap travay.
Dezavantaj nan Klas miltip
Dezavantaj nan pi gwo lè l sèvi avèk klas miltip sou eleman ou se ke li ka fè yo yon ti jan maladwa gade nan ak jere sou tan. Li ka vin difisil pou detèmine ki estil ki afekte yon eleman epi si nenpòt ki Scripts yo afekte li. Anpil nan fondasyon ki disponib jodi a, tankou Bootstrap, fè lou itilize nan eleman ki gen plizyè kou. Kòd sa a ka jwenn soti nan men ak difisil yo travay avèk trè byen vit si ou pa pran prekosyon.
Lè ou sèvi ak plizyè kou, ou menm tou ou gen risk pou yo gen style la pou yon klas pase sou desizyon style la nan yon lòt menm si ou pa t 'gen entansyon pou sa. Lè sa a, ka fè li difisil pou evalye poukisa estil ou yo pa te aplike menm lè li parèt ke yo ta dwe.
Ou bezwen yo dwe okouran de espesifik, menm avèk atribi yo aplike nan yon sèl eleman!
Lè l sèvi avèk yon zouti tankou Zouti yo Webmaster nan Chrome, ou ka pi fasil wè kouman klas ou yo ki afekte estil ou ak evite pwoblèm sa a nan konfli Styles ak atribi.
Original atik pa Jennifer Krynin. Edited by Jeremy Girard sou 8/7/17