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.
? Utangulizi
Katika CSS, kila element ya HTML huonekana kama sanduku. Hili sanduku lina sehemu nne zinazowezesha kupanga muonekano na nafasi ya element hiyo. Hii inaitwa CSS Box Model. Kuelewa box model ni jambo la msingi sana kwa yeyote anayetaka kuwa mbunifu bora wa mtandao, kwani inasaidia kupangilia vyema vipengele vya ukurasa kwa usahihi na ufanisi.
✅ 1. Vipengele vya Box Model
CSS box model ina sehemu zifuatazo:
1. Content
-
Hiki ni kile kilichoandikwa au kuwekwa kwenye element (maandishi, picha, nk).
-
Urefu na upana wa element huanzia hapa.
2. Padding
-
Nafasi kati ya content na border.
-
Huongeza nafasi ya ndani ya boksi.
p {
padding: 20px;
}
3. Border
-
Ukuta unaozunguka element.
-
Unaweza kuupa rangi, unene, na mtindo.
p {
border: 2px solid black;
}
4. Margin
-
Nafasi kati ya element moja na nyingine.
-
Hutoa nafasi ya nje ya element.
p {
margin: 30px;
}
✅ 2. Muundo wa Mchoro
|----------------------------------|
| margin |
| |----------------------------| |
| | border | |
| | |----------------------| | |
| | | padding | | |
| | | [ content here ] | | |
| | |----------------------| | |
| |----------------------------| |
|----------------------------------|
✅ 3. box-sizing Property
Kwa kawaida, upana na urefu wa element hupimwa kutoka kwenye content pe">...
Jiunge nasi WhatsApp kupata update zetu
help_outlineZoezi la Maswali
Umeionaje Makala hii.. ?
Share On:
👉1 Sira ya Mtume Muhammad (s.a.w) 👉2 Kitau cha Fiqh 👉3 Madrasa kiganjani 👉4 Tafasiri ya Riyadh Swalihina 👉5 Dua za Mitume na Manabii 👉6 Kitabu cha Afya
Post zinazofanana:
CSS - SOMO LA 31: CSS Filters (blur, brightness, contrast.)
Katika somo hili tutajifunza kuhusu CSS Filters — mitindo inayotumika kuhariri mwonekano wa picha, video, au elementi nyingine kwa kuongeza athari kama blur, brightness, contrast, grayscale, na nyinginezo. Hii huifanya tovuti kuwa ya kisasa, ya kuvutia, na yenye mwingiliano mzuri.
Soma Zaidi...CSS - SOMO LA 14: Position Property
Katika somo hili utajifunza kuhusu property ya position katika CSS, ambayo hutumika kuamua jinsi element inavyowekwa ndani ya ukurasa. Tutajifunza aina tano kuu za position: static, relative, absolute, fixed, na sticky.
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 24: CSS Variables (Custom Properties)
Katika somo hili, tutajifunza kuhusu CSS Variables, au Custom Properties. Utajifunza jinsi ya kuunda, kuitumia, na faida za kutumia variables katika CSS ili kuweka msimamizi mzuri wa rangi, ukubwa, na mitindo mingine ya kurudia-rudia.
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 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 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 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 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 33: CSS Frameworks
Katika somo hili tutajifunza kuhusu CSS frameworks mbalimbali zinazosaidia kuharakisha uundaji wa mitindo kwenye tovuti. Tutazungumzia frameworks maarufu kama W3.CSS, Bootstrap, Google Fonts, na nyinginezo, faida, matumizi, na tofauti zao.
Soma Zaidi...