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.
Inatumika kuchagua aina ya fonti ya maandishi.
p {
font-family: Arial, sans-serif;
}
Unashauriwa kuandika fonti zaidi ya moja, ya kwanza ikiwa unayoitaka zaidi, nyingine kama backup.
Generic families: serif
, sans-serif
, monospace
, cursive
, fantasy
Inadhibiti ukubwa wa maandishi.
h1 {
font-size: 30px;
}
Unaweza kutumia px
, em
, rem
, %
, n.k.
Mfano: font-size: 1.5em;
Inaonyesha unene wa maandishi (boldness).
strong {
font-weight: bold;
}
Vingine: normal
, lighter
, 100
hadi 900
Inatumika kubadilisha mtindo wa maandishi, kwa mfano italiki.
em {
font-style: italic;
}
Chaguzi:
normal
italic
oblique
Inadhibiti nafasi kati ya mstari na mstari (msitari mmoja hadi mwingine).
p {
line-height: 1.6;
}
Inasaidia maandishi yasibane sana au kuwa na nafasi nzuri ya kusomeka.
Inatumika kubadilisha he">...
Jiunge nasi WhatsApp kupata update zetu
Umeionaje Makala hii.. ?
Katika somo hili, tutajifunza kuhusu @import — amri inayotumika kuingiza faili moja la CSS ndani ya jingine. Tutaona namna ya kuitumia, faida zake, hasara zake, na tofauti kati yake na njia mbadala ya <link> ndani ya HTML.
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...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...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...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 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 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, 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...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 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...