සුභ දවසක්,

 

ඔයා දැක ඇති වෙබ් පිටු වල ඉහත උදාහරණයේ පරිදි Text එකක් යටින් horizontal line එකක්, Text එක මැදින් horizontal line එකක්, හා Text එක උඩින් horizontal line එකක් වශයෙන් ඇද ඇති අවස්ථා.  අපිට මේවා හදුන්වන්න පුළුවන් underline,line-through හා overline ලෙස. අපිට විවිධ දේවල් සදහා මෙම Underline,Line-through,Overline භාවිතා කල හැක. ඔබ දැනටමත් ඉහත සදහන් Underline හා Line-through භාවිතා කර ඇති Microsoft Word වල. නමුත් මෙම Underline,Line-through හා Overline වෙබ් පිටුවක සදහන් කරන්නේ කෙසේද?

මේකට පොඩි CSS Part එකක් තියෙන්නේ.  අපි පොඩි Webpage එකක් හදමු මේ Underline,Line-through හා Overline භාවිතා වන විදිහේ.

මෙතනදී අපි භාවිතා කරන්න යන්නේ ප්‍රමාණයන් 3කින් සමන්විත Headings 3ක්. ඒවා තමයි h1,h2 හා h3. ඒ Headings තුනට වෙන වෙනම CSS Code එකක් ලියමු අපි <head> </head> tags  තුළ.

මෙන්න CSS Part එක.


h1 {
text-decoration: overline;
}

H1 heading එකට දෙමු overline ලෙස. ඒ කියන්නේ text එක උඩින් horizontal line එකක් ඇදෙන විදිහට.


h2 {
text-decoration: line-through;
}

H2 heading එකට දෙමු line-through ලෙස. ඒ කියන්නේ Text එක චේදනය වී යන ආකාරයෙන්  horizontal line එකක් ඇදෙන විදිහට.


h3 {
text-decoration: underline;
}

H3 heading එකට දෙමු Underline ලෙස. ඒ කියන්නේ text එක යටින් horizontal line එකක්  ඇදෙන විදිහට.

දැන් CSS part එක එවරයි. </style> close කරගෙන <body> part එකට යමු.



ඔන්න මම h1,h2 හා h3 යනුවෙන් අපට අවශ්‍යය heading tags තුන සදහන් කරගෙන තියෙනවා

බලන්න OUTPUT එක මොනවගේ වේවිද කියලා,

OUT PUT:

ඔයාලට මේක විවිධ අයුරින් භාවිතා කරන්න පුලුවන්. Article එකක විශේෂ කරුනු Highlight කරන්න. යම් කිසි texts කපා දමා ඇති ලෙස පෙන්වීමට, මෙවන් විවිධ දේ සදහා Underline,Line-through හා Overline භාවිතා කරන්න පුළුවන්.

අපි ඉදිරියෙදී මේ Underline,Line-through හා Overline යොදාගෙන විවිධ ක්‍රියාකාරකම් කරමු, අපිත් එක්ක දිගටම රැදී ඉන්න Web Development පාඩම් මාලාව සමගින්.

සුභ දවසක්!

අදහස් දක්වන්න

comments

  • පට්ට ලිපියක්
  • සතුටු දායකයි
  • අපරාදේ
  • වැඩක් නෑ
‌රැදී සිටින්න...

ඔබත් ගීක් කෙනෙක්ද?

අලුත්ම Geek ලිපි එසැනින් ලබාගන්න අපිව Subscribe කරන්න. දැනුම සොයා යන තරුණ ඔබත් එන්න,ගීක් කෙනෙකු වන්න,