අපේ Blog එකේ වෙනම CSS පාඩමක් යනව වුනත් මම අද හිතුවා පොඩ්ඩක් CSS ගැන කියන්න ඕන කියල. පොඩි හැඳින් වීමක් වගේ, නැත්තම් මේ පාඩම් ටික සම්පූර්ණ නැති වෙනව. අපි හැමොම දන්නවනේ CSS කියල අපි කෙටියෙන් අඳුන් වන්නේ Cascading Style Sheets කියල. ඉතින් මේ CSS වලින් අපිට කරන්න පුළුවන් දේවල් ඉතාමත් පුදුමාකාරයි. හිතාගන්නවත් බැරි වැඩ CSS වලින් web sites වල කරල තියෙනව. මේ වැඩ තවත් පහසු කරගන්න ලගදී CSS 3 කියන සංස්කරණය නිකුත් වුනා. මේ දේවල් ගැන වැඩි විස්තර ඔයාලට අපේ CSS පාඩම් මාලාව අධ්‍යයනයෙන් දැන ගන්න පුළුවන්.
ඔයාල දන්නවනේ CSS හඳුන්වල දුන්නේ HTML elements වලට වඩාත් හොඳ විදිහකට styles දාන්න පුළුවන් වෙන්නනේ. අපිට මේ වැඩේ කරන්න පුළුවන් ආකාර තුනක් තියෙනව.
අපි අයෙත් තවත් පාඩමකින් හමුවෙමු. ඊලග පාඩමේදී අපි HTML වලදී Images හසුරවන ආකාරය ගැන කතා කරමු.
ඔයාල දන්නවනේ CSS හඳුන්වල දුන්නේ HTML elements වලට වඩාත් හොඳ විදිහකට styles දාන්න පුළුවන් වෙන්නනේ. අපිට මේ වැඩේ කරන්න පුළුවන් ආකාර තුනක් තියෙනව.
- Inline
- Internal
- External
අපි දැන් මේ එකින් එක විස්තර කරමු.
Inline
අපි මේ විදිහට styles යොදන්න එක් HTML element එකකට විතරක් යම් කිසි style එකක් යොදන වෙලාවකදි තමයි. මේ සඳහා අපි ඒ element එකේ style කියන attribute එක යොදා ගන්නව. මෙහි ඕනෑම CSS property එකක් සඳහන් කළ හැකියි.
<p style="color:red;margin-left:45px;">This is my first paragraph</p>
Internal
අපි මේ විදිහට styles යොදන්නේ එක් වෙබ් පිටුවකට විතරක් අදාල වන පරිදි යම් කිසි elements කිහිපයකටම එකම style එක යොඳන විටදියි. මම පෙර පාඩමේදී සඳහන් කල පරිදිම මේ styles අපි ලියන්නේ HEAD එක තුලයි. මේ සඳහා අපි <style> කියන tag එක පාවිච්චි කරනව.
<head>
<style type="text/css">
body {background-color:blue;}
p {color:red;}
</style>
</head>
External
අපිට එකම style එක විවිධ web pages සඳහා යොදා ගැනීමට අවශ්‍ය වෙන වෙලාවට අපිට external style sheet එකක් භාවිතා කිරීමට සිදුවෙනව. ඒ external style sheets අපේ වෙබ් පිටුවට link කරන්න අවශ්‍යයි. මේ code එකත් අපි ලියන්නේ HEAT එක තුලමයි, ඒ සඳහා අපි <link> කියන tag එකයි.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
අපි අයෙත් තවත් පාඩමකින් හමුවෙමු. ඊලග පාඩමේදී අපි HTML වලදී Images හසුරවන ආකාරය ගැන කතා කරමු.
No comments:
Post a Comment