Użu ta 'Klassijiet u IDs Style

Il-Klassijiet u l-IDs Għajnuna Estend is-CSS tiegħek

Il-bini ta 'websajts fuq il-Web tal-lum jeħtieġ għarfien profond ta' CSS (Cascading Style Sheets). Dawn huma l-istruzzjonijiet li inti tagħti websajt biex tiddetermina kif se tqassim fit-tieqa tal-browser. Inti tapplika serje ta '"stili" għad-dokument HTML tiegħek li se toħloq id-dehra tal-webpage tiegħek.

Hemm ħafna modi biex jiġu applikati dawk l-istili msemmija hawn fuq f'dokument, iżda ħafna drabi trid tuża stil fuq uħud biss mill-elementi f'dokument, iżda mhux il-każijiet kollha ta 'dak l-element.

Tista 'wkoll tkun trid toħloq stil li tista' tapplika għal diversi elementi f'dokument, mingħajr ma jkollha tirrepeti r-regola tal-istil għal kull każ individwali. Biex tikseb dawn l-istili mixtieqa, tuża l-attributi tal-klassi u tal-ID. Dawn l-attributi huma attributi globali li jistgħu jiġu applikati għal kważi kull tikketta HTML . Dan ifisser li kemm jekk inti grafika diviżjonijiet, paragrafi, links, listi jew kwalunkwe biċċa oħra ta 'HTML fid-dokument tiegħek, tista' ddawwar għall-klassi u l-attributi ID jgħinuk twettaq dan il-kompitu!

Seletturi tal-Klassi

Is-selettur tal-klassi jippermettilek li tistabbilixxi stili multipli għall-istess element jew tikketta f'dokument. Per eżempju, inti tista 'tixtieq li jkollok ċerti taqsimiet tat-test tiegħek imsejħa b'kulur differenti mill-bqija tat-test fid-dokument. Dawn is-sezzjonijiet enfasizzati jistgħu jkunu "twissija" li qed issettja fuq il-paġna. Inti tista 'tassenja l-paragrafi tiegħek ma' klassijiet bħal dan:

p {kulur: # 0000ff; }
p.alert {color: # ff0000; }

Dawn l-istili jistabbilixxu l-kulur tal - paragrafi kollha għall-blu (# 0000ff), iżda kull paragrafu b'attribut tal-klassi ta '"twissija" minflok ikun immarkat bl-aħmar (# ff0000). Dan huwa minħabba li l-attribut tal-klassi għandu speċifiċità ogħla mill-ewwel regola tas-CSS, li juża biss selettur tat-tikketta.

Meta taħdem ma 'CSS, regola aktar speċifika se tneħħi waħda inqas speċifika. Allura f'dan l-eżempju, ir-regola aktar ġenerali tistabbilixxi l-kulur tal-paragrafi kollha, iżda t-tieni regola aktar speċifika milli tissupera dak l-iffissar biss f'xi paragrafi.

Hawnhekk huwa kif dan jista 'jintuża f'xi markup HTML:

Dan il-paragrafu jintwera bil-blu, li huwa l-inadempjenza tal-paġna.

Dan il-paragrafu jkun ukoll blu.

U dan il-paragrafu jiġi muri bl-aħmar peress li l-attribut tal-klassi jissostitwixxi l-kulur blu standard mill-grafika tas-selettur tal-element.

F'dak l-eżempju, l-istil ta '"p.alert" japplika biss għal elementi ta' paragrafi li jużaw dik il-klassi ta '"twissija". Jekk int riedu tuża dik il-klassi minn elementi HTML multipli, inti sempliċement tneħħi l-element HTML mill-bidu tal- stil (sempliċement kun żgur li tħalli l-perjodu (.) fis-seħħ), bħal dan:

.alert {background-color: # ff0000;}

Din il-klassi issa hija disponibbli għal kull element li teħtieġha. Kwalunkwe biċċa ta 'HTML tiegħek li għandha valur ta' attribut tal-klassi ta '"allert" issa se tikseb dan l-istil. Fl-HTML t'hawn taħt, għandna kemm paragrafu kif ukoll intestatura livell 2 li jużaw il-klassi "allert". Dawn it-tnejn ikollhom sfond kulur aħmar ibbażat fuq is-CSS li għadna kif wera.

Dan il-paragrafu jkun miktub bl-aħmar.

U dan h2 ikun ukoll aħmar.

Fuq il-websajts illum, l-attributi tal-klassi ħafna drabi jintużaw fuq ħafna mill-elementi minħabba li huma aktar faċli biex jaħdmu minn perspettiva ta 'speċifiċità li l-IDs huma. Issib il-biċċa l-kbira tal-paġni HTML attwali li għandhom jimtlew b'attributi tal-klassi, li wħud minnhom huma ripetuti diversi drabi f'dokument u oħrajn li jistgħu jidhru darba biss.

ID Selectors

Is- selettur tal- ID jippermettilek tagħti isem għal stil speċifiku mingħajr ma tassoċjaha ma 'tikketta jew ma' element HTML ieħor . Tgħid li kellek diviżjoni fil-markup HTML tiegħek li fih informazzjoni dwar avveniment.

Tista 'tagħti lil din id-diviżjoni attribut ta' l-ID ta '"avveniment", u mbagħad jekk int riedu tiddeskrivi dik id-diviżjoni b'bordura sewda wiesgħa ta' 1 pixel tikteb kodiċi ID bħal dan:

#event {border: 1px solid # 000; }

L-isfida bl- għażla tal-ID hija li ma jistgħux jiġu ripetuti f'dokument HTML. Għandhom ikunu uniċi (tista 'tuża l-istess ID fuq diversi paġni tas-sit tiegħek, imma darba biss f'kull dokument HTML individwali). Mela jekk kellek 3 avvenimenti li kollha kienu jeħtieġu dan il-fruntiera, ikollok bżonn tagħtihom attributi ta 'ID ta' "event1", "event2" u "event3" u stil kull wieħed minnhom. Għalhekk, ikun iktar faċli li jintuża l-attribut tal-klassi msemmi hawn fuq ta '"avveniment" u l-istil minnhom kollha f'daqqa.

Sfida oħra bl- attributi ta 'l-ID hija li għandhom speċifiċità ogħla minn attributi tal-klassi. Dan ifisser li jekk ikollok bżonn ta 'CSS li tegħleb stil stabbilit qabel, jista' jkun diffiċli li tagħmel hekk jekk ibbenefikat ħafna fuq l-ID. Huwa għal din ir-raġuni li bosta żviluppaturi tal-web ħarġu mill-użu ta 'IDs fil-markup tagħhom, anke jekk huma biss beħsiebhom jużaw dak il-valur darba, u minflok irrikorrew għall-attributi tal-klassi inqas speċifiċi għal kważi l-istili kollha.

L-erja fejn l-attributi ta 'l-ID jidħlu fis-seħħ hija meta trid toħloq paġna li għandha rabtiet ta' l-ankra fil-paġna. Per eżempju, jekk għandek websajt tal-parallax stil li fiha l-kontenut kollu fuq paġna waħda b'rabtiet li "jaqbżu" għal diversi partijiet ta 'dik il-paġna. Dan isir bl-użu ta 'attributi ta' ID u links tat-test li jużaw dawn l-ankri links.

Int sempliċement iżżid il-valur ta 'dak l-attribut, preċedut mis-simbolu #, għall-attribut href tal-link, bħal dan:

Din hija r-rabta

Meta għafast jew jintmess, din ir-rabta se tiżdied fuq il-parti tal-paġna li għandha dan l-attribut ID. Jekk l-ebda element fuq il-paġna ma użat dan il-valur tal-ID, il-link ma kien jagħmel xejn.