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.
Utangulizi
Katika HTML kila element ina tabia yake ya asili ya kuonyeshwa kwenye ukurasa. Kwa mfano, div huonyesha kama block, wakati span huonyesha kama inline. Lakini kwa kutumia display property kwenye CSS, unaweza kubadilisha tabia hiyo ili upate mpangilio unaotaka.
Uelewa wa display ni muhimu sana katika kupanga layout na kuficha au kuonyesha element kwa njia sahihi.
✅ 1. display: block
-
Element huanza kwenye mstari mpya.
-
Huchukua upana wote wa mzazi wake kwa default.
-
Mfano wa element za block:
div,p,h1-h6,section,article
div {
display: block;
}
💡 Matokeo: kila element huonekana kwenye mstari wake, kama vichwa vya habari au aya.
✅ 2. display: inline
-
Element haianzi mstari mpya.
-
Huchukua nafasi sawa na content yake.
-
Huwezi kuweka
width,height,margin-top/bottomkwa ufanisi.
span {
display: inline;
}
💡 Mfano mzuri: maneno yaliyopo ndani ya span au viungo vya a.
✅ 3. display: inline-block
-
Huchukua tabia ya block na inline kwa pamoja.
-
Huweza kuwa kwenye mstari mmoja kama inline.
-
Lakini pia unaweza kudhibiti
width,height,margin,paddingkama block.
img {
display: inline-block;
width: 150px;
height: 100px;
}
💡 Hii ni nzuri kwa element ndogo zinazohitaji ukubwa wa kudhibitiwa kama button au picha.
✅ 4. display: none
-
Huficha kabisa element kutoka kwenye ukurasa.
-
Element haionekani wala haichukui nafasi yoyote.
div {
display: none;
}
💡 Tofauti na visibility: hidden, ambapo element haionekani lakini nafasi yake inabaki.
✅ 5. ">...
Jiunge nasi WhatsApp kupata update zetu
Umeionaje Makala hii.. ?
👉1 Dua za Mitume na Manabii 👉2 Bongolite - Game zone - Play free game 👉3 kitabu cha Simulizi 👉4 Simulizi za Hadithi Audio 👉5 Kitabu cha Afya 👉6 Madrasa kiganjani
Post zinazofanana:
CSS - somo la 4: Aina za css selecto
Katika somo hili uatkwenda kujifunza aina za css selectors
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 3: syntax za css yaani sheria za uandishi wa css
Katika somo hili utakwenda kujifunza sheria za uandish wa css yaani syntax za css
Soma Zaidi...CSS - SOMO LA 12: Width, Height, Max/Min Width na Overflow
Katika somo hili, utajifunza jinsi ya kudhibiti upana (width) na urefu (height) wa elementi katika CSS. Pia utaelewa tofauti kati ya max-width, min-width, na jinsi overflow inavyodhibiti tabia ya content inayoizidi element.
Soma Zaidi...CSS - SOMO LA 29: CSS z-index na Stacking Context
Katika somo hili tutajifunza kuhusu z-index, ambayo hutumika kudhibiti ni elementi ipi ionekane juu au chini wakati kuna elementi nyingi zinazofunika sehemu moja. Pia tutajifunza kuhusu stacking context, yaani jinsi vivinjari vinavyopanga
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 21: CSS Units
Katika somo hili, utajifunza vipimo vinavyotumika kwenye CSS kama vile px, em, rem, %, vw, na vh. Vipimo hivi hutumika kuweka ukubwa wa maandishi, padding, margin, urefu, na upana wa vipengele kwenye tovuti.
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...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 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...