CSS පාඩම් අංක 01
මොකක්ද මේ හරුපේ?
CSS ඉගෙන ගන්න නම් HTML ගැන මූලික දැනුමක් හරි තියෙන්න ඕන. නැතුව හරියන්නේ නෑ. CSS කියලා අපි කෙටියෙන් හැදින්නුවට මේකෙ දිග නම ඇවිල්ලා Cascading Style Sheets. මේ CSS ඇවිල්ලා HTMLවල ලොකු මල්ලි වගේ. මොකද HTML සහ CSS අතරේ තියෙන්නේ ඒ තරමටම ලොකු සහෝදර බැදීමක්. CSS වලින් කරන්නේ අපේ වෙබ් පිටුවලට HTMLවලට වඩා වැඩි යමක් එකතු කරන එක. තවත් ටිකක් තේරෙන සිංහලෙන් කිව්වොත්, අපේ වෙබ් පිටුවට හැඩ වැඩ දාලා, ලස්සන කරලා ගන්න එක. HTML කියන්නේ ගෙදරක අත්තිවාරම නම්, CSS කියන්නේ හරියට ඒ ගෙදර දොර, ජනේල, බිත්ති වගේ. උදාහරණයක් විදිහට පහළ තියෙන සරල වෙබ් පිටුව ගමු !
මේක හදලා තියෙන්නෙ HTML සහ CSS උපයෝගි කරගෙන. CSS ටික අහක් කළාම වෙබ් පිටුව පෙන්නන්නේ මේ විදිහටයි. දැන් තේරෙනවා නේද CSSවල වටිනාකම?
CSS හොයා ගෙන තියෙන්නේ 1996 විතර. අද තියෙන්නේ CSS3. ඒ කියන්නේ CSS1 වලටත් වඩා වැඩි දියුණු වුණු මෙව්වා එකක්.
කොහොමද ලියන්නේ?
CSS ලියන්න නම් මුලින්ම CSS Selectors ගැන දැනගෙන ඉන්න ඕනි. CSSවල "ප්රධානතම" Selectors වර්ග දෙකයි තියෙන්නේ. ඒ තමයි ID සහ Class කියන දෙක. ID එකක් හදුන්වන්න අපි හෑෂ් ලකුණ (#) පාවිච්චි කරනවා. Class එකක් හදුන්වන්න නම් අපි නැවතීමේ තිත (.) පාවිච්චි කරනවා.
ID එකක් කියන්නේ හැමතිස්සෙම තනි කෙනෙක්. එයාට එයාටම කියපු අනන්යතාවයක් තියෙනවා. එකම නම තියෙන ID දෙකක් තියෙන්න කොහෙත්ම බෑ. Class එකක් කියන්නේ සමූහයක්. එකම නමින් Classes 100ක් වුණත් තියෙන්න පුලුවන්.
උදාහරණයක් විදිහට මෙහෙම හිතමු. මිනිස්සු පස් දෙනෙක් ඉන්නවා. මේ පස් දෙනාගේ නම් තියෙන්නේ මෙහෙමයි.
01. සරත් ෆොන්සේකා
02. සරත් වීරසේකර
03. සරත් අමුණුගම
04. සරත් සිල්වා
05. සරත් ඒකනායක
මෙයාලට තියෙන පොදු ලක්ෂණය තමයි මෙයාලගේ මුල් නම. ඒ නිසා ඒවා Classes විදිහට හදුන්වන්න පුලුවන්. අපිට ඕනි මේ පස් දෙනාවම අපේ ළගට ගෙන්න ගන්න. එහෙනම් අපිට සරත් ෆොන්සේකා, සරත් වීරසේකර, සරත් අමුණුගම, සරත් සිල්වා, සරත් ඒකනායක කියලා වෙන වෙනම කතා කරන්න අවශ්ය නෑ. "සරත්" කියලා කිව්වම, සරත්ලා පස් දෙනාම එනවා.
සුවිශේෂී වුණු සරත් කෙනෙක්ට, එහෙමත් නැත්නම් වෙන වෙනම කතා කරන්න ඕන නම්, අපිට පුලුවන් අහවලාගේ වාසගම පාවිච්චි කරන්න. ෆොන්සේකා කිව්වම, සරත් ෆොන්සේකා විතරයි. ඒ නමින් වෙන කවුරුත්ම නෑ. එතකොට මේක Selectors වලින් ලියනවා නම් එන්නේ මෙහෙමයි.
.sarath
#fonseka
මේවායෙන් වෙන්නේ අපිට Style කරන්න ඕනි (ලස්සන කරන්න ඕන) අදාළ HTML element එකත් එක්ක සම්බන්ධ වෙන එකයි. ID සහ Class වලට අපිට කැමති නමක් දෙන්න පුලුවන්. හැබැයි ඒ දෙන නම ටිකක් තේරුමක් තියෙන නමක් වෙන තරමට අපිට ලේසියි.
වෙන මොනවද?
මේ CSS ලියනකොට මතකයේ තියා ගන්න ඕන කරුණු කාරණා කිහිපයක් තියෙනවා. Selector name එකක් ලියන්න ඕනි මෙන්න මේ ක්රම වලින් එකකට අනුවයි.
#sarathFonseka (Standard ක්රමය)
#sarath_fonseka
#sarathfonseka
කොයිම වෙලාවකවත් Selector name එකක මුලට Capital අකුරක් දාන්න එපා !
#Sarathfonseka
කොයිම වෙලාවකවත් Selector name එකක මුලට අංකයක් දාන්න එපා !
#1sarathfonseka
කොයිම වෙලාවකවත් Selector name එකකට හිස් තැන් පාවිච්චි කරන්න එපා !
#sarath fonseka
#sarathFonseka (Standard ක්රමය)
#sarath_fonseka
#sarathfonseka
කොයිම වෙලාවකවත් Selector name එකක මුලට Capital අකුරක් දාන්න එපා !
#Sarathfonseka
කොයිම වෙලාවකවත් Selector name එකක මුලට අංකයක් දාන්න එපා !
#1sarathfonseka
කොයිම වෙලාවකවත් Selector name එකකට හිස් තැන් පාවිච්චි කරන්න එපා !
#sarath fonseka
ටිකක් ලියලා බලමුද?
ඔය උඩින් තියෙන්නෙ CSS ලියන විදිහ තමයි. මුලින්ම ලියනවා Selector එක. ඒක ID එකක් වෙන්නත් පුලුවන්. Class එකක් වෙන්නත් පුලුවන්. එහෙමත් නැත්නම් HTML element එකක් වෙන්නත් පුලුවන්. Selector එක ලිව්වායින් පස්සේ සගල වරහන් දෙකක් දාගන්න ඕනි. සගල වරහන් දෙක ඇතුළේ තමයි CSS Code එක ලියන්නේ. අපි ලියන Code කෑලි වෙන් කරන්නෙ " ; " ලකුණ පාවිච්චි කරලා. හැම Code කෑල්ලක්ම Property එකකින් සහ Value එකකින් සමන්විත වෙනවා. ඒ කියන්නේ ගතිලක්ෂණයකින් සහ අගයකින්.
HTMLවල වගේම CSSවලත් Comments කරන්න පුලුවන්. Commentsවල තියෙන එක වැදගත්කමක් තමයි, අපිට Codes ටික, එහෙමත් නැත්නම් වෙබ් පිටුවේ තියෙන අංග ටික පහසුවෙන් හදුනා ගන්න පුලුවන් වෙන එක. ඒකෙන් අපේ කාලය ඉතුරු කරනවා. නැත්නම් එකින් එක හොයන්න වෙනවනේ. ඒ වගේම ලොකු වෙබ් එකක් නම්, කිහිප දෙනෙක් එකතු වෙලා, වැඩ බෙදාගෙන නිර්මාණය කරන්න පුලුවන්. ඒ වගේ වෙලාවකදී අනිත් අයගේ දැන ගැනීම පිණිස, අනිත් අයට CSS Codes සම්බන්ධව සමහරක් දේවල් දැනුම්දීම පිණිස Comments පාවිච්චි කරන්න පුලුවන්. මේ Comments පිටින් බලන අයට පෙන්නන්නේ නෑ කියලා කොහොමත් ඔයාලට අවබෝධයක් ඇති.
මේ විදිහට තමයි HTML Comment එකක් ලියන්නේ.
<!-- This is a photo gallery -->
CSS Comment එකක් ලියන්නේ මෙන්න මෙහෙමයි.
/* This is a photo gallery */ (මැද තියෙන්නේ තරු ලකුණ හොදේ)
ඔය උඩින් තියෙන්නෙ CSS ලියන විදිහ තමයි. මුලින්ම ලියනවා Selector එක. ඒක ID එකක් වෙන්නත් පුලුවන්. Class එකක් වෙන්නත් පුලුවන්. එහෙමත් නැත්නම් HTML element එකක් වෙන්නත් පුලුවන්. Selector එක ලිව්වායින් පස්සේ සගල වරහන් දෙකක් දාගන්න ඕනි. සගල වරහන් දෙක ඇතුළේ තමයි CSS Code එක ලියන්නේ. අපි ලියන Code කෑලි වෙන් කරන්නෙ " ; " ලකුණ පාවිච්චි කරලා. හැම Code කෑල්ලක්ම Property එකකින් සහ Value එකකින් සමන්විත වෙනවා. ඒ කියන්නේ ගතිලක්ෂණයකින් සහ අගයකින්.
HTMLවල වගේම CSSවලත් Comments කරන්න පුලුවන්. Commentsවල තියෙන එක වැදගත්කමක් තමයි, අපිට Codes ටික, එහෙමත් නැත්නම් වෙබ් පිටුවේ තියෙන අංග ටික පහසුවෙන් හදුනා ගන්න පුලුවන් වෙන එක. ඒකෙන් අපේ කාලය ඉතුරු කරනවා. නැත්නම් එකින් එක හොයන්න වෙනවනේ. ඒ වගේම ලොකු වෙබ් එකක් නම්, කිහිප දෙනෙක් එකතු වෙලා, වැඩ බෙදාගෙන නිර්මාණය කරන්න පුලුවන්. ඒ වගේ වෙලාවකදී අනිත් අයගේ දැන ගැනීම පිණිස, අනිත් අයට CSS Codes සම්බන්ධව සමහරක් දේවල් දැනුම්දීම පිණිස Comments පාවිච්චි කරන්න පුලුවන්. මේ Comments පිටින් බලන අයට පෙන්නන්නේ නෑ කියලා කොහොමත් ඔයාලට අවබෝධයක් ඇති.
මේ විදිහට තමයි HTML Comment එකක් ලියන්නේ.
<!-- This is a photo gallery -->
CSS Comment එකක් ලියන්නේ මෙන්න මෙහෙමයි.
/* This is a photo gallery */ (මැද තියෙන්නේ තරු ලකුණ හොදේ)
කොතනද ලියන්නේ?
Text Editor එකකින් තමයි ලියන්නේ. HTML ඉගෙන ගන්නකොට පාවිච්චි කරනවා වගේ Notepad එකෙනුත් පුලුවන්. ඒත් ගොඩක් ආධුනික අය පාවිච්චි කරන්නේ Adobe Dreamweaver එක. ඊට අමතරව තවත් ගොඩාක් Text Editors අප්රමාණ සංඛ්යාවක් තියෙනවා.
Style එකක් ලියන්න ක්රම 3ක් තියෙනවා.
01. External
02. Internal
03. Inline
External තමයි ලෝකයේ පිළිගත්ම ක්රමය. අනිත් ක්රම දෙක පාවිච්චි කළත් වැරැද්දක් නෑ. ඒත් ඒ හැටි ක්රමවත් නෑ. External එකෙන් වෙන්නේ මෙන්න මේ වගේ වැඩක්. CSS ටික වෙනම File එකක ලියනවා. ඊට පස්සේ ඒ File එකට යන Path එක, HTML File එකේ head එක ඇතුළේ දානවා. මේක තමයි වැඩි දෙනෙක් පාවිච්චි කරන්නේ. මොකද HTML ටික වෙනම පිටුවක තියෙනවා. CSS ටික වෙනම පිටුවක තියෙනවා. හදිස්සියකදි පරික්ෂා කරලා බලන්නත් ලේසියි. මොකද වෙන වෙනම, පිළිවෙලකට තියෙන නිසා. අපේ කාලයත් ඉතුරුයි. බලන එක්කෙනාට බලන්නත් ආසයි.
කොතනද ලියන්නේ?
Text Editor එකකින් තමයි ලියන්නේ. HTML ඉගෙන ගන්නකොට පාවිච්චි කරනවා වගේ Notepad එකෙනුත් පුලුවන්. ඒත් ගොඩක් ආධුනික අය පාවිච්චි කරන්නේ Adobe Dreamweaver එක. ඊට අමතරව තවත් ගොඩාක් Text Editors අප්රමාණ සංඛ්යාවක් තියෙනවා.
Style එකක් ලියන්න ක්රම 3ක් තියෙනවා.
01. External
02. Internal
03. Inline
External තමයි ලෝකයේ පිළිගත්ම ක්රමය. අනිත් ක්රම දෙක පාවිච්චි කළත් වැරැද්දක් නෑ. ඒත් ඒ හැටි ක්රමවත් නෑ. External එකෙන් වෙන්නේ මෙන්න මේ වගේ වැඩක්. CSS ටික වෙනම File එකක ලියනවා. ඊට පස්සේ ඒ File එකට යන Path එක, HTML File එකේ head එක ඇතුළේ දානවා. මේක තමයි වැඩි දෙනෙක් පාවිච්චි කරන්නේ. මොකද HTML ටික වෙනම පිටුවක තියෙනවා. CSS ටික වෙනම පිටුවක තියෙනවා. හදිස්සියකදි පරික්ෂා කරලා බලන්නත් ලේසියි. මොකද වෙන වෙනම, පිළිවෙලකට තියෙන නිසා. අපේ කාලයත් ඉතුරුයි. බලන එක්කෙනාට බලන්නත් ආසයි.
ඉතුරු ක්රම දෙක ගොඩක් අය පාවිච්චි කරන්න කැමති නෑ. මොකද ඒ ක්රම දෙක අනුව CSS ලියන්නේ වෙනම File එකක නෙවේ. HTML File එක ඇතුළෙමයි. ඉතින් හදිස්සියකදි Code කෑල්ලක් හොයන්න ගියාම, ඒක හරියට පිදුරු ගොඩක ඇල්පෙනිත්තක් හොයනවා වගේ වැඩක්. එකින් එක බලන්න වෙනවා. ඔක්කොම එකගොඩේ නිසා අදුර ගන්න අමාරුයි. නිකං අච්චාරුවක් වගේ. ගොඩාක් වෙලාවට මේ ක්රම දෙක පාවිච්චි කරන්නේ, HTML, CSS Files මාරු කර කර ලියන්න කැමති නැති, මං වගේ කම්මැලි මිනිස්සු.
External කිව්වේ පිටින් සම්බන්ධ වෙන නිසා. Internal කියන්නේ ඇතුළෙන් සම්බන්ධ වෙන නිසා. මොකක් ඇතුළෙන්ද? HTML ඇතුළෙන් ! එහෙම ලියන්නේ Style කියලා Tags දෙකක් අතරේ. මේක ලියන්නේ Head එක ඇතුළේ.
HTML Tag එක ඇතුළෙම, CSS එක පෙළකට ලියන ක්රමයට තමයි Inline කියලා කියන්නේ. මෙන්න මේ වගේ....
එකම Code එක වැරදිලා දෙපාරක් ලිව්වොත්?
ඒක ප්රශ්නයක් නෑ. හැබැයි එකම Property එකට Values දෙකක් දුන්නොත් එතන ප්රශ්නයක් ! වතුර වීදුරුවකට වතුර ටිකක් දැම්මට මොකුත් ප්රශ්නයක් නෑ. එකම පාට. එකම සුවද. හැබැයි වතුර වීදුරුවකට Coca Cola ටිකක් දැම්මොත්? එතන සෑහෙන වෙනස්වීමක් වෙනවා. අලුත් පාටක් සහ සුවදක්.
අපි හිතමු හතරැස් කොටුවක් තියෙනවා. අපි මේක හදුන්වනවා ID එකකින් rec කියලා. අපිට ඕනි මේකෙ ප්රමාණය 20%ක් කරන්නත්, කොළ පාට කරන්නත්. අපි ලියනවා මෙහෙම....
#rec {
width:20%;
background-color: green;
}
ඒක අමතක වෙලා, තවත් තැනක ඒ විදිහටම ලිව්වට ප්රශ්නයක් නෑ. හැබැයි මෙහෙම ලිව්වොත්?
#rec {
width:80%;
background-color: yellow;
}
ඒ කියන්නේ ප්රමාණය 80% කරලා, කහ පාට දාන්න කියලා.... එතකොට පෙන්නන්නේ ඒ විදිහටයි. හැබැයි ඒක තීරණය වෙන්නෙත් Code කෑල්ල ලියලා තියෙන තැන අනුවයි. හැම වෙලාවෙම අන්තිමට ලියපු කෑල්ල අනුව තමයි වැඩ සිද්ධ වෙන්නේ.
මේ කෑලි දෙක මාරු කරලා ලිව්වා නම්? ඒ කියන්නේ මුලින්ම 80% සහ කහ පාට දාලා, ඊට පස්සේ දැම්මා නම් 20% සහ කොළ පාට වෙන්න ඕනි කියලා, එතකොට පෙන්නන්නේ 20% ප්රමාණයක් සහිත කොළ පාට කොටුවක්.
කෙටි ක්රම එහෙම නැද්ද?
අපි හිතමු එක එක ජාතියේ ID ගොඩකට, එකම Property එකක් සහ Value එකක් දෙන්න ඕන කියලා. එහෙනම් ඒ ඔක්කොම ID වලට එකින් එක Code ලියනවාට වඩා, එකම Code එකකින් ලියන්න පුලුවන් මේ විදිහට.
#rec1, #rec2, #rec3, #title, #page_title { width:80% ; background-color:yellow }
අපි හිතමු එක එක ජාතියේ ID ගොඩකට, එකම Property එකක් සහ Value එකක් දෙන්න ඕන කියලා. එහෙනම් ඒ ඔක්කොම ID වලට එකින් එක Code ලියනවාට වඩා, එකම Code එකකින් ලියන්න පුලුවන් මේ විදිහට.
#rec1, #rec2, #rec3, #title, #page_title { width:80% ; background-color:yellow }