Casharkaan, waxaan baran doonaa sida loo xakameeyo qaabka qoraalka iyo farta (typography) CSS-ka. Typography-ga wanaagsani wuxuu kor u qaadaa akhrisnaanta iyo quruxda bogga.
1. Nooca Farta (Font Family)
Sifada font-family waxay qeexdaa nooca farta la isticmaalayo.
body {
font-family: Arial, Helvetica, sans-serif;
}
Waxaa fiican in la isticmaalo stack (liis ah) noocyo faro ah — haddii mid uu maqan yahay, midka xiga ayaa la isticmaalaa.
Noocyada guud (Generic families):
serif: Faro leh “cago” — sida Times New Roman.sans-serif: Faro aan lahayn “cago” — sida Arial, Helvetica.monospace: Faro cabbir kasta oo isku mid ah — sida Courier New, JetBrains Mono.
2. Cabbirka Farta (Font Size)
font-size waxay qeexdaa cabbirka qoraalka. Halbeegyada caadiga ah:
h1 {
font-size: 32px; /* pixels */
}
p {
font-size: 1rem; /* root em — waa cabbirka guud */
}
small {
font-size: 0.875em; /* em — waxay ku xirantahay waalidka */
}
Talo: Isticmaal rem marka suurtagal ah — waa mid waafaqsan (responsive).
3. Miisaanka Farta (Font Weight)
font-weight waxay qeexdaa dhumucda xarfaha:
h1 {
font-weight: bold; /* same as 700 */
}
p {
font-weight: normal; /* same as 400 */
}
strong {
font-weight: 900; /* ugu dhumuc weyn */
}
Qiimaha wuxuu u dhexeeyaa 100 (khafiif) ilaa 900 (dhumuc weyn).
4. Hanaanka Qoraalka (Text Alignment)
text-align waxay qeexdaa sida qoraalka loo hagaajiyo:
h1 {
text-align: center; /* dhex-marnaan */
}
p {
text-align: left; /* bidix (caadiga ah) */
}
blockquote {
text-align: right; /* midig */
}
.justified {
text-align: justify; /* labada dhinac */
}
5. Qaababka Qoraalka oo Dhamaystiran
article {
font-family: 'Georgia', serif;
font-size: 1.125rem;
font-weight: 400;
line-height: 1.7; /* kala dheeraynta sadarka */
text-align: left;
color: #333;
}
Layli (Practice)
- Abuur xeer
bodyah oo isticmaalaya fontsans-serifcabbir 16px. - Ka dhig cinwaannada
<h1>inay ahaadaan 2.5rem, dhumuc (bold) iyo dhex-marnaan (center). - Ka dhig cutubyada
<p>inay leeyihiin kala-dheerayn (line-height) 1.8. - Tijaabi faro kala duwan: serif, sans-serif, monospace.
Sii wadashada: Casharka xigta, waxaan baran doonaa qaabka sanduuqa (the box model)!