CSS හි මූලික කරුණු

සටහන: මෙම ලිපිය සුරේන් ඩයස්ගේ CSS Basics බ්ලොග් ලිපියෙහි සිංහල පරිවර්තනයකි.

මෙමෙ ලිපිය ඔබට CSS පිළිබද මූලික අවබෝධයක් ලබාගැනීම සදහා වන පුළුල් මාර්ගෝපදේශයකි.

CSS හි මූලික ලක්ෂණ.

CSS කැස්කඩිං ස්ටයිල් ෂීට් (Cascading Style Sheets) යනු style sheet භාෂාවකි. stylesheet යනු වෙබ් පිටුවක ප්රදර්ශනය කරන තොරතුරු අඩංගු ලේඛනයක් වේ.

ඔබේ වෙබ් අඩවිය වඩාත් අලංකාරවත් කිරීමට CSS භාවිතා කරයි.

CSS හි භාවිතය

මෙමගින් CSS file එකක් වෙනස් කිරීම මගින් ඕනෑම වෙබ් පිටුවක පෙනුම වෙනස් කල හැකිය.

UI/UX වෙබ් අඩවි නිර්මාණකරුවන් මෙන්ම බොහෝ වෙබ් අඩවි නිර්මාණකරුවන් තම ව්‍යාපෘති අලංකාරවත් කරගැනීම සදහා CSS යොදාගනී.

CSS Syntax

Photo Credit: W3Schools

CSS  වල ප්‍රධාන කොටස් 2ක් ඇත. ඒවානම් selectors සහ declarations වේ.

selectors වෙබ් අඩවියක ඇති එක් හෝ වැඩි වස්තු වල ගුණාංග තෝරා ගන්න.

selector යනු ඔබට අවශ්‍ය HTML element එකයි.

Declaration සෑම එකකම property එකක් හා value එකක් ඇත.

Property යනු ඔබට වෙනස් කිරීමට අවශ්‍ය style attribute (වර්ණය,අකුරු වල ප්‍රමාණය යන ආදී )එකයි. සෑම property එකකටම අගයක්(value) ඇත.

සෑමවිටම declaration අවසන් විය යුත්තේ semicolon ( ; )එකකිනි. Declaration group එකක් සාගල වරහන් වල අන්තර්ගත විය යුතුය.

ඉඟිය: ඔබ CSS ප්රකාශයේ ව්යුහය තේරුම් ගැනීමට වග බලා ගන්න.

Selectors: IDs සහ Classes

CSS Classes

Elements කීපයකට (element group එකකට) style එකක් අන්තර්ගත කිරීමට යොදා ගනී. මෙය අර්ථ දැක්වීමට“. ” ලකුණ යොදා ගැනේ.උදාහරණයක් ලෙස, ඔබගේ වෙබ් පිටුවේ  ඇති සියලුම චේද (paragraph) වල අක්ෂර වර්ණය කොළ පැහැයට වෙනස්කිරීමට පහත කේතය යොදාගත හැක.

p.color {text-color:green;}

Id Selector
Id එකක්  මගින් යම් element එකක් සදහාම style එකක් අර්ථ දක්වයි.මෙය අර්ථ දැක්වීමට # ලකුණ යොදා ගැනේ. පහත උදාහරණයේ id එක “para” වේ.Id එක සඳහා නම ඉලක්කමකින් ආරම්භ නොකරන්න.මන්ද එය firefox browser එක හරහා ක්‍රියාත්මක නොවන බැවිනි.

#para
{
text-align:right;
color:blue;
}

CSS Box ආකෘතිය.

CSS Box ආකෘතියෙහි ප්‍රධාන කොටස් 4ක් ඇත. ඒවානම් Margin, Border, Padding සහ Content.

Margin

කොටුව ආකෘතියේ බාහිර ස්ථරය. විවිධ elements අතර පරතරය වෙනස් කිරීම සදහා භාවිතා කරයි. පින්තූර සමූහයක් තුළ විවිධ පින්තූර අතර පරතරයක් ඇතිකිරීමට මෙය බහුලව යොදාගනී.

Border

Box ආකෘතියේ පළමු අභ්‍යන්තර ස්ථරයි.

මෙය භාවිතා කිරීමෙන් element’s border වෙනස් කල හැකිය. උදාහරණයක් ලෙස,  element’s border වර්ණය නිල්, කොළ ආදිය වෙත වෙනස් කළ හැකිය.

Padding

Box ආකෘතියේ දෙවන අභ්‍යන්තර ස්ථරයි. ඔබේ content  එකෙහි සහ content border එකෙහි පරතරයක් ඇති කිරීමට මෙය යොදා ගනී.මෙමගින් ඔබට framing effect සාදාගත හැක.

content

Box ආකෘතියේ අභ්‍යන්තර ස්ථරයි. පරිශීලකයන් හට පෙනෙන්නේ මෙම කොටසයි.

වර්ණ

වර්ණ භාවිතා කිරීමේ ප්‍රධාන ක්‍රම 3ක් තිබේ. ඒවානම්,

1 වර්ණහි නම (color name ) භාවිතයෙන්.

  උදා: <h1 style=”background-color:Orange;”>Orange</h1>

2 වර්ණයට අදාල RGBA කේතය භාවිතයෙන්.

 උදා: rgba(255, 99, 71, 0.5)

 සටහන: මෙහි මුල් අංක තුනෙන් රතු, කොළ සහ නිල් වර්ණ සහ අවසාන අංකය මගින් වර්ණයෙහි විනිවිද භාවය (transparent ) දක්වනු ලැයි.

3 වර්ණයට අදාළ  hex-color කේතය භාවිතයෙන්.

 උදා: #ff0000

 සටහන: වර්ණ තෝරාගැනීමේදී Material UI color භාවිතා කිරීම අප නිර්දේශ කරන්නෙමු.

!important Tag

ඔබ මෙම ටැගය එකතු කරන විට එයට ඉහලින් ඇති CSS  කෝඩ් එකට වඩා වැඩි ප්‍රමුකතාවයක් ලබාදේ.

උදා:a { color: #333 !important; }

CSS3 යනු කුමක්ද?

මෙම ලිපිය ලිවීමේ අවස්ථාවේදී, CSS3 CSS නවතම අනුවාදය (update) වේ. නවීන බ්රව්සර CSS3 භාවිතා වේ.

Sass කියන්නේ මොකක්ද?

Sass යනු CSS බවට සැකසූ style sheet භාෂාවකි. Saas ඔබට වැඩිදියුණු කළ හැකි විකල්පයන් ලබා දෙයි. ඔබ වෙබ් අඩවි නිර්මාණකරුවෙකු හෝ සංවර්ධකයෙක් නම් ඔබට Sass ඉගෙන ගැනීමට නිර්දේශ කරමු.

Avanka IT CSS ඉඟි

1. අවශ්ය නොවේ නම් වැදගත් සලකුණ (!important Tag) භාවිතා නොකරන්න. මෙය ඔබේ යෙදුම තුළ ගැටුම් වළක්වා ඇත.
2. Element නැවතත් නිතරම CSS ගලා යෑම වෙනුවට class භාවිතා කරයි.
3. ඔබේ කේතය cross-browser compatible බවට වග බලා ගන්න.

සාරාංශය

CSS ඉගෙන ගැනීමට පහසු හා පහසු භාෂාවක්. ඔබගේ මූලික selectors සහ declarations මොනවාදැයි ඔබ දැනගන්න. ඔබගේ කේතය ලියන විට ව්යාකූලත්වය වැලැක්වීමට CSS Box ආකෘතිය භාවිතා කරන්න

ඉක්මන් ඉල්ලීමක්

මෙම blog post එක ඔබටත් ඔබේ යහලුවන්ටත් ප්‍රයෝජනවත්වේ යැයි සිතනවානම් මෙය සමාජ ජාලයන් ඔස්සේ බෙදා හරින්න.

ඔබ යම් මාතෘකාවක් ගැන ලිවීමට කැමති නම් ඕනෑම අවස්ථාවක අප හා සම්බන්ධ වන්න.

යොමුව

• CSS Introduction. (2018). Retrieved September 20, 2018, from https://www.w3schools.com/css/css_intro.asp
• CSS basics. (2018). Retrieved September 20, 2018, from https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics
• CSS tutorial starting with HTML + CSS. (2018). Retrieved September 20, 2018, from https://www.w3.org/Style/Examples/011/firstcss.en.html
• Graham, G. (2018, February 21). CSS Basics: The Second “S” in CSS. Retrieved September 20, 2018, from https://css-tricks.com/css-basics-second-s-css/