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 Madrasa kiganjani 👉3 Kitabu cha Afya 👉4 Kitau cha Fiqh 👉5 Dua za Mitume na Manabii 👉6 Simulizi za Hadithi Audio
Post zinazofanana:
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 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 15: Float na Clear katika CSS
Katika somo hili utajifunza jinsi ya kutumia float ili kupanga elementi upande wa kushoto (left) au kulia (right). Pia utajifunza jinsi ya kutumia clear kuondoa athari za float na kuhakikisha layout yako inabaki thabiti.
Soma Zaidi...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 22: CSS Transition na Animation
Katika somo hili, tutajifunza jinsi ya kuleta miondoko na harakati kwenye tovuti kwa kutumia CSS Transitions na Animations. Hii itasaidia kuboresha muonekano na matumizi ya tovuti.
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 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 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 23: Uelewa Zaidi wa CSS Animation na Transition
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...CSS - SOMO LA 20: Media Queries na Responsive Design
Katika somo hili, utajifunza jinsi ya kutumia media queries kwa ajili ya kutengeneza tovuti zinazojibadilisha kulingana na ukubwa wa skrini. Tutazungumzia @media rules, breakpoints, na dhana ya mobile-first design.
Soma Zaidi...