CSS ගැන දැනගැනීමට වැදගත් යැයි සිතූ මාධව ඒ පිලිබඳව කෙටි ලිපියක් සම්පාදනය කලේ HTML මූලික වෙබ් අඩවි නිර්මාණය කරන පරිගණක භාෂාව දන්නා නවකයින් ගැන සිතාය. මේ CSS පරිගණක භාෂාව පිලිබඳව මාධවගෙන් ඉදිරිපත් වන පළමු ලිපිය වන්නේය.
CSS යනු?
Cascading Style Sheet යනුවෙන් හඳුන්වන මෙම සී එස් එස් පරිගණක භාෂාව භාවිතා කරනුයේ වෙබ් අඩවි නිර්මාණය කිරීම ආශ්‍රිත නිර්මාණාත්මක කටයුතු උදෙසා ය. සරලවම කිවහොත් මෙම සී එස් එස් භාවිතා කරන්නේ වෙබ් පිටු අලංකාරවත්ව නිර්මාණය කිරීම උදෙසාය.
HTML භාෂාවෙන් මූලික සැකසුම් සිදුකල පසු මෙම CSS කේත යෙදීමෙන් අපූරුවට වෙබ් පිටුව සංවර්ධනය කොට මනාව ඉදිරිපත් කල හැකිය. පරිශීලකයාගේ නෙත් පැහැරගන්නා සුලු ආකාරයට වෙබ් පිටු සංවර්ධනය කිරීමට මෙම CSS මගින් අවකාශ දැන් ලබා දී ඇත.
අරමුණු?
වෙබ් පිටුවක පෙනුම අලංකරණය කිරීම මූලික කරගෙන විවිධ කටයුතු මෙම භාෂාව මගින සිදු කල හැකිය. උදාහරණයක් ලෙස මුලු වෙබ් අඩවියම එකම ආකාරයේ සැකසුමකින් සම්මත ලෙස පෙන්වීමට අවශ්‍ය විධාන වෙනමම CSS ගොනුවක කේත ලියා තැන්පත් කර එය වෙබ් අඩවියේ ඇති සෑම වෙබ් පිටුවකටම Link කිරීමෙන් සෑම වෙබ් පිටුවකටම එකම තේමාවක් දිස්වීමට සැකසීම ගත හැකිය. කෙසේ වුවද මෙම සී එස් එස් භාෂාවේ අරමුණ වෙබ් පිටු අලංකරණයයි.
Framework යනු කුමක්ද සහ එහි අරමුණ
මීට පෙරද ප්‍රේම්වර්ක් පිලිබදව කතා කර ඇත.
පරිගණක භාෂා කීපයක් එක්කාසු
කර හෝ තනි භාෂාවකින් හෝ වැඩ පහසු කර ගැනීමට නිර්මාණය කර ඇති මෙම කියන
framework මගින් අවශ්‍ය කටයුතු සඳහා වේගවත්ව සහ පහසුවෙන්
විවිධ පද්ධති නිර්මාණය කර ගැනීමට අවකාශ ලබා දීම අරමුණ වන්නේය. පරිගණක භාෂා
කීපයක දැනුම ඇති ඉන්ජිනේරුවරු මෙම framework භාවිතයෙන් ව්‍යාපෘති සාර්ථක
ලෙස ගොඩ නගන්නේ ඒමය.
එනයින් CSS වලදීද කටයුතු පහසු කර ගැනීම සඳහා ෆ්‍රේම්වර්ක් නිර්මාණය කර ඇත.
CSS Frameworks
වෙබ් පිටු අලංකරණය උදෙසා ද විවිධ ප්‍රේම්වර්ක් තිබේ. ඒවා අතුරින් වඩාත් ජනප්‍රිය පහත ඒවාය.
Boostrap - https://getbootstrap.com/
බූස්ට්‍රැප් යනු වර්තමානයේ බෙහෙවින් භාවිතා වන සී එස් එස් ප්‍රේම්වර්ක් එකකි. එය භාගත කර අදාල සබැඳිය වෙබ් අඩවිය සමඟින් ලින්ක් කල විට වඩාත් අලංකාරවත් වෙබ් අඩවි නිර්මාණය කර ගත හැකිය
Talewind - https://tailwindcss.com/
ටේල්වින්ඩ් යනු නොමිලේ ලබා දෙන සී එස් එස් ප්‍රේම්වර්ක් එකකි. මාධවට ඒ සමඟ අත්දැකීම් නොමැත. ඉදිරියේදී අධ්‍යයනයකින් පසු ටේල් වින්ඩ් ගැන වෙනමම ලියනු ඇත.
CSS කේත ලියන ආකාරය සරලව
කේත ලිවීමට සරල නෝට්පෑඩ් මෘදුකාංගයක සිය Visual Studio Code වෙනකෙත්ම වෙබ් අඩවි නිර්මාණය සඳහා සුදුසු IDE එකක් භාවිතා කල හැකිය. (IDE ගැන පෙරදාක ලිපිය)
CSS කේත ලිවීමේදී භාහිර ක්‍රමය, අතරමැදි ක්‍රමය සහ අභ්‍යන්තර ක්‍රමය තිබේ. බාහිර ක්‍රමය යනු CSS ගොනුවක් නිර්මාණය කර එය තුලට අවශ්‍ය කේත ලියා එය ඔබගේ HTML වෙබ් පිටුවේ
<link rel="stylesheet" href="mystyle.css"> ආකාරයට <HEAD> ටැග් එක තුල ලිවීමයි.
මෙහිදී mystyle.css නැමැති ගොනුව තුල අවශ්‍ය CSS කේත ලියා තිබිය යුතුය
උදාහරණ ලෙස
body {
background-color: lightblue; ( මෙම කොටසින් සෑම වෙබ් පිටුවකම පසුබිම ලානිල් පාටින් පෙන්වනු ලබයි)
}
h1 {
color: navy;
margin-left: 20px;
}
කේත මෙම mystyle.css නැමැති ගොනුව තුල අඩංගු කර තිබිය හැකිය. මෙහිදී වාසිය වන්නේ එක්වරක් තුල මෙම CSS ගොනුවේ කේත ලියා අදාල වෙබ් අඩවියේ එක් එක් වෙබ් පිටුව සඳහා ලින්ක් කල පසු ලින්ක් කල සෑම HTML පිටුවකම මෙම සී එස් එස් කේත ධාවනය වීම ය.
අභ්‍යන්තර ක්‍රමය යනු HTML පිටුව තුලම කේත ලිවීමයි. මෙහිදී අවාසිය වනුයේ එක් එක් HTML පිටුව සඳහා වෙන වෙනම නැවත කේත ලිවීමට සිදුවීමයි. වාසිය වනුයේ CSS ගොනුව delete වුවහොත් ඇති වන දුශ්කරතා මඟහැරී යාමයි.
මෙහිදී මූලික HTML පිටුව තුල <HEAD> ටැග් එක තුල <style> නමින් ටැග් එකක් විවෘත කරනු ලබයි. එම <style> ටැග් එක තුල අදාල CSS කේත ලියා </style> ලෙසින් මෙම ටැග් එක වසා දමනු ලබයි.
පහත උදාහරණය බලන්න
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
මෙහි කේත ලියා ඇති ආකාරය බලන්න. මූලික HTML පිටුව තුල <HEAD> ටැග් එක තුල <style> නමින් ටැග් එකක් විවෘත කර, එම <style> ටැග් එක තුල අදාල CSS කේත ලියා </style> ලෙසින් මෙම ටැග් එක වසා දමා ඇත.
අතරමැදි ක්‍රමය හෙවත් inline ක්‍රමයේදී අදාල Element එකටම කේතය ලියනු ලබයි. එනම් මූලික HTML පිටුව තුල <HEAD> ටැග් එක තුල <style> නමින් ටැග් එකක් විවෘත කිරීමක් හෝ <link rel="stylesheet" href="mystyle.css"> ආකාරයට <HEAD> ටැග් එක තුල ලින්ක් කිරීමක් හෝ සිදු නොවේ. ඒ වෙනුවට පහත ආකාරයට කේතය ලියයි.
<html>
<body>
<h1 style="color:blue;text-align:center;">Vidu's tales</h1>
<p style="color:red;">New Blog From madhawa.</p>
</body>
</html>
මෙම සරල කේතයේ <h1 style="color:blue;text-align:center;">Vidu's tales</h1> හි h1 යනු වෙබ් පිටුවේ අදාල අයිතමයයි. එයට ඉදිරියෙන් style="color:blue;text-align:center; යනුවෙන් දිස්වන්නේ h1ට පමණක් අදාල සී එස් එස් කේතයයි.
මෙහිදී අවාසිය වනුයේ කේත ප්‍රමාණය වැඩි නිසා සංකීර්ණ බව වැඩිවීම මෙන්ම එක් එක් අයිතමයට (element) වෙන වෙනම කේත ලිවීමට සිදුවීමය.
CSS ගැන පළමු කතාන්දරය ඔතනින් අහවර ය. ඉදිරියේදී තවත් CSS පාඩමකින් හමුවෙමු.
__________ ---------------------- _________________ ----------------- _________________
Python පාඩම් මාලාව ද යලි ආරම්භ කෙරෙනු ඇත. අවාසනාවට උකුල් පරිගණකයද අභාවප්‍රාප්ත විය. ඉතින් මේ පවතින තත්වයන් යටතේ සියල්ල නිරාකරණය කෙරෙන තෙක් පාඩම් ඇන හිටිනු ඇත.
සුභ දවසක්!
👍.........
ReplyDelete