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.
Vizuri! Tuendelee na:
📘 Utangulizi
Borders ni mipaka inayoizunguka element yoyote ya HTML. Unaweza kuitumia kuonyesha vizuri sehemu maalumu, kutenganisha vipande vya maandishi au picha, au kufanya design iwe ya kuvutia. CSS hukupa uwezo mkubwa wa kubadilisha muonekano wa border kwa njia nyingi tofauti.
✅ 1. border Property (shorthand)
Hii ni njia fupi ya kuweka border. Unachanganya aina ya mstari, unene, na rangi.
div {
border: 2px solid green;
}
-
2px= unene -
solid= aina ya mstari -
green= rangi
✅ 2. Aina za Mistari ya Border (border-style)
p {
border-style: solid;
}
Aina zinazopatikana:
-
none– hakuna border -
solid– mstari wa kawaida -
dashed– mstari wa vipande -
dotted– mistari ya nukta -
double– mistari miwili -
groove– mstari unaoonekana kama unaingia ndani -
ridge– mstari unaotoka juu kama reli -
inset– mstari unaoonekana kuingia ndani -
outset– mstari unaoonekana kutoka juu
✅ 3. border-width
Inatumika kudhibiti unene wa border.
p {
border-width: 5px;
}
Unaweza pia kuweka tofauti kwa kila upande:
p {
border-width: 1px 2px 3px 4px;
/* top right bottom left */
}
✅ 4. border-color
Inadhibiti rangi ya border.
p {
border-color: red;
}">Jiunge nasi WhatsApp kupata update zetu
help_outlineZoezi la Maswali
Umeionaje Makala hii.. ?
👉1 Madrasa kiganjani 👉2 Tafasiri ya Riyadh Swalihina 👉3 Simulizi za Hadithi Audio 👉4 kitabu cha Simulizi 👉5 Sira ya Mtume Muhammad (s.a.w) 👉6 Dua za Mitume na Manabii
Post zinazofanana:
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 28: CSS Timing Functions
Katika somo hili tutajifunza kuhusu CSS Timing Functions, ambazo hutumika kudhibiti kasi na mtiririko wa transition na animation. Utaelewa tofauti kati ya ease, linear, ease-in, ease-out, ease-in-out, pamoja na jinsi ya kutumia cubic-bezier() kwa kudhibiti mwendo wa mabadiliko kwenye elementi.
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...CSS - SOMO LA 18: Grid Layout
Katika somo hili, utajifunza misingi ya CSS Grid Layout, mfumo wenye nguvu wa kupanga vipengele katika safu (rows) na nguzo (columns). Tutachambua display: grid, pamoja na grid-template-columns, grid-template-rows, gap, grid-column, na grid-row.
Soma Zaidi...CSS - SOMO LA 25: CSS Shorthand Properties
Katika somo hili tutajifunza kwa kina kuhusu CSS Shorthand Properties — ni nini, jinsi zinavyofanya kazi, faida zake, na mifano mbalimbali ya kutumia shorthand kuandika CSS kwa njia fupi na bora zaidi.
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 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 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 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 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...