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


✅ 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

  1. CSS variable huanzishwa na nini mwanzoni mwa jina lake?
    a) @
    b) --
    c) $
    d) #

  2. Jinsi gani unavyotumia variable katika CSS?
    a) var[]
    b) var()
    c) variable()
    d) use()

  3. Variable zinazozikwa katika selector gani mara nyingi hufanya ziwe globally accessible?
    a) body
    b) .class
    c) :root
    d) #id

  4. 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 kutumia default() function

  5. 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

Zoezi la Maswali

Nyuma Endelea


Umeionaje Makala hii.. ?

Nzuri            Mbaya            Save
Author: Rajabu image Tarehe: 1970-01-01 03:33:45 Topic: CSS Main: ICT File: Download PDF Views 31

Share On:

Facebook WhatsApp
Sponsored links
👉1 Simulizi za Hadithi Audio    👉2 Kitabu cha Afya    👉3 Madrasa kiganjani    👉4 Bongolite - Game zone - Play free game    👉5 Sira ya Mtume Muhammad (s.a.w)    👉6 kitabu cha Simulizi   

Post zinazofanana:

CSS - SOMO LA 7: Kutumia Fonti (Fonts) kwenye CSS

Katika somo hili utajifunza jinsi ya kudhibiti mwonekano wa maandishi kwa kutumia fonti kwenye CSS. Utajifunza jinsi ya kubadilisha aina ya fonti, ukubwa, mtindo, unene, na mpangilio wa maandishi ili yaweze kuonekana kwa mvuto na usomaji bora.

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 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 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 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 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 4: Aina za css selecto

Katika somo hili uatkwenda kujifunza aina za css selectors

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 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...