CSS - somo la 4: Aina za css selecto
Katika somo hili uatkwenda kujifunza aina za css selectors
Aina za selector
Katika css selectors unaweza kuzigawa katika makundi ma nne abayo ni kama:-
- Element selectors
- Class selectors
- Id selectors
- Group selectos
- Universal selector
1. Element selectors
Hizi ni zile selector ambazo zinatarget element za html, kama vile heading kwa <h1>, paragraph kwa <p>, bolding kwa <b> na kuendelea.
b{color: red;
font-family: "Times New Roman";
text-align: center;
}
Hii imetagget b
2. Class selectors
Hizi hutumika wakati ambapo unataka ku target element zaidi ya moja. Unapotumia class selector internal css na external css hazitaweza kufanya kazi katika element husika tu na sio kwa parent element ya hiyo child element. Hii ni nzuri sana kwa kuwa haiwezi kuathiri element nyinginezo kwani haifanyi kazi mpaka iitwe.
Uandishi wa class
Kwanza utaweka nukta yaani period (.) ama doti ilifuatiwa na jina la class likifuatiwa na mabano{} ambapo ndani ya mabano hayo ndipo utaweka code za css. Mfano tunatengeneza claaa tutakayoiita muhimu hii itakuwa na style hizi: rangi nyekundu, font 200%, font-family arial
No.muhimu{
font-size: 200%;
font-family: Arial;
color: red;
}
Ili kuweza kuitumia class hiyo kwenye element unayo target utaiitwa kwa kuanza kuandika neno class likifuatiwa na alama ya = likufuatiwa na alama za kunukuu, ndani yake weka jina la class.
<p class="muhimu">Karibu bongoclass</p>
Class hiyo unaweza kuitumia katika element yeyote ile unayohitaji iwe na style hiyo. Na hakuna kikomo juu ya matumiazi yake. Jambo la kuzingatia ni kuwa class itaathiriwa na parent style. Kwa mfano kwenye <body> tuliweka text background colo iwe red, sasa hiyo background color itaendelea kwenye class yetu lamda na sisi kwenye class tu set background ntingine.
Pia zingatia kuwa jina la class halitakiwi kuanza na namba ama space (empty space)
3. ID selectors
Hizi hutumika pale unapo target element moja tu. Element inaweza kuwa na class zaidi ya Moja, lak...
Umeionaje Makala hii.. ?
Share On:
👉1 Sira ya Mtume Muhammad (s.a.w) 👉2 Bongolite - Game zone - Play free game 👉3 Simulizi za Hadithi Audio 👉4 Madrasa kiganjani 👉5 Dua za Mitume na Manabii 👉6 ai web app
Post zinazofanana:
CSS - somo la 34: if() Condition katika CSS
Katika somo hili, tutajifunza kipengele kipya kinachoitwa if() function ndani ya CSS, kilichoanza kupatikana kwenye toleo la Chrome 137. Kipengele hiki kinaturuhusu kuandika mantiki ya masharti moja kwa moja kwenye property ya CSS, bila kutumia JavaScript wala media query zilizotawanyika. Tutajifunza pia aina za queries: media(), supports(), na style() pamoja na matumizi yao ya kivitendo kwenye tovuti. Mwisho, tutaeleza kwa kina kuhusu pointer na any-pointer.
Soma Zaidi...CSS - SOMO LA 7: Kutumia Fonti (Fonts) kwenye CSS
Katika somo hili utajifunza jinsi ya kudhibiti mwonekano wa maandishi kwa kutumia fonti kwenye CSS. Utajifunza jinsi ya kubadilisha aina ya fonti, ukubwa, mtindo, unene, na mpangilio wa maandishi ili yaweze kuonekana kwa mvuto na usomaji bora.
Soma Zaidi...CSS - SOMO LA 26: CSS Specificity (Kipaumbele cha Styles)
Katika somo hili, tutajifunza kuhusu CSS Specificity — yaani mfumo wa kipaumbele unaotumiwa na kivinjari kuchagua ni mtindo (style) upi utumike iwapo kuna migongano kati ya selectors mbalimbali. Utaelewa jinsi ya kupanga selectors zako vizuri ili kuzuia matatizo ya mitindo kutofanya kazi kama ulivyotarajia.
Soma Zaidi...CSS - SOMO LA 24: CSS Variables (Custom Properties)
Katika somo hili, tutajifunza kuhusu CSS Variables, au Custom Properties. Utajifunza jinsi ya kuunda, kuitumia, na faida za kutumia variables katika CSS ili kuweka msimamizi mzuri wa rangi, ukubwa, na mitindo mingine ya kurudia-rudia.
Soma Zaidi...CSS - SOMO LA 31: CSS Filters (blur, brightness, contrast.)
Katika somo hili tutajifunza kuhusu CSS Filters — mitindo inayotumika kuhariri mwonekano wa picha, video, au elementi nyingine kwa kuongeza athari kama blur, brightness, contrast, grayscale, na nyinginezo. Hii huifanya tovuti kuwa ya kisasa, ya kuvutia, na yenye mwingiliano mzuri.
Soma Zaidi...CSS - SOMO LA 23: Uelewa Zaidi wa CSS Animation na Transition
Somo hili linakuletea ufahamu wa kina juu ya CSS Transitions na Animations, likifafanua vipengele vyake muhimu, matumizi, na namna ya kutumia properties mbalimbali za animation kwa ufanisi katika kurahisisha muonekano na mtumiaji wa tovuti.
Soma Zaidi...