CSS - SOMO LA 8: Upambaji wa Maandishi (Text Styling)

? Utangulizi

Baada ya kujifunza jinsi ya kudhibiti fonti kwenye CSS, hatua inayofuata ni kupamba maandishi ili yawe na mvuto na usomaji bora. Upambaji huu hufanywa kwa kutumia properties za CSS kama text-decoration, text-shadow, letter-spacing, word-spacing, na text-align. Hizi husaidia kufanya maandishi yaonekane kwa mtindo maalum au wa kipekee.

? Maudhui ya Somo

✅ 1. text-decoration

Inatumika kuweka mistari kwenye maandishi kama vile mstari wa chini, juu, au mstari wa kupitisha kati.

a {
  text-decoration: underline;
}

Chaguzi:

• none – Hakuna mistari

• underline – Mistari ya chini ya maandishi

• overline – Mistari ya juu ya maandishi

• line-through – Mistari katikati ya maandishi

✅ 2. text-shadow

Inatumika kuongeza kivuli kwenye maandishi.

h1 {
  text-shadow: 2px 2px 5px gray;
}

Format:
text-shadow: horizontal vertical blur-radius color;

• horizontal – umbali wa kivuli upande wa kulia au kushoto

• vertical – umbali wa kivuli juu au chini

• blur-radius – kipenyo cha kivuli

• color – rangi ya kivuli

✅ 3. letter-spacing

Hudhibiti nafasi kati ya kila herufi.

p {
  letter-spacing: 2px;
}

• Thamani hasi hupunguza nafasi

• Thamani chanya huongeza nafasi

✅ 4. word-spacing

Hudhibiti nafasi kati ya maneno.

p {
  word-spacing: 10px;
}

✅ 5. text-align

Hudhibiti mpangilio wa maandishi katika mstari.

div {
  text-align: center;
}

Chaguzi:

• left – Maandishi yanapangwa upande wa kushoto

• right – Maandishi yanapangwa upande wa kulia

• center – Maandishi yanapangwa katikati

• justify – Maandishi yanapangwa kwa usawa, na nafasi kati ya maneno kuongezwa ili kufikia upana wa element

✅ 6. white-space

Hudhibiti jinsi nafasi nyeupe (nafasi ambazo hazimna maandishi) zinavyotumika kwenye maandishi.

pre {
  white-space: pre;
}

Chaguzi:

• normal – Inaruhusu maandishi kuvunjika kwenye mistari ili isizidi upana wa element

• nowrap – Inazuia maandishi kuvunjika mstari mpya hata yakiisha nafasi

• pre – Inahifadhi nafasi nyeupe na uandishi wa maandishi kama ulivyo kwenye HTML

• pre-line – Inahifadhi nafasi nyeupe lakini inaruhusu maandishi kuvunjika mstari mpya

• pre-wrap – Inahifadhi nafasi nyeupe na inaruhusu maandishi kuvunjika mstari mpya ili yajaze upana wa element

✅ Hitimisho

Katika somo hili tumejifunza jinsi ya kupamba maandishi kwa kutumia CSS. Umepata kuelewa jinsi ya kuweka mistari, kivuli, nafasi kati ya herufi na maneno, na kupanga maandishi kwa mpangilio unaofaa. Haya yote huongeza mvuto wa tovuti na kuboresha usomaji.

? Somo Linalofuata: SOMO LA 9 - Margin na Padding

Tutajifunza tofauti kati ya margin na padding, jinsi ya kuzitumia, na jinsi zinavyohusiana na layout ya tovuti.

? Maswali ya Kujitathmini

1. Property ipi hutumika kuweka kivuli kwenye maandishi?
   a) box-shadow
   b) font-shadow
   c) text-shadow
   d) shadow-text

2. Ili kuweka mstari wa chini kwenye maandishi, unatumia ipi?
   a) text-style: underline;
   b) text-decoration: underline;
   c) line-type: down;
   d) font-line: bottom;

3. letter-spacing hudhibiti nini?
   a) Nafasi kati ya mistari
   b) Nafasi kati ya maneno
   c) Nafasi kati ya herufi
   d) Nafasi kati ya paragraphs

4. Ili kupanga maandishi katikati ya element, unatumia ipi?
   a) text-align: middle;
   b) text-position: center;
   c) align-text: center;
   d) text-align: center;

5. white-space: nowrap; inafanya nini?
   a) Maandishi hayakatwi mstari mpya hata yakiisha nafasi
   b) Inapunguza spacing kati ya herufi
   c) Inasababisha maandishi yaandikwe kwa herufi kubwa
   d) Inazuia kivuli kuonekana