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. ">...
Download App Yetu
Jifunze zaidi, na wasiliana nasi ukiwa na App yetu. Bofya hapa chini kuipakua sasa!
Umeionaje Makala hii.. ?
👉1 kitabu cha Simulizi 👉2 Madrasa kiganjani 👉3 Bongolite - Game zone - Play free game 👉4 Simulizi za Hadithi Audio 👉5 Kitau cha Fiqh 👉6 Kitabu cha Afya
Post zinazofanana:
CSS - somo la 2: Jinsi ya ku weka code za css kwenye HTML
katika somo hili utajifunza jinsi ya ku install css kwenye ukurasa wa html
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 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 1: Maana ya CSS, kazi zake na historia yake
Katika somo hili utakwenda kujifunza maana ya CSS, pia nitakujulisha kazi zake. Mwisho utatambuwa historia ya CSS toka kuanzishwa.
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 11: Mitindo ya Border (Border Styles)
Katika somo hili, utajifunza jinsi ya kudhibiti mipaka (borders) ya vipengele kwa kutumia CSS. Tutajifunza namna ya kuweka unene wa border, rangi, aina ya mstari, na pia jinsi ya kutumia border kwa upande mmoja tu.
Soma Zaidi...
CSS - SOMO LA 10: Box Model katika CSS
Katika somo hili utajifunza muundo wa boksi (Box Model) katika CSS. Box model ni mfumo wa msingi wa kupanga vipengele katika ukurasa wa HTML, ukiwa na sehemu kuu nne: content, padding, border, na margin.
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 5: Njia tano zinazotumika kuweka rangi kwenye css
Katika somo hili utajifunza aina tano za kuweka rangi kw akutumia css
Soma Zaidi...
CSS - somo la 4: Aina za css selecto
Katika somo hili uatkwenda kujifunza aina za css selectors
Soma Zaidi...