CSS Cascading Style Sheet කියන්නේ කියන එකයි. CSS වර්ග 3ක් තියනවා.
- INTERNAL
- EXTERNAL
- INLINE
Internal css කියලා කියන්නේ html file එක ඇතුලෙම තියන style sheet එකට.මේක හොදයි තනි පිටුවක් විතරක් කරනවනම්..
External css කියන්නේ html file එකෙන් පිට වෙනම css file එකක් විදියට සේව් කරලා තියන style sheet වලට.මේකෙන් පුලුවන් ගොඩක් pages වලට එකම style ටික දෙන්න..එහෙම කරාම html වල වගේ file එක දිග වෙන්නෙත් නෑ.
Inline css කියන්නේ තනි පේලියකට විතරක් style එක දෙන එක..මේකත් html file එක ඇතුලෙම කරන්න පුලුවන්..
ඒ හැදින්වීම දැනට ඇති..ටිකක් කරලා බලද්දිම තේරෙයි ඔයගොල්ලන්ට.අපි ඉස්සෙල්ලම බලමු කොහොමද HTML file එකකට CSS ඇතුලත් කරන්නේ කියලා..ඒකට මම පොඩි page එකක් කරලා පෙන්නනම්.පුරුදු විදියටම ඉස්සෙල්ලාම html file එක save කරන් ඉන්නකෝ..
<html>
<head>
<style type="text/css">
body
{
background-color:yellow;
}
h1
{
font:Times new roman;
color:red;
text-align:center;
}
h3
{
color:#C30;
}
p
{
margin-left:30px;
}
</style>
</head>
<body>
<h1>Heading</h1>
<h3>Sub heading</h3>
<hr/>
<p>paragraph</p>
</body>
</html>
ඔය මම උඩින් දීලා තියන කෝඩ් ටික ඔයගොල්ලන්ගේ නෝට් පෑඩ් එකේ ගහලා බලන්න..page එකනම් වැඩි දෙයක් නෑ..ඕක ආශ්‍රයෙන් මම කියන්නම් මූලික සංකේත ටික..රතු පාටින් තියෙන්නේ style sheet එක.ඒක ඇතුලේ තියන h1,h3,p කියන ඒවත් පොඩ්ඩක් බලන්න..ඒ ඒ අකුරට සම්බන්ද වෙන එකක් html කොටසේ ඇති..හොඳට බලන්න.
css වල කෝඩ් හැමතිස්සේම ලියන්න ඕනේ ( internal නම්) කියන <head> ටැග් එක ඇතුලේ..ඒක පටන් ගන්න ඕනේ <style> කියලා..ඉවර වෙන්න ඕනේ </style> කියලා..කොඩ් ලියද්දි හැමතිස්සේම අදාල කොටස නැත්නම් අපි දෙන විධානය බලපාන්න ඕනේ කොටසට අදාල id එකක් තියනවා..ඒක තමයි h1,h3,p කියලා තියෙන්නේ...දැනට එහෙම උනාට තව ඉස්සරහාට ඊට වඩා ටිකක් සංකීර්ණ වෙයි.command එක ලියද්දි මුලින්ම ලියන්න ඕනේ id එක..ඊට පස්සේ තමයි tag එක ලියන්නේ..tag එකත් තියන්න ඕනේ { සහ } කියන සිම්බල් දෙක ඇතුලේ..
html වල ටැග් ලිව්වේ <font color="red"> කියලා මෙහෙමනේ..css වල = ලකුණට මේකේදි පාවිච්චි කරන්නේ : ලකුන..ඒ ටැග් එක ඉවර කරන්නේ ; ලකුනෙන්..html වලට වඩා මේකේ ටැග් ටිකක් වෙනස්.මම උදාහරණ දෙද්දි පොඩ්ඩක් ටැග් ටිකත් බලාගන්න..තව ටැග් ටිකකුත් දෙනම්..
හරි..ඒ කතා කලේ internal style sheet ගැනනේ.External කියන style sheet ඒත් මේ වගේම තමා..පොඩ්ඩක් වෙනස්..ඒකෙදි අපිට .html file එකකුයි .css file කියලා තව එකකුයි 2ක් save කරගන්න වෙනවා.html කොඩ් ටික ලියන්න පටන් ගද්දි මෙන්න මේ වගේ කෝඩ් එකක් දීලා .css file එකේ නම දෙන්න ඕනේ..
<html>
<head>
<link rel="stylesheet" type="text/css" href="ex1.css"/>
</head>
ඔතකොට තමා දෙක ලින්ක් වෙන්නේ..දෙක කිව්ව file දෙක හරිද..මේ ෆයිල් දෙක එක ළග save කරලා තියනවානම් තමයි ගොඩක් හොඳ..ඊට පස්සේ ඉතින් සාමාන්‍ය විදියට html එක ලියාගෙන ගිහින් එකේ id name ටික දාලා css ඒකත් සාමාන්‍ය විදියට ලියන්න තියෙන්නේ.එච්චරයි..
දැන් ටිකක් ටැපලෙන කෑල්ලක් තමයි කියන්න යන්නේ..
ID සහ CLASS..
ID කියන්නේ අපි එක් විශේශිත ලයින් එකකට දෙන නමක්..ඒ නම html file එකේ ඇතුලත් කරලා පස්සේ එක css ලියද්දි යොදාගන්නවා අදාළ කමාන්ඩ් එක දෙන්න.ඔතකොට අර id එක තියන ලයින් එකට විතරයි ඒ කමාන්ඩ් එක බලපාන්නේ..මේ පහල තියෙන්නේ ඒකට නිදසුනක්.
<html>
<head>
<style type="text/css">
#head1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<h1 id="head1">paragraph</h1>
<h3>This paragraph is not affected by the style.</h3>
</body>
</html>
CLASS කියන්නෙත් ඒ වගේම එකක් තමයි.හැබැයි මේක තැන් ගොඩකට පාවිච්චි කරන්න පුලුවන්.. Id වගේ එකකට විතරක් නෙමේයි.ඇත්තටම ඒ දෙකේ ලොකු වෙනසක් පැහැදිලි කරන්න අමාරුයි..පාවිච්චි කරලම තමයි තෙරුම් ගන්න ඕනේ..අනික තමයි id සදහන් කරද්දි id එකට ඉස්සරහින් # ලකුණ යොදන්න ඕනේ..නැත්නම් වැඩ කරන්නේ නෑ..ඒ වගේම තමයි class පාවිච්චි කරද්දි . (තිත) යොදන්න ඕනේ.තිතට කලින් අපි එකේ නාමක් සදහන් කරොත් ඒ නම තියන ලයින් එකට විතරයි අපි දෙන කමාන්ඩ් එක වැඩ කරන්නේ..
හරි එහෙනම්..අදට ඇති..අපි තාම CSS වල මූලික හැදින්වීමේ ඉන්නේ..තව ගොඩක් දේවල් තියනවා ඉස්සරහට..එතකන් ඉතින් කමෙන්ට් එකක් දාලා පොඩි හයියක් වෙන්න..
"මාගේ මේ ව්‍යායාමය රජ වීමට නොව ඔබලාට ඉගැන්වීමටයි" :D
අහා..යන්න කලින් මෙන්න ටැග් ටිකක්.කිව්ව විදියට පාවිච්චි කරලම බලන්නකෝ..
background
background-color
background-image
background-size
border
border-width
border-color
border-style
max-height
max-width
min-height
min-width
font-color
font-family
font-size
text-align
මේ තියෙන්නේ සිය ගානක් tag අතරේ පොඩි ටිකක්..මුලින්ම ඉගෙන ගද්දි මේ වගේ සරල ඒවායින් පටන් ගන්න..තව සංකීර්ණ tag ඕනේ නම් මෙන්න මේ ලින්ක් එකට ගිහින් බලන්න..
අපි ගියා..
ඔබට ගොඩක් ස්තුතියි මේ කර්තව්‍යයට මොකද හැමෝම තමන්ට වාසියක් නැතිව තමන් දන්න දෙය අනුන්ට මේ විදිහට කියල දෙන්නෙ නෑ...
ReplyDelete