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. Kulinganisha kwa Haraka
| Aina | Mstari Mpya | Width/Height Inaweza Kuwekwa? | Huonyeshwa? |
|---|---|---|---|
block |
✔... |
Umeionaje Makala hii.. ?
Share On:
👉1 Tafasiri ya Riyadh Swalihina 👉2 Sira ya Mtume Muhammad (s.a.w) 👉3 Simulizi za Hadithi Audio 👉4 ai web app 👉5 Kitabu cha Afya 👉6 kitabu cha Simulizi
Post zinazofanana:
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 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 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 4: Aina za css selecto
Katika somo hili uatkwenda kujifunza aina za css selectors
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 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...