Darasa na vitambulisho Msaada Kuongeza CSS yako
Kujenga tovuti kwenye Mtandao wa leo unahitaji uelewa wa kina wa Majarida ya CSS (Cascading Style Sheets). Hizi ni maagizo ambayo hutoa tovuti ili kuamua jinsi itakavyopangwa katika kivinjari cha kivinjari. Unaomba mfululizo wa "mitindo" kwenye hati yako ya HTML ambayo itaunda kuangalia na kujisikia ya ukurasa wako wa wavuti.
Kuna njia nyingi za kutumia mitindo iliyotajwa hapo juu kwenye waraka, lakini mara nyingi unataka kutumia mtindo kwa baadhi tu ya vipengele kwenye hati, lakini si matukio yote ya kipengele hicho.
Unaweza pia kutengeneza mtindo ambao unaweza kuomba kwa vipengele kadhaa kwenye waraka, bila ya kurudia utawala wa mtindo kwa mfano wa kila mtu. Ili kufikia mitindo hii inayotaka, utatumia sifa za darasa na ID ya HTML. Tabia hizi ni sifa za kimataifa ambazo zinaweza kutumiwa karibu na kila tambulisho la HTML. Hiyo ina maana kwamba kama wewe ni styling migawanyiko, aya, viungo, orodha au yoyote ya vipande vingine vya HTML katika hati yako, unaweza kurejea kwa sifa za darasa na ID kwa kukusaidia kukamilisha kazi hii!
Wachaguzi wa Hatari
Mchezaji wa darasa anakuruhusu kuweka mitindo nyingi kwa kipengele sawa au lebo katika hati. Kwa mfano, huenda unataka kuwa na sehemu fulani za maandishi yako zimeitwa kwa rangi tofauti kutoka kwa maandiko yote katika waraka. Sehemu hizi zilizotajwa zinaweza kuwa "tahadhari" ambayo unaweka kwenye ukurasa. Unaweza kugawa aya yako na madarasa kama haya:
p {rangi: # 0000ff; }
p.alert {rangi: # ff0000; }
Mitindo hii ingeweka rangi ya aya zote kwa bluu (# 0000ff), lakini fungu lolote na sifa ya darasa ya "tahadhari" ingekuwa badala yake kwa kupigwa kwa rangi nyekundu (# ff0000). Hii ni kwa sababu sifa ya darasa ina maalum zaidi kuliko utawala wa kwanza wa CSS, ambayo hutumia tu chaguo la tag.
Wakati wa kufanya kazi na CSS, utawala maalum zaidi utazidisha moja maalum. Kwa hiyo, kwa mfano huu, utawala wa jumla unaweka rangi ya aya zote, lakini pili, utawala maalum zaidi kuliko unaozidi kuweka tu kwenye aya.
Hapa ni jinsi hii inaweza kutumika kwa baadhi ya markup HTML:
Kifungu hiki kitaonyeshwa kwa rangi ya bluu, ambayo ni default kwa ukurasa.
Kifungu hiki pia kitakuwa katika bluu.
Na aya hii itaonyeshwa kwa rangi nyekundu tangu sifa ya darasa ingeweza kuandika rangi ya bluu ya kawaida kutoka kwenye kipengele cha kuchagua kipengele.
Katika mfano huo, mtindo wa "p.alert" utatumika tu kwa vipengele vya kifungu ambacho hutumia darasa hilo "tahadhari". Ikiwa unataka kutumia darasa hilo katika vipengele vingi vya HTML, ungependa tu kuondoa kipengele cha HTML tangu mwanzo wa simu ya simu (tu kuwa na uhakika wa kuondoka kipindi (.) mahali), kama hii:
.alert {background-color: # ff0000;}
Darasa hili sasa linapatikana kwa kipengele chochote kinachohitaji. Kipande chochote cha HTML yako ambacho kina thamani ya sifa ya darasa ya "tahadhari" sasa itapata style hii. Katika HTML hapa chini, tuna fungu na ngazi ya kichwa cha 2 ambazo hutumia darasa "tahadhari". Wote wawili watakuwa na rangi ya background ya nyekundu kulingana na CSS tuliyoonyesha tu.
Aya hii ingeandikwa katika nyekundu.
Na h2 hii pia itakuwa nyekundu.
Kwenye tovuti leo, sifa za darasa hutumiwa mara nyingi kwa vipengele vingi kwa sababu ni rahisi kufanya kazi na mtazamo maalum wa kuwa ID ni. Utapata sehemu nyingi za sasa za HTML ili kujazwa na sifa za darasa, ambazo baadhi yake hurudiwa mara nyingi katika waraka na wengine ambao huweza kuonekana mara moja tu.
Uchaguzi wa ID
Mchaguzi wa ID hukuruhusu kutoa jina kwa mtindo maalum bila kujihusisha na lebo au kipengele kingine cha HTML . Sema ulikuwa na mgawanyiko kwenye markup yako ya HTML ambayo ina habari kuhusu tukio.
Unaweza kutoa mgawanyiko huu kitambulisho cha ID ya "tukio", na kisha ikiwa ungependa kutaja mgawanyiko huo na mpaka wa nyeusi pana 1-pixel uandika msimbo wa ID kama hii:
#event {mpaka: 1px imara # 000; }
Changamoto na wachunguzi wa ID ni kwamba hawawezi kurudiwa katika hati ya HTML. Lazima wawe wa kipekee (unaweza kutumia ID sawa kwenye kurasa nyingi za tovuti yako, lakini mara moja tu katika kila hati ya HTML). Kwa hiyo ikiwa ungekuwa na matukio 3 ambayo yote yanahitaji mpaka huu, utahitaji kuwapa sifa za ID ya "event1", "event2" na "event3" na mtindo kila mmoja wao. Kwa hivyo, itakuwa vigumu zaidi kutumia sifa ya darasa iliyotajwa hapo juu ya "tukio" na kuandika kila kitu mara moja.
Changamoto nyingine na sifa za ID ni kwamba wana sifa maalum kuliko sifa za darasa. Hii inamaanisha kwamba ikiwa unahitaji kuwa na CSS ambayo inapindua mtindo uliowekwa hapo awali, inaweza kuwa vigumu kufanya hivyo ikiwa umejiunga na vitambulisho vingi sana. Ni kwa sababu hii kwamba watengenezaji wengi wa wavuti wameondoka kutoka kwa kutumia vitambulisho kwenye markup yao, hata kama wanatarajia kutumia thamani hiyo mara moja, na badala yake wamegeuka kwenye sifa za darasa maalum kwa karibu mitindo yote.
Eneo moja ambalo sifa za ID huingia ni wakati unataka kuunda ukurasa una viungo vya ukurasa wa nanga. Kwa mfano, ikiwa una tovuti ya style ya parallax ambayo ina maudhui yote kwenye ukurasa mmoja na viungo vinavyotumia "kuruka" kwenye sehemu mbalimbali za ukurasa huo. Hii imefanywa kwa kutumia sifa za ID na viungo vya maandishi vinazotumia viungo hivi vya nanga.
Ungeongeza tu thamani ya sifa hiyo, iliyoandikwa na ishara #, kwa sifa ya href ya kiungo, kama hii:
Hii ni kiungo
Unapobofya au kuguswa, kiungo hiki kitaruka kwenye sehemu ya ukurasa una sifa ya ID hii. Ikiwa hakuna kipengee kwenye ukurasa kilichotumia thamani hii ya ID, kiungo hakitachukua chochote.
Kumbuka, ikiwa unataka kuunda ukurasa unaounganisha kwenye tovuti, utumiaji wa sifa za ID utahitajika, lakini bado unaweza kugeuka kwenye madarasa kwa madhumuni ya jumla ya CSS. Hii ndio jinsi ninavyoweka kurasa za leo - Niliwachagua wapiga kura wa darasa iwezekanavyo na tu kurejea kwa vitambulisho wakati ninahitaji sifa ya kutenda si tu kama ndoano kwa CSS lakini pia kama kiungo cha ukurasa.
Makala ya awali na Jennifer Krynin. Iliyotengenezwa na Jeremy Girard mnamo 8/9/17