අකුරු හැඩ ගැන්වීම – CSS Sinhala Tutorial 6

CSS වල තවත් එක් වැදගත් අංගයක් තමයි වෙබ් පිටුවක ඇති අකුරු හැඩ ගැන්වීම.

css_text

Text Color

color යන ප්‍රොපටි එක CSS වලදී වර්ණ දැක්වීම සඳහා යොදා ගැනෙනවා.

CSS තුළ මූලිකවම වර්ණ දැක්වීමේ ක්‍රම කිහිපයක් තිබෙනවා.

  • ශඩ් දෂමය (HEX) අගයක් ලෙස – උදා – “ff0000″
  • RGB අගයක් ලෙස – උදා – “rgb(255,0,0)”
  • වර්ණයේ නම ලෙස – උදා – “red”

HTML පිටුවක පසුබිම් වර්ණය දැක්වීම body selector එක හරහා සිදු වනවා.

body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
අත්හදා බලන්න >>

W3c අනුකූලතාවය :  ඔබ color එක භාවිතා කරන්නේනම් අනිවාර්යෙන්ම background-color ද භාවිතා කළ යුතුයි.

Text Alignment

text-align ප්‍රොපටි එක වෙබ් පිටුවේ අකුරු වල horizontal alignment එක තීරණය කිරීම සඳහා භාවිතා කරනවා.

අකුරු මධ්‍යගත ලෙස සැකසීමට, දකුණට හෝ වමට align කිරීමට හෝ justified ලෙස සැකසීමට හැකියි. මේවා ඔබ Microsoft Word වල අකුරු align කිරීමට සමාන ප්‍රතිඵළ ගෙන දෙනවා.

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
අත්හදා බලන්න >>

Text Decoration

text-decoration ප්‍රොපටි එක භාවිත වන්නේ අකුරු වල decoration ඉවත් කිරීම සඳහායි.

බොහෝ අවස්ථා වලදී ලින්ක්ස් යටින් එන ඉර ඉවත් කිරීමට මෙය භාවිතා කරනවා.

a {text-decoration:none;}
අත්හදා බලන්න >>

නමුත් අකුරු හැඩ ගැන්වීම සඳහාද එය භාවිතා කළ හැකියි.

h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}

අත්හදා බලන්න >> 

ලින්ක් එකක් නොවන වචනයක් underline කිරීම නොක‍ළ යුතුයි. එය භාවිතා කරන්නන්ව නොමඟ යවන සුළු ක්‍රියාවක්.

Text Transformation

uppercase සහ lowercase අකුරු දැක්වීම සඳහා CSS වල text-transform ප්‍රොපටි එක භාවිතා වනවා.

සෑම අකුරක්ම කැපිටල් කිරීමට, සිම්පල් කිරීමට හෝ ස්ඈම වචනයකම මුලකුර කැපිටල් කිරීමට මෙය භාවිතා කළ හැකියි.

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
අත්හදා බලන්න >>

Text Indentation

අලුත් ඡේදයක් පටන් ගැනීමේදී මැද සිට පටන් ගැනීමට text-indent භාවිතා වනවා.

p {text-indent:50px;}

 අත්හදා බලන්න >>

අත්හදා බැලීම සඳහා තවත් උදාහරණ

අකුරු අතර පරතරය දැක්වීම
අකුරු අතර ඉඩ අඩු හා වැඩි කිරීම මේ උදාහරණය මඟින් දැක්වේ.

පේළි අතර පරතරය
අකුරු වල පේළි අතර පරතරය අඩු හා වැඩි කිරීම  මෙහි දක්වා ඇත.

අකුරු දිශානත කිරීම.අකුරු දර්ශනය කරවීමේ දිශාව මෙම උදාහරණයේ දක්වා තිබේ.

වචන අතර ඉඩ දැක්වීම.
වචන අතර සුදු ඉඩ අඩු හා වැඩි කරන ආකාරය මේ උදාහරණයේ දැක්වේ.

එළිමන්ටයක් තුල text wrapping අක්‍රීය කිරීම
මේ උදාහරණය මගින් එළිමන්ටයක් තුල text wrapping අක්‍රීය කරන ආකාරය පෙන්වා දෙයි.

පින්තූරයක vertical align සැකසීම
පින්තූරයක vertical align එක වෙනස් කරන ආකාරය දක්වා තිබේ.

All CSS Text Properties

Property Description
color අකුරු වල වර්ණය
direction වමේ සිට හෝ දකුණේ සිට ලිවීම
letter-spacing අකුරු අතර දුර වෙනස් කිරීම
line-height අකුරු පේළියක උස
text-align අකුරු දිශානත කිරීම
text-decoration අකුරු අලංකරණය
text-indent කෙටි රූලකින් වාක්‍ය පටන් ගැනීම
text-shadow අකුරු සඳහා සෙවනැළි
text-transform අකුරු කැපිටල් හෝ සිම්පල් කිරීම
unicode-bidi
vertical-align vertical alignment සැකසීම
white-space එලිමන්ට් අතර සුදු ඉඩ සැකසීම
word-spacing වචන අතර පරතරය වෙනස් කිරීම

Hey folks, I am the founder of this website. Currently following Bachelor of Information Technology at University of Colombo with a passion for everything related to technology. Contact me via Email / Facebook / Google+ / Twitter

Add a Comment

    2 Comments on "අකුරු හැඩ ගැන්වීම – CSS Sinhala Tutorial 6"

  1. Niyama wedak. digatama karanna.

  2. Don Rohan says:

    Good work. keep it up

lktips

Galleries

Heshini Samarakkody - Hot PhotosAngelo Mathews Wedding PhotosBhagya Gurusinghe - Hot PhotosDilani Abeywardana - Hot ModelNilanthi Dias - Hot PicturesChandi Perera - Hot PicturesHansi Wijewickrama - Hot PicturesMichelle Perera - Hot PicturesChami Dilrukshi - Hot Pictures