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.
📘 Utangulizi
CSS Variables ni njia ya kuhifadhi thamani ambazo zinaweza kutumika mara nyingi katika faili la CSS kwa njia rahisi na inayoruhusu kubadilika kwa haraka bila kuandika tena thamani hizo sehemu nyingi. Hii huifanya kazi na miradi mikubwa kuwa rahisi kusimamia na kurekebisha.
📚 Maudhui ya Somo
✅ 1. Kuunda CSS Variable
CSS Variables huanzishwa kwa kuandika jina la variable kuanzia na -- ndani ya selector (kawaida ndani ya :root ili ziwe globally accessible).
:root {
--main-color: #333;
--font-size: 16px;
}
✅ 2. Kutumia CSS Variable
Kutumia variable hufanywa kwa kutumia var() function.
body {
color: var(--main-color);
font-size: var(--font-size);
}
✅ 3. Faida za CSS Variables
-
Kurahisisha mabadiliko: Badilisha thamani mahali moja, inabadilisha kila sehemu inayotumia variable hiyo.
-
Kurudia-rudia: Epuka kuandika rangi au ukubwa mara nyingi.
-
Dynamic: Variables zinaweza kubadilishwa hata kupitia JavaScript.
-
Inasaidia theming: Rahisi kubadilisha mitindo kwa mandhari tofauti.
✅ 4. Mfano wa Kuongeza Variable na Kutumia
:root {
--primary-bg: #005f73;
--secondary-bg: #0a9396;
--text-color: #94d2bd;
}
header {
background-color: var(--primary-bg);
color: var(--text-color);
padding: 20px;
}
button {
background-color: var(--secondary-bg);
color: white;
border: none;
padding: 10px 20px;
}
✅ 5. Kutumia Variables na Thamani za Default
Unaweza pia kuweka thamani mbadala ukipotosha thamani ya variable.
p {
color: var(--non-existent-color, black);
}
Hii inafanya p kuwa na rangi black ikiwa --non-existent-color haipo.
✅ Hitimisho
CSS Variables ni zana muhimu sana kwa kuboresha usimamizi wa mitindo na kuwezesha ufanisi wa marekebisho kwenye miradi mikubwa ya CSS. Kutumia variables huongeza flexibility na kufanya code yako kuwa safi zaidi.
🔜 Somo Linalofuata: SOMO LA 25 - CSS Box Model
Tutajifunza kuhusu model ya kisanduku ya CSS, ambayo ni msingi wa kupanga na kuweka vipengele kwenye ukurasa.
🧠Maswali ya Kujitathmini
-
CSS variable huanzishwa na nini mwanzoni mwa jina lake?
a)@
b)--
c)$
d)# -
Jinsi gani unavyotumia variable katika CSS?
a)var[]
b)var()
c)variable()
d)use() -
Variable zinazozikwa katika selector gani mara nyingi hufanya ziwe globally accessible?
a)body
b).class
c):root
d)#id -
Unawezaje kuweka thamani mbadala katika
var()?
a) Kwa kuweka thamani ya default kama parameter ya pili
b) Kwa kuandika variable mara mbili
c) Haiwezi kuweka thamani mbadala
d) Kwa kutumiadefault()function -
Nini faida kuu ya kutumia CSS variables?
a) Kuongeza ukubwa wa faili la CSS
b) Kurahisisha marekebisho na usimamizi wa mitindo
c) Kubadilisha mitindo moja kwa moja tu kwenye HTML
d) Kutengeneza picha za CSS
Jiunge nasi WhatsApp kupata update zetu
Umeionaje Makala hii.. ?
👉1 ai web app 👉2 Kitau cha Fiqh 👉3 Madrasa kiganjani 👉4 Dua za Mitume na Manabii 👉5 Kitabu cha Afya 👉6 Simulizi za Hadithi Audio
Post zinazofanana:
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 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 21: CSS Units
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...CSS - SOMO LA 29: CSS z-index na Stacking Context
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...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 4: Aina za css selecto
Katika somo hili uatkwenda kujifunza aina za css selectors
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 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 17: Flexbox Advanced
Katika somo hili, utajifunza vipengele vya juu zaidi vya Flexbox: flex-wrap, flex-grow, flex-shrink, na flex-basis. Pia tutajifunza jinsi ya kujenga muundo wa safu (rows) na nguzo (columns) kwa kutumia Flexbox layout.
Soma Zaidi...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...