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.
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.
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.
display: inline
Element haianzi mstari mpya.
Huchukua nafasi sawa na content yake.
Huwezi kuweka width
, height
, margin-top/bottom
kwa ufanisi.
span {
display: inline;
}
💡 Mfano mzuri: maneno yaliyopo ndani ya span
au viungo vya a
.
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
, padding
kama block.
img {
display: inline-block;
width: 150px;
height: 100px;
}
💡 Hii ni nzuri kwa element ndogo zinazohitaji ukubwa wa kudhibitiwa kama button au picha.
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.
Jiunge nasi WhatsApp kupata update zetu
Umeionaje Makala hii.. ?
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...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...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...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...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...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...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...katika somo hili utajifunza jinsi ya ku install css kwenye ukurasa wa html
Soma Zaidi...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...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...