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, , அல்லது எண் மதிப்புகள் 100 முதல் 900 வரை bolder. lighter

அளவுரு 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 இல் உரை வடிவமைப்பு பண்புகளை எவ்வாறு பயன்படுத்துவது மற்றும் தனிப்பயனாக்குவது என்பதைப் புரிந்துகொள்ள மேலே உள்ள விளக்கங்களும் எடுத்துக்காட்டுகளும் உங்களுக்கு உதவியிருக்கும் என்று நம்புகிறோம்.