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 am...