Int mhux limitat għal klassi CSS waħda għal kull element.
Folji ta 'l-Istil Cascading (CSS) jippermettulek tiddefinixxi l-apparenza ta' element billi tgħaqqad l-attributi li inti tapplika għal dak l-element. Dawn l-attributi jistgħu jkunu jew ID jew klassi u, bħall-attributi kollha, huma jżidu informazzjoni utli għall-elementi li huma marbuta magħhom. Jiddependi fuq liema attribut inti żid ma 'element, tista' tikteb selettur CSS biex tapplika l-istili viżwali meħtieġa li huma meħtieġa biex tikseb il-ħarsa u l-idea għal dak l-element u l-websajt kollha kemm hi.
Filwaqt li l-IDs jew il-klassijiet jaħdmu bl-iskop li jintrabtu magħhom mar-regoli tas-CSS, metodi moderni ta 'web disinn jiffavorixxu klassijiet fuq IDs, parzjalment, għaliex huma inqas speċifiċi u aktar faċli biex jaħdmu flimkien. Iva, xorta se ssib bosta siti li jużaw ID, iżda dawk l-attributi qed jiġu applikati b'mod aktar kajman milli fl-imgħoddi filwaqt li l-klassijiet ħadu paġni web moderni.
Klassijiet Uniċi jew Multipli f'CSS?
Fil-biċċa l-kbira tal-każijiet inti tassenja attribut ta 'klassi waħda għal element, imma int attwalment mhumiex limitati għal klassi waħda biss huma mod kif qed tuża ID. Filwaqt li element jista 'jkollu biss attribut ta' ID waħdieni, inti tista 'assolutament tagħti element ta' klassijiet multipli u, f'xi każijiet, tagħmel hekk tagħmel il-paġna tiegħek eħfef għall-istil u ħafna aktar flessibbli!
Jekk għandek bżonn tassenja klassijiet multipli għal element, tista 'żżid il-klassijiet addizzjonali u sempliċement tisseparahom bi spazju fl-attribut tiegħek.
Per eżempju, dan il-paragrafu għandu tliet klassijiet:
pullquote dehru mix-xellug "> Dan ikun it-test tal-paragrafu
Dan jistabbilixxi t-tliet klassijiet li ġejjin fuq it-tikketta tal-paragrafu:
- Pullquote
- Dehru
- Xellug
Avviż tal-ispazji bejn kull wieħed minn dawn il-valuri tal-klassi. Dawk l-ispazji huma dawk li jistabbilixxuhom bħala klassijiet individwali differenti. Dan huwa wkoll għaliex l-ismijiet tal-klassi ma jistgħux ikollhom spazji fihom, għax hekk jagħmluhom jistabbilixxuhom bħala klassijiet separati.
Pereżempju, jekk użajt "pullquote-featured left" mingħajr spazju, ikun valur ta 'klassi waħda, iżda l-eżempju ta' hawn fuq, fejn dawn it-tliet kelmiet huma separati bi spazju, jiffissawhom bħala valuri individwali. Huwa importanti li nifhmu dan il-kunċett kif tiddeċiedi fuq liema valuri tal-klassi tuża fuq il-paġni web tiegħek.
Ladarba jkollok il-valuri tal-klassi tiegħek f'HTML, tista 'mbagħad tassenjahom bħala klassijiet fis-CSS tiegħek u tapplika l-istili li trid iżżid. Pereżempju.
.pullquote {...}
.featured {...}
p.left {...}
F'dawn l-eżempji, id-dikjarazzjonijiet tas-CSS u l-pari tal-valuri jkunu ġewwa ċ-ċingi tal-kaboċċi, li huma kif dawk l-istili jiġu applikati għas-selettur xieraq.
Nota - jekk tissettja klassi għal element speċifiku (per eżempju, p.left), xorta tista 'tużaha bħala parti minn lista ta' klassijiet; madankollu, tkun konxju li se taffettwa biss dawk l-elementi li huma speċifikati fis-CSS. Fi kliem ieħor, l-istil p.left japplika biss għal paragrafi b'din il-klassi peress li s-selettur tiegħek fil-fatt jgħid li japplikah għal "paragrafi b'valur ta 'klassi ta'" xellug ". Min-naħa l-oħra, iż-żewġ seletturi l-oħra fl-eżempju ma jispeċifikawx ċertu element, għalhekk ikunu japplikaw għal kwalunkwe element li juża dawk il-valuri tal-klassi.
Vantaġġi ta 'Klassijiet Multipli
Klassijiet multipli jistgħu jagħmluha eħfef biex iżidu effetti speċjali ma 'elementi mingħajr ma jkollhom joħolqu stil ġdid sħiħ għal dak l-element.
Per eżempju, inti tista 'tixtieq li jkollok il-kapaċità li żżomm l-elementi float fuq ix-xellug jew fuq il-lemin malajr. Int tista 'tikteb żewġ klassijiet ix-xellug u l-lemin bi ftit float: left; u float: right; fihom. Imbagħad, kull meta kellek element li għandek bżonn biex tħalli x-xellug, inti sempliċiment iżżid il-klassi "xellug" mal-lista tal-klassi tagħha.
Madankollu hemm linja multa biex timxi hawn. Ftakar li l-istandards tal-web jiddettaw is-separazzjoni tal-istil u l-istruttura. L-istruttura hija ttrattata permezz tal-HTML filwaqt li l-istil jinsab fis-CSS.
Jekk id-dokument HTML tiegħek jimtela b'elementi li kollha għandhom ismijiet tal-klassi bħal "aħmar" jew "xellug", li huma ismijiet li jiddettaw kif l-elementi għandhom jidhru aktar milli x'inhuma, qed taqsam dik il-linja bejn l-istruttura u l-istil. Jiena nipprova jillimita l-ismijiet ta 'klassi mhux semantika kemm jista' jkun għal din ir-raġuni.
Klassijiet Multipli, Semantika u JavaScript
Vantaġġ ieħor għall-użu ta 'klassijiet multipli huwa li jagħtik ħafna aktar possibbiltajiet ta' interattività.
Tista 'tapplika klassijiet ġodda għal elementi eżistenti billi tuża JavaScript mingħajr ma tneħħi xi waħda mill-klassijiet inizjali. Tista 'wkoll tuża klassijiet biex tiddefinixxi s- semantika ta' element . Dan ifisser li tista 'żżid fuq klassijiet addizzjonali biex tiddefinixxi dak li jfisser dak l-element b'mod semantiku. Dan huwa kif jaħdem il-Mikroformati.
Żvantaġġi ta 'Klassijiet Multipli
L-akbar żvantaġġ għall-użu ta 'klassijiet multipli fuq l-elementi tiegħek huwa li jista' jagħmilhom daqsxejn diffiċli biex wieħed iħares u jimmaniġġja maż-żmien. Jista 'jkun diffiċli li jiġi ddeterminat liema stili qed jaffettwaw xi element u jekk xi skripts ikollhom impatt fuqha. Ħafna mill-oqfsa disponibbli llum, bħal Bootstrap, jagħmlu użu qawwi ta 'elementi b'ħafna klassijiet. Dak il-kodiċi jista 'joħroġ mill-idejn u diffiċli biex jaħdem malajr ħafna jekk ma kontx bir-reqqa.
Meta tuża klassijiet multipli, ukoll ir-riskju li jkollok l-istil għal klassi waħda tissupera l-istil ta 'ħadd ieħor anke jekk ma jkollokx il-ħsieb għal dan. Dan allura jista 'jagħmilha diffiċli biex insemmu għaliex l-istili tiegħek mhumiex qed jiġu applikati anke meta jidher li għandhom.
Għandek tkun taf bl-ispeċifiċità, anke bl-attributi applikati għal dak l-element wieħed!
Bl-użu ta 'għodda bħall-għodod tal-Webmaster fil-Chrome, tista' tara aktar faċilment kif il-klassijiet tiegħek qed jaffettwaw l-istili tiegħek u tevita din il-problema ta 'stili u attributi konfliġġenti.
Artikolu oriġinali minn Jennifer Krynin. Editjat minn Jeremy Girard fit-8/7/17