HTML සහා PHP එක්ක වෙබ් නිර්මාණය ඉගෙන ගන්නකොට ඒකට නැතිවම බැරි තවත් සාධකයක් තියෙනවා ඒ තමයි CSS කියන්නේ. CSS වලින් වෙන්නේ HTML මගින් අපි හදපු Text, Images පිලිවෙලකට ලස්සනට ඉදිරිපත් කරන එක. CSS මගින් අපිට හදන්න පුළුවන් ඒ ඒ HTML අයිතම මොන ආකාරයෙන් දිස්විය යුතු ද කියලා.

එතකොට මොකක් ද මේ CSS කියන්නේ CSS කියන අකුරු දිගහැරලා ලීවාම Cascading Style Sheets කියන එකතමා අදහස් වෙන්නේ. මේ CSS නිසා වෙබ් නිර්මාණය කරද්දි විශාල කාලයක් ශ්‍රමයක් ඉතිරි වෙනවා වගේම ලස්සනට අපේ වෙබ් පිටුව ඉදිරිපත් කරන්න පුළුවන් වෙනවා. මේ හදන CSS ස්ටයිල් භාවිතා කරලා එක වෙබ් පිටුවක් විතරක් නෙවෙයි සමස්ථ වෙබ් අඩවියම නිර්මාණය කරන්න හැකි වෙනවා.
උදාහරණයකට

[html] <h1> This is a heading . </h1>

<p> This is a paragraph. </p>
[/html]

ඒත් CSS වලදී අපිට පුළුවන් දිස්විය යුතු <font> <color> <size> <left> ආදි දේවල් මේ HTML එලමන්ට් වල හදන්න.

CSS ලියන්නේ කොහොම ද?

දැන් CSS  ගැන මූලික දැනීමක් තියෙනවා නේ. අපි CSS ලියන විදිය බලමු. ඒකටත් විදියක් තියෙනවා. පහත රූප සටහන ඒ ගැනයි.

මේ තියෙන්නේ Selector ඒ කියන්නේ HTML වල මොන එලමන්ට් එකද කියන එක ලේසියට දන්න භාෂාවෙන් කිවොත් ටැග් එක මොකක් ද කියලා , Declaration ඒකේ තියෙන්නේ එකේ අපි ඇතුලත් කරන CSS ටික. property කියන්නේ වෙනස් කලයුතු attribute එක උදාහරණ විදියට (color, font, font-size, align, text-align ) වගේ ඒවා value කියන්නේ වෙනස් විය යුතු ආකාරය, පාටක් නම් මොන පාට ද කියන එකයි.

මේවගේම අපිට h1, h2 ,p කියන එලමනට් තුනටම ලියන විදියත් බලමු.

[css]

h1;{
text-align:center;
color:red;
}

h2;{
text-align:center;
color:red;
}

p;{
text-align:center;
color:red;
}

[/css]

මේ විදියට { } වරහනක් ඇතුලේ ලීවාම ඒවා අදාල වෙන්නේ ඒ  ඒ අදාල කොටසට විතරයි අනික property එකට පසුව  ” : ” ලකුණද value එකට පසුව  ” ; “  ලකුණ යෙදීම ද අනිවාර්යයි.

මේකේ අපි ලියන විදිය ගැන කියපු නිසා අපිට යම් පේලියක් කමෙන්ට් කරන්න අවශ්‍ය නම්  /* This is a comment */ සලකුණ කමෙන්ට් කලයුතු වාක්‍ය හෝ  පේලි අතර යෙදිය යුතු වෙනවා.

උදාහරණ:-

[css]

p {
color: red;
/* This is a single-line comment */
text-align: center;
}

/* This is
a multi-line
comment */

[/css]

එතකොට මේ විදියට ලියන ස්ටයිල්ස්  අපි වෙබ් පිටුවකට ඇතුලත් කරන්නේ <head></head> එක ඇතුලේ.  ඒකටත් ක්‍රම කිහිපයක් තියෙනවා

  • External style sheet
  • Internal style sheet
  • Inline style

External Style Sheet  –  මෙහෙම ලියන ස්ටයිල් ඇතුලත් ගොනුව ” .css” එකක් විදියට Save කරලා වෙබ් පිටුවට ඇතුලත් කරාම යි.

උදාහරණ :

[html]

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

[/html]

Internal Style Sheet – ස්ටයිල් ටික අපි පිටත සේව් කරන්නැතිව වෙබ් පිටුවේ header එක ඇතුලෙම ලියාගෙන යනවා. එතකොට අපි   <style> </style> කියන ටැග් දෙක ඇතුලේ ලියන්න ඕන.

උදාහරණ :

[html]

<head>
<style>
body {
background-color: linen;
}

h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>

[/html]

Inline Styles – මේතන දී  ස්ටයිල් ලියන්නේ අවශ්‍ය එක්තරා තැනක තියෙන අවශ්‍ය ටැග් එකකට පමණක්  ස්ටයිල් ඇතුලත් කරන්නයි. මේක වෙබ් පිටුවේ ඕනම තැනකදී යොදාගන්න හැකියාව තියෙනවා.  ඉහත ක්‍රම දෙකේදීම මුළු වෙබ් පිටුවේම ඇති අදාල ටැග්ස් සියල්ලටම ස්ටයිල් ඇතුලත් වෙනවා.  මේ inline එකට උදාහරණ බලමු.

[html]

<h1 style="color:blue;margin-left:30px;">This is a heading</h1>

[/html]

එකම වෙබ් පිටුවක ස්ටයිල් ෂීට් කිහිපයක් පැවතිය හැකි අතර ප්‍රමුඛතාව අනුපිලිවෙල අනුව over-ride වෙන්න හැකියි.

එහෙනම් පාඩම් මාලාව එක්ක ඊළඟ ලිපියෙන් හමුවෙමු.

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

අදහස්

Share your vote!


  • Fascinated
  • Happy
  • Sad
  • Angry
  • Bored
  • Afraid
‌රැදී සිටින්න...

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

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

ඔබත් දැන්ම ගීක් කෙනෙක් වෙන්න!

You have successfully subscribed to the Geek

There was an error while trying to send your request. Please try again.

SL Geek LK will use the information you provide on this form to be in touch with you and to provide updates and marketing.

ස්මාර්ට් ගීක් කෙනෙක් වෙන්න! ගීක් මොබයිල් ඇප් එක දාගන්න.

Download Geek App now - 4Mb Only