Udhëzues për formatimin e tekstit në CSS

Kur dizajnoni një faqe interneti, formatimi i tekstit është një aspekt i rëndësishëm i krijimit të një ndërfaqe tërheqëse dhe të lexueshme.

CSS ofron disa veçori që ju lejojnë të personalizoni elementë të ndryshëm të tekstit, duke përfshirë ngjyrën e shkronjave, madhësinë, familjen, shtrirjen, ndarjen dhe më shumë.

Më poshtë është një udhëzues i detajuar për secilën veti të formatimit të tekstit, së bashku me shembuj për secilën veti.

 

Ngjyra e shkronjave

Parametër: Një vlerë ngjyre, e cila mund të jetë një emër ngjyre(p.sh., red), kod hex(p.sh., "#FF0000"), vlerë RGB(p.sh., "rgb(255, 0, 0)"), ose vlerë RGBA(p.sh., "rgba(255, 0, 0, 0.5)").

p {  
  color: blue;  
}  

 

Përmasa e germave

Parametër: Një vlerë madhësie, e cila mund të jetë në pixel(p.sh., "16px"), njësi em(p.sh., "1em"), njësi rem(p.sh., "1.2rem"), njësi të gjerësisë së portës së pamjes(p.sh. "10vw"), njësitë e lartësisë së portit të pamjes(p.sh. "5vh") ose njësi të tjera.

h1 {  
  font-size: 24px;  
}  

 

Familja e shkronjave

Parametri: Një listë e familjes së shkronjave, e specifikuar në rendin e preferuar. Ju mund të specifikoni emrin e shkronjave(p.sh., Arial) ose të vendosni emrat e shkronjave që përmbajnë karaktere të veçanta në thonjëza të dyfishta(p.sh., " Times New Roman).

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

 

Pesha dhe stili i shkronjave

Parametri font-weight: normal(default), bold, bolder, lighter, ose vlera numerike nga 100 në 900.

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

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

 

Dekorimi i tekstit

Parametri: "none"(default), "underline", "overline", "line-through"  ose një kombinim vlerash të ndara me hapësira.

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

 

Rreshtimi i tekstit

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

p {  
  text-align: center;  
}  

 

Lartësia e linjës dhe kufijtë

Lartësia e linjës së parametrit: Një vlerë numerike ose një përqindje e madhësisë aktuale të shkronjave.

Marzhi i parametrit: Një vlerë matjeje, si p.sh. pikselë(px), njësi em(em), njësi rem(rem), etj.

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

 

Paraqitja e tekstit me shumë kolona

Parametri: Një numër i plotë pozitiv ose "auto"(default).

.container {  
  column-count: 2;  
}  

 

Ndryshimi i ngjyrës së tekstit në Hover

Asnjë parametër specifik, përdorni vetëm pseudo-klasën :hover.

a:hover {  
  color: red;  
}  

 

Ndryshimi i ngjyrës së tekstit në gjendje(aktiv, i vizituar)

Asnjë parametër specifik, përdorni vetëm pseudo-klasat :active  dhe :visited.

a:visited {  
  color: purple;  
}  

 

Shpresojmë që shpjegimet dhe shembujt e mësipërm t'ju kenë ndihmuar të kuptoni se si të përdorni dhe personalizoni vetitë e formatimit të tekstit në CSS për të krijuar një ndërfaqe teksti tërheqëse dhe tërheqëse në faqen tuaj të internetit.