CSS માં ટેક્સ્ટ ફોર્મેટ કરવા માટેની માર્ગદર્શિકા

વેબસાઇટ ડિઝાઇન કરતી વખતે, ટેક્સ્ટનું ફોર્મેટિંગ એ આકર્ષક અને વાંચી શકાય તેવું ઇન્ટરફેસ બનાવવાનું મહત્વનું પાસું છે.

CSS અનેક ગુણધર્મો પ્રદાન કરે છે જે તમને ટેક્સ્ટના વિવિધ ઘટકોને કસ્ટમાઇઝ કરવાની મંજૂરી આપે છે, જેમાં ફોન્ટનો રંગ, કદ, કુટુંબ, ગોઠવણી, અંતર અને વધુનો સમાવેશ થાય છે.

નીચે દરેક ટેક્સ્ટ ફોર્મેટિંગ પ્રોપર્ટી પર વિગતવાર માર્ગદર્શિકા છે, દરેક મિલકત માટે ઉદાહરણો સાથે.

 

ફોન્ટ રંગ

પરિમાણ: રંગ મૂલ્ય, જે રંગ નામ(દા.ત., red), હેક્સ કોડ(દા.ત., "#FF0000"), RGB મૂલ્ય(દા.ત., "rgb(255, 0, 0)"), અથવા RGBA મૂલ્ય(દા.ત., "rgba(255, 0, 0, 0.5)").

p {  
  color: blue;  
}  

 

અક્ષર ની જાડાઈ

પરિમાણ: એક કદ મૂલ્ય, જે પિક્સેલ્સમાં હોઈ શકે છે(દા.ત., "16px"), em એકમો(દા.ત., "1em"), rem એકમો(દા.ત., "1.2rem"), વ્યુપોર્ટ પહોળાઈ એકમો(દા.ત., "10vw"), વ્યુપોર્ટ ઊંચાઈ એકમો(દા.ત., "5vh"), અથવા અન્ય એકમો.

h1 {  
  font-size: 24px;  
}  

 

ફોન્ટ કુટુંબ

પરિમાણ: એક ફોન્ટ કુટુંબ યાદી, પસંદગીના ક્રમમાં ઉલ્લેખિત. તમે ફોન્ટ નામ(દા.ત., Arial) નો ઉલ્લેખ કરી શકો છો અથવા ડબલ અવતરણ(દા.ત., " Times New Roman) માં વિશિષ્ટ અક્ષરો ધરાવતાં ફોન્ટ નામો બંધ કરી શકો છો.

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

 

ફોન્ટ વજન અને શૈલી

પરિમાણ font-weight: normal(default), bold, bolder, lighter, અથવા 100 થી 900 સુધીના આંકડાકીય મૂલ્યો.

પરિમાણ font-style: normal(default), italic.

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

 

ટેક્સ્ટ શણગાર

પરિમાણ: "none"(default), "underline", "overline", "line-through"  અથવા સ્પેસ દ્વારા વિભાજિત મૂલ્યોનું સંયોજન.

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

 

ટેક્સ્ટ સંરેખણ

પરિમાણ: "left"(default), "right", "center" or "justify".

p {  
  text-align: center;  
}  

 

રેખાની ઊંચાઈ અને માર્જિન્સ

પરિમાણ રેખા-ઊંચાઈ: આંકડાકીય મૂલ્ય અથવા વર્તમાન ફોન્ટ કદની ટકાવારી.

પરિમાણ માર્જિન: માપન મૂલ્ય, જેમ કે પિક્સેલ્સ(px), em એકમો(em), rem એકમો(rem), વગેરે.

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

 

મલ્ટીકોલમ ટેક્સ્ટ લેઆઉટ

પરિમાણ: હકારાત્મક પૂર્ણાંક અથવા "auto"(default).

.container {  
  column-count: 2;  
}  

 

હોવર પર ટેક્સ્ટનો રંગ બદલો

કોઈ ચોક્કસ પરિમાણ નથી, ફક્ત સ્યુડો-ક્લાસનો ઉપયોગ કરો :hover.

a:hover {  
  color: red;  
}  

 

રાજ્ય પર ટેક્સ્ટનો રંગ બદલો(સક્રિય, મુલાકાત લીધેલ)

કોઈ વિશિષ્ટ પરિમાણ નથી, ફક્ત સ્યુડો-ક્લાસનો ઉપયોગ કરો :active  અને :visited.

a:visited {  
  color: purple;  
}  

 

અમે આશા રાખીએ છીએ કે ઉપરોક્ત સ્પષ્ટતાઓ અને ઉદાહરણોએ તમને તમારી વેબસાઇટ પર દૃષ્ટિની આકર્ષક અને આકર્ષક ટેક્સ્ટ ઇન્ટરફેસ બનાવવા માટે CSS માં ટેક્સ્ટ ફોર્મેટિંગ ગુણધર્મોનો ઉપયોગ અને કસ્ટમાઇઝ કેવી રીતે કરવો તે સમજવામાં મદદ કરી છે.