𝐍𝐚𝐬𝐬𝐢𝐫𝐜𝐞𝐨

Mafunzo ya CSS - Sehemu ya Pili

Karibu tena katika mafunzo yetu ya CSS! Katika sehemu hii ya pili, tutaendelea kujifunza dhana muhimu za CSS ambazo zitakusaidia kuunda mitandao ya kisasa.

Box Model

Kila kitu kwenye ukurasa wa wavuti ni sanduku (box). Box Model inaelezea jinsi vipengele vya HTML vinavyopangwa na kubuniwa. Inajumuisha:

• Content - Yaliyomo ndani ya kipengele
• Padding - Nafasi kati ya content na border
• Border - Mipaka inayozunguka padding na content
• Margin - Nafasi nje ya border inayotenganisha kipengele na vingine

.mfano { width: 200px; padding: 20px; border: 5px solid blue; margin: 30px; }

Mfano wa Box Model

Content

Ukishaona jinsi padding, border, na margin zinavyofanya kazi.

Positioning katika CSS

Kuna aina nne kuu za positioning katika CSS:

1. Static (Chaguo-msingi)

Kipengele huwekwa kulingana na mtiririko wa kawaida wa hati.

2. Relative

Kipengele huwekwa jamaa na nafasi yake ya kawaida.

3. Absolute

Kipengele huwekwa jamaa na kizazi chake cha karibu kilicho na positioning tofauti na static.

4. Fixed

Kipengele huwekwa jamaa na dirisha la kivinjari na hukaa mahali pale hata ukikusa.

.relative { position: relative; top: 20px; left: 30px; } .absolute { position: absolute; top: 0; right: 0; } .fixed { position: fixed; bottom: 20px; right: 20px; }

Mfano wa Positioning

Static

Relative

Absolute

Fixed

Flexbox kwa Kupanga Mizani

Flexbox ni mfumo mzuri wa kupanga vipengele kwenye mtandao. Hukuruhusu kuweka vipengele kwa urahisi na usawa.

.container { display: flex; justify-content: center; /* Pangilia mlalo */ align-items: center; /* Pangilia wima */ } .item { flex: 1; /* Kila kipengele kitachukua nafasi sawa */ }

Mfano wa Flexbox

1

2

3

A

B

C

Kidokezo: Flexbox ni muhimu sana kwa kutengeneza mitandao inayoweza kubadilika (responsive) na inayofaa kwenye vifaa vyote.

Media Queries kwa Mitandao Yenye Kubadilika

Media queries hutumika kubadilisha mitindo kulingana na ukubwa wa kifaa.

/* Mitindo ya kawaida kwa madirisha makubwa */ .container { width: 80%; margin: 0 auto; } /* Mitindo kwa vipande vya tablet */ @media (max-width: 768px) { .container { width: 90%; } } /* Mitindo kwa simu janja */ @media (max-width: 480px) { .container { width: 100%; padding: 10px; } }

Pima Ukubwa wa Skrini Yako

Ukubwa wa skrini:

Badilisha ukubwa wa dirisha kuona mabadiliko

Jifunze Zaidi: Katika sehemu inayofuata, tutazungumzia kuhusu Grid, Transitions, na Animations!

© 2023 𝐍𝐚𝐬𝐬𝐢𝐫 𝐜𝐞𝐨Mafunzo ya CSS | Sehemu ya Pili