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, lakini haiwezi kuwa na Id zaidi ya Moja.
Pia id huzingatiwa mwanzo kuliko class wakati ukurasa wa wavuti unapofunguliwa kwenye browser.
Aw
">...Jiunge nasi WhatsApp kupata update zetu
Umeionaje Makala hii.. ?
Share On:
👉1 web hosting 👉2 Madrasa kiganjani 👉3 Bongolite - Game zone - Play free game 👉4 kitabu cha Simulizi 👉5 Sira ya Mtume Muhammad (s.a.w) 👉6 Simulizi za Hadithi Audio
Post zinazofanana:
CSS - somo la 6: Kuweka Background kwenye HTML kwa kutumia CSS
Katika somo hili, utajifunza jinsi ya kudhibiti muonekano wa sehemu ya nyuma (background) ya HTML element kwa kutumia CSS. Utaweza kuongeza rangi, picha, kuweka picha zisirudiwarudiwe, na hata kusogeza picha kwenye maeneo tofauti ya ukurasa.
Soma Zaidi...CSS - SOMO LA 30: CSS Functions – calc(), clamp(), var(), min(), max() na Custom Functions
Katika somo hili, tutajifunza kuhusu CSS functions muhimu zinazotumika kufanya mahesabu, kuweka vipimo vya kisasa vinavyobadilika kulingana na hali ya kifaa, na kutumia variables. Tutazingatia functions kama: calc(), clamp(), var(), min(), max(), na mwishoni tutajifunza jinsi ya kutengeneza custom function kwa kutumia variables.
Soma Zaidi...CSS - SOMO LA 16: Flexbox Basics
Katika somo hili, utajifunza msingi wa mfumo wa Flexbox unaotumika kupanga elementi kwa usahihi ndani ya kontena. Utajifunza kuhusu display: flex;, pamoja na properties muhimu kama justify-content, align-items, flex-direction, na gap.
Soma Zaidi...CSS - SOMO LA 13: Display Property
Katika somo hili utajifunza kuhusu property muhimu ya CSS inayoitwa display, ambayo huamua jinsi element inavyoonyeshwa kwenye ukurasa. Tutachambua aina kuu za display: block, inline, inline-block, na none.
Soma Zaidi...CSS - SOMO LA 27: Kutumia @import Katika CSS
Katika somo hili, tutajifunza kuhusu @import — amri inayotumika kuingiza faili moja la CSS ndani ya jingine. Tutaona namna ya kuitumia, faida zake, hasara zake, na tofauti kati yake na njia mbadala ya <link> ndani ya HTML.
Soma Zaidi...CSS - SOMO LA 19: Pseudo-classes na Pseudo-elements
Katika somo hili, utajifunza kuhusu pseudo-classes kama :hover, :first-child, na :last-child, pamoja na pseudo-elements kama ::before, ::after, na ::selection. Hizi husaidia kubadili au kuongeza mitindo maalum kulingana na hali ya elementi au sehemu maalum ya elementi.
Soma Zaidi...Jinsi ya kumsaidia Mtoto mdogo aliyekabwa na kitu kooni
Mfano wa kitu kinachoweza kumaba mtoto kooni ni kama chagula kigumu, pesa ya sarafu, kijiwe na mengineyo. Endapo hili litataokea msaada wa haraka unahitajika kwa ulazima.
Soma Zaidi...CSS - SOMO LA 32: Custom Fonts na @font-face
Katika somo hili tutajifunza jinsi ya kutumia fonts za kipekee (custom fonts) katika tovuti kwa kutumia njia mbili kuu: Google Fonts na @font-face. Tutajifunza pia sababu za kutumia fonts maalum, faida zake, na jinsi ya kuzidhibiti kwenye CSS.
Soma Zaidi...CSS - SOMO LA 8: Upambaji wa Maandishi (Text Styling)
Katika somo hili, utajifunza mbinu mbalimbali za kubadilisha muonekano wa maandishi kwa kutumia CSS, kama vile kupamba maandishi kwa mistari, kivuli, nafasi kati ya herufi, na mpangilio wa maneno.
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...