අද අපි CSS වල font properties ගැන කථාකරමු.
CSS වලදි අකුරු වර්ග වෙනස් කරන්න අපි කලින් පාඩමේදි ලියපු කෝඩ් 1 නැවත ගනිමු.
p{
font-family : Georgia," Times New Roman",Times,serif;
}
දැන් මේ ස්ටයිල් 1 අපි හදල තියෙන්නෙ <p> ටැග් 1ට. මෙහි font යන්න මගින් අනෙක් සියළු ප්‍රොපර්ටිස් font වලට අදාලව තියෙන බව කියවෙනව. family යන්නෙන් අකුරු වර්ගය සදහා වු ප්‍රොපර්ටි 1 කියවෙනවා. මෙහි
Georgia , Times New Roman ,Times කියන්නෙ font වර්ග 3ක්. ඇයි මේ විදිහට ලියන්නෙ. පළවෙනි font 1 වෙබ් බ්‍රව්සරය අදුන ගත්තෙ නැත්නම් ඒ අදාල විස්තරය පෙන්වන්නෙ 2වන font එකෙන්. දෙවන font 1ත් නැත්නම් ඊලග font එකෙන් අදාල විස්තරය පෙන්වනවා. අපි නම් කරල තියන font සේරම නැත්නම් අන්තිමට තියන serif කියන වර්ගයට අයිති වෙන font එකකින් අදාල විස්තරය පෙන්වනවා.
හරි දැන් බලමු මොනාද මේ font වර්ග කියල. ප්‍රධාන වර්ග තමා, serif , sans-serif , cursive , fantasy , monospace.
තව දෙයක්, අපි <P> ටැග් 1ට සිඑස්එස් ෂිට් 1 හැදුවම මුළු HTML කෝඩ් එකේ පී ටැග් සේරම එකම විදියනෙ. කොහොමද ජේදයෙන් ජේදයට වෙන වෙනම font properties එකතු කරන්නෙ එක ස්ටයිල් ෂිට් 1ක් යොදාගෙන. මෙහෙමයි එතෙන්දි අපි ලියන css කෝඩ් 1 පහත විදියට වෙන්න ඕන.
#para1
{
font-family:fantasy; }
<title>css fonts
</title>
<head>
<link href="text2.css"rel="stylesheet"type="text/css" />
<body>
<p id="para2"> sarif </p>
<p id= "para5"> sans-sarif </p>
<p id= "para1"> fantasy </p>
<p id= "para3"> cursive </p>
<p id= "para4"> monospace</p>
</body>
</html>
වෙබ් බ්‍රව්සර් එකේදි ඒක අපිට මේ විදියට බලාගන්න පුළුවන්.
-----------------------------------------------------------------------------------------------------------
දැන් බලමු තව වැදගත් ප්‍රොපටිකීපයක් ගැන.
font-style මේහිදි normal , italic , oblique කියල කොටස් 3යි.normal කියන 1 default තියනවා.මේ තියෙන්නෙ css code එක.
#para2
{
font-family:serif;
font-style:italic;
}
#para1
{
font-family:fantasy;
font-style:oblique;
-----------------------------------------------------------------------------------------------------------
ඊළගට font-Variant ප්‍රොපර්ටි 1. මෙමගින් කැපිටල් අකුරු එලෙසමත් සිම්පල් අකුරු කුඩා කැපිටල් අකුරු බවටත් පත් කරනවා.
{font-Variant: small-caps;} තමා සිඑස් එස් කෝඩ් 1.මෙහි භාවිතාවන්නේ normal සහ small-caps යන ඒවායි.
ඊළගට font-weight ප්‍රොපර්ටි ගැන බලමු.
මෙමගින් අකුරුවල ඝනකම වැඩිකරගත හැකිය.මෙය සාමාන්‍ය බෝල්ඩ් කිරීමක සිට ඊට වැඩි හෝ අඩු ලෙස සැකසිය හැක.මෙහිදි bold , bolder , lighter , 100 , 200 , ... 900 දක්වා වෙනස් කල හැක. සිඑස්එස් කෝඩ් 1 වන්නේ { font-weight : 200 ;} යන්නයි.
-------------------------------------------------------------------------------------------------------------
font-size ප්‍රොපර්ටි එක
CSS තුලදි අකුරුවල ප්‍රමානය සැකසීම සදහා ක්‍රම රාශියක් පවතිනව. ප්‍රධාන වශයෙන් x-small , small , medium , large , x-large , xx-large හා smaller යන ආකාර හෝ සෘජුවම අකුරු වල ප්‍රමානය ලබාදිම හෝ කල හැක.
අකුරුවල ප්‍රමාන ලබා දිමේදි,
{ font-size : 12pt ; } - සාමාන්‍ය ආකාරයට
{ font-size : 4cm ; } - අකුරුවල ප්‍රමාණය සෙන්ටි මීටර වලින්
{ font-size : 120% ; } - ප්‍රතිශතයක් ලෙස , ලබාදිය හැක.
හරි. වැදගත් හා වටිනම දේ තමා අපිට පුළුවන් මේ ප්‍රොපර්ටී කිපයක් එකට භාවිතා කරන්න.
මෙන්න මේ වගේ.
අදට එහෙනම් පාඩම ඉවරයි... ඊළගට අපි color සහ background ගැන කථාකරමු.
ප්‍රශ්න තිබ්බොත් කමෙන්ට් එකකින් අහන්න...ඊයකින් අහනවනම් harsha.thewalaarachchi@gmail.com
CSS වලදි අකුරු වර්ග වෙනස් කරන්න අපි කලින් පාඩමේදි ලියපු කෝඩ් 1 නැවත ගනිමු.
p{
font-family : Georgia," Times New Roman",Times,serif;
}
දැන් මේ ස්ටයිල් 1 අපි හදල තියෙන්නෙ <p> ටැග් 1ට. මෙහි font යන්න මගින් අනෙක් සියළු ප්‍රොපර්ටිස් font වලට අදාලව තියෙන බව කියවෙනව. family යන්නෙන් අකුරු වර්ගය සදහා වු ප්‍රොපර්ටි 1 කියවෙනවා. මෙහි
Georgia , Times New Roman ,Times කියන්නෙ font වර්ග 3ක්. ඇයි මේ විදිහට ලියන්නෙ. පළවෙනි font 1 වෙබ් බ්‍රව්සරය අදුන ගත්තෙ නැත්නම් ඒ අදාල විස්තරය පෙන්වන්නෙ 2වන font එකෙන්. දෙවන font 1ත් නැත්නම් ඊලග font එකෙන් අදාල විස්තරය පෙන්වනවා. අපි නම් කරල තියන font සේරම නැත්නම් අන්තිමට තියන serif කියන වර්ගයට අයිති වෙන font එකකින් අදාල විස්තරය පෙන්වනවා.
 | |
| අදාල html code 1 |
තව දෙයක්, අපි <P> ටැග් 1ට සිඑස්එස් ෂිට් 1 හැදුවම මුළු HTML කෝඩ් එකේ පී ටැග් සේරම එකම විදියනෙ. කොහොමද ජේදයෙන් ජේදයට වෙන වෙනම font properties එකතු කරන්නෙ එක ස්ටයිල් ෂිට් 1ක් යොදාගෙන. මෙහෙමයි එතෙන්දි අපි ලියන css කෝඩ් 1 පහත විදියට වෙන්න ඕන.
#para1
{
font-family:fantasy; }
#para2
{
font-family:serif; }
#para3
{
font-family:cursive; }
#para4
{
font-family:monospace; }
#para5
{
font-family:sans-serif; }
{
font-family:serif; }
#para3
{
font-family:cursive; }
#para4
{
font-family:monospace; }
#para5
{
font-family:sans-serif; }
මෙතෙන්දි para1,para2,.... කියන්නෙ විවිධ ජේද වලට යොදන්න පහසු විදියට දාපු හැදුනුමක්. HTML code එක පහත තියනව. බලන්න තේරුම් ගන්න පුළුවන්ද කියල.
<html><title>css fonts
</title>
<head>
<link href="text2.css"rel="stylesheet"type="text/css" />
<body>
<p id="para2"> sarif </p>
<p id= "para5"> sans-sarif </p>
<p id= "para1"> fantasy </p>
<p id= "para3"> cursive </p>
<p id= "para4"> monospace</p>
</body>
</html>
වෙබ් බ්‍රව්සර් එකේදි ඒක අපිට මේ විදියට බලාගන්න පුළුවන්.
-----------------------------------------------------------------------------------------------------------
දැන් බලමු තව වැදගත් ප්‍රොපටිකීපයක් ගැන.
font-style මේහිදි normal , italic , oblique කියල කොටස් 3යි.normal කියන 1 default තියනවා.මේ තියෙන්නෙ css code එක.
#para2
{
font-family:serif;
font-style:italic;
}
#para1
{
font-family:fantasy;
font-style:oblique;
}
HTML code එක
<html>
<title>css font style
</title>
<head>
<link href="stil.css"rel="stylesheet"type="text/css" />
<body>
<p id="para2"> italic </p>
<p id= "para1"> oblique </p>
<p> normal</p>
</body>
</html>
<title>css font style
</title>
<head>
<link href="stil.css"rel="stylesheet"type="text/css" />
<body>
<p id="para2"> italic </p>
<p id= "para1"> oblique </p>
<p> normal</p>
</body>
</html>
ඊළගට font-Variant ප්‍රොපර්ටි 1. මෙමගින් කැපිටල් අකුරු එලෙසමත් සිම්පල් අකුරු කුඩා කැපිටල් අකුරු බවටත් පත් කරනවා.
{font-Variant: small-caps;} තමා සිඑස් එස් කෝඩ් 1.මෙහි භාවිතාවන්නේ normal සහ small-caps යන ඒවායි.
ඊළගට font-weight ප්‍රොපර්ටි ගැන බලමු.
මෙමගින් අකුරුවල ඝනකම වැඩිකරගත හැකිය.මෙය සාමාන්‍ය බෝල්ඩ් කිරීමක සිට ඊට වැඩි හෝ අඩු ලෙස සැකසිය හැක.මෙහිදි bold , bolder , lighter , 100 , 200 , ... 900 දක්වා වෙනස් කල හැක. සිඑස්එස් කෝඩ් 1 වන්නේ { font-weight : 200 ;} යන්නයි.
 |
| CSS හා HTMLකෝඩ් |
font-size ප්‍රොපර්ටි එක
CSS තුලදි අකුරුවල ප්‍රමානය සැකසීම සදහා ක්‍රම රාශියක් පවතිනව. ප්‍රධාන වශයෙන් x-small , small , medium , large , x-large , xx-large හා smaller යන ආකාර හෝ සෘජුවම අකුරු වල ප්‍රමානය ලබාදිම හෝ කල හැක.
අකුරුවල ප්‍රමාන ලබා දිමේදි,
{ font-size : 12pt ; } - සාමාන්‍ය ආකාරයට
{ font-size : 4cm ; } - අකුරුවල ප්‍රමාණය සෙන්ටි මීටර වලින්
{ font-size : 120% ; } - ප්‍රතිශතයක් ලෙස , ලබාදිය හැක.
මෙන්න මේ වගේ.
අදට එහෙනම් පාඩම ඉවරයි... ඊළගට අපි color සහ background ගැන කථාකරමු.
ප්‍රශ්න තිබ්බොත් කමෙන්ට් එකකින් අහන්න...ඊයකින් අහනවනම් harsha.thewalaarachchi@gmail.com
meke id= kiyala hadunwanne mokkada
ReplyDeleteid කියන්නෙ css selector එක.
ReplyDeleteCSS වලදි භාවිතා වන selectors 2ක් තියනවා. එකක් class (.) සහ අනෙක id (#)
Class, id gana thama kiyala dunne na neda
ReplyDelete