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.
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.
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;
}
Kutumia variable hufanywa kwa kutumia var()
function.
body {
color: var(--main-color);
font-size: var(--font-size);
}
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.
: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;
}
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.
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.
Tutajifunza kuhusu model ya kisanduku ya CSS, ambayo ni msingi wa kupanga na kuweka vipengele kwenye ukurasa.
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 kutumia default()
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.. ?
Katika somo hili, tutajifunza kuhusu CSS functions muhimu zinazotumika kufanya mahesabu, kuweka vipimo vya kisasa vinavyobadilika kulingana na hali ya kifaa, na kutumia variables. Tutazingatia functions kama: calc(), clamp(), var(), min(), max(), na mwishoni tutajifunza jinsi ya kutengeneza custom function kwa kutumia variables.
Soma Zaidi...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...Katika somo hili, tutajifunza kipengele kipya kinachoitwa if() function ndani ya CSS, kilichoanza kupatikana kwenye toleo la Chrome 137. Kipengele hiki kinaturuhusu kuandika mantiki ya masharti moja kwa moja kwenye property ya CSS, bila kutumia JavaScript wala media query zilizotawanyika. Tutajifunza pia aina za queries: media(), supports(), na style() pamoja na matumizi yao ya kivitendo kwenye tovuti. Mwisho, tutaeleza kwa kina kuhusu pointer na any-pointer.
Soma Zaidi...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...Katika somo hili uatkwenda kujifunza aina za css selectors
Soma Zaidi...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...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...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...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...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...