Mwongozo wa Kuunda Maandishi katika CSS

Wakati wa kuunda tovuti, uundaji wa maandishi ni kipengele muhimu cha kuunda kiolesura cha kuvutia na kinachoweza kusomeka.

CSS hutoa sifa kadhaa zinazokuruhusu kubinafsisha vipengele mbalimbali vya maandishi, ikiwa ni pamoja na rangi ya fonti, saizi, familia, upatanishi, nafasi, na zaidi.

Ufuatao ni mwongozo wa kina juu ya kila sifa ya uumbizaji wa maandishi, pamoja na mifano kwa kila sifa.

 

Rangi ya herufi

Kigezo: Thamani ya rangi, ambayo inaweza kuwa jina la rangi(km, red), msimbo wa hex(kwa mfano, "#FF0000"), thamani ya RGB(km, "rgb(255, 0, 0)"), au thamani ya RGBA(km., "rgba(255, 0, 0, 0.5)").

p {  
  color: blue;  
}  

 

Ukubwa wa herufi

Kigezo: Thamani ya saizi, ambayo inaweza kuwa katika pikseli(kwa mfano, "16px"), vitengo vya em(km, "1em"), vitengo vya rem(km, "1.2rem"), vitengo vya upana wa kituo cha kutazama(kwa mfano, "10vw"), vitengo vya urefu wa kituo cha kutazama(kwa mfano, "5vh"), au vitengo vingine.

h1 {  
  font-size: 24px;  
}  

 

Familia ya Fonti

Kigezo: Orodha ya familia ya fonti, iliyobainishwa katika mpangilio unaopendelea. Unaweza kubainisha jina la fonti(kwa mfano, Arial) au kuambatanisha majina ya fonti yaliyo na herufi maalum katika nukuu mbili(kwa mfano, " Times New Roman).

body {  
  font-family: Arial, sans-serif;  
}  

 

Uzito wa herufi na Mtindo

Kigezo font-weight: normal(default), bold, , au thamani bolder za lighter nambari kutoka 100 hadi 900.

Kigezo font-style: normal(default), italic.

em {  
  font-style: italic;  
}  
  
strong {  
  font-weight: bold;  
}  

 

Mapambo ya maandishi

Kigezo: "none"(default), "underline", "overline", "line-through"  au mchanganyiko wa thamani zilizotenganishwa na nafasi.

a {  
  text-decoration: underline;  
}  
  
del {  
  text-decoration: line-through;  
}  

 

Mpangilio wa Maandishi

Kigezo "left"(default), "right", "center" or "justify":.

p {  
  text-align: center;  
}  

 

Urefu wa Mstari na Pembezoni

Urefu wa mstari wa kigezo: Thamani ya nambari au asilimia ya saizi ya sasa ya fonti.

Pambizo la kigezo: Thamani ya kipimo, kama vile pikseli(px), vizio vya em(em), vizio vya rem(rem), n.k.

p {  
  line-height: 1.5;  
  margin-bottom: 10px;  
}  

 

Mpangilio wa Maandishi ya safu wima nyingi

Kigezo: Nambari kamili chanya au "auto"(default).

.container {  
  column-count: 2;  
}  

 

Mabadiliko ya Rangi ya Maandishi kwenye Hover

Hakuna kigezo maalum, tumia tu pseudo-class :hover.

a:hover {  
  color: red;  
}  

 

Mabadiliko ya Rangi ya Maandishi kwenye Jimbo(inafanya kazi, imetembelewa)

Hakuna kigezo maalum, tumia tu madarasa ya uwongo :active  na :visited.

a:visited {  
  color: purple;  
}  

 

Tunatumahi kuwa maelezo na mifano iliyo hapo juu imekusaidia kuelewa jinsi ya kutumia na kubinafsisha sifa za uumbizaji wa maandishi katika CSS ili kuunda kiolesura cha maandishi cha kuvutia na cha kuvutia kwenye tovuti yako.