picha

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

div {
  display: block;
}

? Matokeo: kila element huonekana kwenye mstari wake, kama vichwa vya habari au aya.


✅ 2. display: inline

span {
  display: inline;
}

? Mfano mzuri: maneno yaliyopo ndani ya span au viungo vya a.


✅ 3. display: inline-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

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 ✔...
Ingia sasa ili uweze kusoma makala hii yote.

Zoezi la Maswali

Nyuma Endelea


Umeionaje Makala hii.. ?

       
Author: Rajabu image Tarehe: 2025-06-23 19:29:30 Topic: CSS Main: Masomo File: Download PDF Views 715

Share On:

Share follows: 0 | Unique share links followed: 0
Sponsored links
👉1 Bongolite - Game zone - Play free game     👉2 kitabu cha Simulizi     👉3 Kitau cha Fiqh     👉4 Sira ya Mtume Muhammad (s.a.w)     👉5 Simulizi za Hadithi Audio     👉6 Madrasa kiganjani    

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 9: Margin na Padding

Katika somo hili utajifunza tofauti kati ya margin na padding, kazi ya kila moja, jinsi ya kuzipima, na jinsi zinavyotumika kudhibiti nafasi ndani na nje ya elementi kwenye ukurasa wa HTML.

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 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 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 4: Aina za css selecto

Katika somo hili uatkwenda kujifunza aina za css selectors

Soma Zaidi...