PHP කරා යමු - 20 (CSS)

ගොඩ කාලෙකට පස්සේ ඔන්න ආයෙත් මම ආව ඔයාලට පාඩම කියලා දෙන්න. අපි ගිය පාර පාඩමෙන් ඉගෙන ගත්තේ වගු අඳින එක නොවෑ. දැන් අපි HTML වලට පොඩි විරාමයක් දෙමු. අපි දැනටමත් HTML වල ගොඩක් දේවල් ඉගෙන ගෙන. ඒ නිසා මම කලින් වතාවෙදි කියපු අපේ "styles" හැඩ කාරය ගැන කියල දෙන්නයි මම මේ හදන්නේ. මේක HTML වගේම ගොඩක් වැදගත් පාඩමක් ඉගෙන ගන්න කෙනෙකුට නම්. මොකද අපි HTML ටැග් අම්බානක් දාල හදපු දේවල් මේ පාඩමෙන් පස්සේ අඩු වෙන නිසා. අපිට වෙබ් පිටු නිර්මාණය කර ගනිද්දී අප්‍රමාණ උදව්වක් කරන හැඩ කිරීමේ ශිල්පයක් තමා මේ styles කියන්නේ. ඒ ගැන ඉගෙන ගන්න ඔයාලා ලෑස්තියි නේද?

"CSS" නැත්නම් "styles" වලින් අපේ වැඩ බොහෝමයක් ලේසි කරනවා කියලා ඔයාලට කීවොත් ඒක නිවැරදියි. අපිට මොනා හරි දෙයක්, ඒ කීවේ වගුවක් හරි, වචන ටිකක් හරි, ඡේදයක් හරි, ඔය මම කියලා දීපු හැම ටැග් එකකින්ම පෙන්වන්න පුළුවන් දේවල් CSS වලින් හරි ලේසියෙන්ම හැඩ වැඩ කර ගන්න පුළුවන් වෙනවා. මොකද එයා අපිට කරල දෙන්නේ තැන් කීපයක අපි නිතර නිතර යොදන දේවල් එක තැනක එක පාරක් හඳුන්වලා දුන්නට පස්සේ ඇති තරම් වෙන වෙන තැන් වලදී පාවිච්චි කර ගන්න පුළුවන් වගේ දෙයක්. ඒක CSS වලින් අපිට ලැබෙන ලොකු වාසියක් වගේම කාලය ඉතුරු කිරීමකුත් වෙනවා. අද කාලෙ හැම දෙයක්ම කාලෙන් මනිද්දි සල්ලි වලිනුත් ඉබේම මිනුමක් ලැබෙනව නෙ. ඒ නිසා කාලෙ නාස්ති නොකර ගෙන ටක් ගාල වෙබ් පිටුවක් හෝ අඩවියක් ලස්සනට හදා ගන්න ලැබුනොත් ඒක වටිනවා ගොඩක්.

හරි, පම්පෝරි ගැහුවා මදැයි. අපි දැන් පාඩමට බහිමු. ඇත්තම කියනවා නම් මම ඔයාලට දෙයක් හැංගුවා. ඒක ගුරු මුශ්ටියක් නෙවෙයි. ඒක නොකියාම හිටියේ මේ වෙලාව එනකම් ම තමා. ඒ තමා අපි ඉගෙන ගත්තු ටැග් වල තියෙන ඇට්‍රිබියුට් එකක් ගැන. ම්ම්.. හරියටම කීවොත් හැම ටැග් එකකම අනිවාර්යෙන්ම තියෙන පොදු ඇට්‍රිබියුට් එකක්. ඒක අපි අනිවාර්යෙන්ම ඉගෙන ගන්න ඕන වෙන්නේ අපේ මේ CSS හෙවත් styles වලට මූලික අඩිතාලම ඒකෙන් වැටෙන නිසා වගේම, මුල්ම පියවර ඒ පොදු ඇට්‍රිබියුට් එකෙන් තැබෙන නිසා. ඒ ඇට්‍රිබියුට් එක වෙන මොකක්වත් නෙවෙයි, "style" කියන ඇට්‍රිබියුට් එකයි. ඒ නමින් තියෙන ඇට්‍රිබියුට් එක අපිට ඕනෙම ටැග් එකක සාමාන්‍ය විදියටම පාවිච්චි කර ගන්න පුළුවන්. හැබැයි, හැම ටැග් එකක්ම කීවට හැම එකේම නෙවෙයි. HTML ටැග් වලින් ටැග් ජාති 98% කම වගේ මේ ඇට්‍රිබියුට් එක අන්තර්ගතයි. අර 2% ට අයත් වෙන ටැග් කීපයක් තමා, "html, head, title, meta, style, script" කියන්නේ. මේවායෙන් සමහරක් අපි පසුවට ඉගෙන ගන්න නිසා අළුත්ය, කියා නොදුන්නාය කියලා පසුතැවිලි වෙන්න එපා. යථා කාලයේදී තථා අයුරින් ඒව දැන ගන්න ලැබෙයි.

ඔයාලට මතකද අපි කලිනුත් styles පාඩමක් ඉගෙන ගත්තාය කියලා? ඇයි අපි අර කළේ පාට ගැන පාඩමක්. අන්න ඒක. ඒ පාඩමෙන් තමයි අපිට අවශ්‍ය වුනොත්පාටක් අරන් දා ගන්න වෙන්නේ. ඒකේ කියල දුන්න නේ පාට හදන හැටි එහෙම. වෙබ් පිටු නිර්මාණය කරද්දී අපිට ඒ පාට වල අගයන්, කේත තමා යොදා ගන්න වෙන්නේ කොහේදිත්. ඒ කියන්නේ අපි නොදැනුවත්වම styles ගැන පොඩ්ඩක් ඉගෙන ගෙන. ඔව් ඇත්තෙන්ම. පහු ගිය පාඩම් වල තිබුණු දේවල් මතක නම් ඒක මහා ලොකු දෙයක් නෙවෙයි. අමතක නම් ඒ පාඩම බලා ගන්න පුළුවන් මේ ලින්ක් එකෙන්.

කෙටි පාඩමක් විදියට කියනවා නම්, අපිට style වලදී යොදා ගන්න පුළුවන් දිග, පළල වගේ මිනුම් ගන්න ඒකක කීපයක් ඉගෙන ගන්න පුළුවන්. මේවා styles පාවිච්චි කරද්දි නම් හරිම ප්‍රයෝජනවත්, අපිට ඕනෙ කරන ඒකකයකින් (දිග මැනීම සම්බන්ධයෙන්) මිනුමක් දී ගන්න. කිලෝමීටර විසි පහ අපි සංකේතයෙන් දෙන්නේ "25km" කියලා වගේ, ඒකක භාවිතයක් ගැනයි මේ කියන්නේ. හැබැයි කිලෝමීටර (km) කියලා ඒකකයක් නම් CSS වලදි ඇත්තේ නෑ. අපි එක දිගට ඒ ටික කියාගෙන යමු. අපි යම් දිගක්, පළලක් දෙනවා නම් දිය යුත්තේ පහළ තියෙන ඒකක, යම් කිසි ඉලක්කමක් එක්ක, ඒ ඉලක්කම පිටි පස්සෙන් ලියලායි. ඒවා කීපයකුත්, ඒවායේ තේරුණුත් දැන ගමු දැන්.

% - ප්‍රතිශතයක් විදියට අගයක් දෙනවා නම්. (උදා: 25%).
mm - මිලි මීටර (millimeter) විදියට අගයක් දෙනවා නම්. (උදා: 25mm).
cm - සෙන්ටි මීටර (centimeter) විදියට අගයක් දෙනවා නම්. (උදා: 25cm).
in - අඟල් (inch) විදියට අගයක් දෙනවා නම්. (උදා: 25in).
em - දැනට තියෙන අකුරු වල ප්‍රමාණය. (උදා: 2em - දැන් අකුරු ප්‍රමාණය වගේ දෙගුණයක් විශාල.).
ex - දැනට තියෙන අකුරු වල උස ප්‍රමාණයට වඩා අඩක / භාගයක ප්‍රමාණය. (උදා: 1ex).
pt - point (උදා: 10pt).
px - කොම්පියුටර තිරයේ, මොනිටරයේ තිතක ප්‍රමාණය. pixel (උදා: 100px).