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 210

Share On:

Facebook WhatsApp
Sponsored links
👉1 Kitau cha Fiqh    👉2 Kitabu cha Afya    👉3 web hosting    👉4 kitabu cha Simulizi    👉5 Sira ya Mtume Muhammad (s.a.w)    👉6 Dua za Mitume na Manabii   

Post zinazofanana:

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 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 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 26: CSS Specificity (Kipaumbele cha Styles)

Katika somo hili, tutajifunza kuhusu CSS Specificity — yaani mfumo wa kipaumbele unaotumiwa na kivinjari kuchagua ni mtindo (style) upi utumike iwapo kuna migongano kati ya selectors mbalimbali. Utaelewa jinsi ya kupanga selectors zako vizuri ili kuzuia matatizo ya mitindo kutofanya kazi kama ulivyotarajia.

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 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 32: Custom Fonts na @font-face

Katika somo hili tutajifunza jinsi ya kutumia fonts za kipekee (custom fonts) katika tovuti kwa kutumia njia mbili kuu: Google Fonts na @font-face. Tutajifunza pia sababu za kutumia fonts maalum, faida zake, na jinsi ya kuzidhibiti kwenye CSS.

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 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 19: Pseudo-classes na Pseudo-elements

Katika somo hili, utajifunza kuhusu pseudo-classes kama :hover, :first-child, na :last-child, pamoja na pseudo-elements kama ::before, ::after, na ::selection. Hizi husaidia kubadili au kuongeza mitindo maalum kulingana na hali ya elementi au sehemu maalum ya elementi.

Soma Zaidi...