css | css කෙටියෙන් ලියමු !

css හිදී සමහර අවස්‌ථා වල අපට පේලි කිහිපයකින් ලියන දෙයක්‌ තනි පේලියකින් ලියන්නට පුලුවන්. මෙහි වාසි කිහිපයක්‌ තියෙනවා. ප්‍රධානම කරුන වන්නේ css ගොනුවේ ප්‍රමාණය (file size) අඩු වීමයි. මෙමගින් වෙබ් පිටු පරිශීලනය කරන විට ගොනු බාගත වීමට යන කාලය සැලකියයුතු ලෙස අඩු වෙනවා. තවත් කරුණක්‌ වන්නේ පසුව ගොනු වෙනස්‌ කිරීමට යාමේදී පහසුවෙන් අදාල අගයන් සොයාගැනීමට ඇති පහසුවයි.

padding

#myelement {
    padding-top:10px;
    padding-bottom:10px;
    padding-left:20px;
    padding-right:20px;
}

මෙම අගයන් හතරම තනි පේලියකින් ලිවිය හැකියි.මෙහි අගයන් යොදන්නේ දක්‍ෂිණාවර්තවයි. පලවෙනි අගය top-padding සදහාත් දෙවැනි අගය right-padding සදහාත් තුන්වෙනි අගය bottom-padding සදහාත් හතරවෙනි අගය left-padding සදහාත් යොදගන්නවා. එනිසා ඉහත පේලි හතර කෙටියෙන් මෙසේ ලියන්න පුලුවන්.

#myelement {
    padding:10px 20px 10px 20px;
}

මෙම උදාහරනයේ top-padding සහ bottom-padding දෙකම එක සමාන අගයක්‌. එලෙසම left-padding සහ right-padding සමාන අගයන්. එනිසා මෙය පහත පරිදි තවත් කෙටියෙන් ලියන්නට පුලුවන්. මෙසේ ලිවේම සදහා එකිනෙකට විරුද්ධ පැති වල අගයන් සමාන විය යුතුයි.

#myelement {
    padding:10px 20px;
}

margin

margin සදහාත් කෙටි ක්‍රම ඉහත padding පරිදිමයි.

#myelement {
    margin:10px 20px 10px 20px;
}

මෙමගින් කියවෙන්නේ top-margin, right-margin, bottom-margin, left-margin සදහා අගයන් පිලිවෙලින් 10px, 20px, 10px 20px වන බවයි.

background (පසුබිම)

#myelement {
    background-color: #356AA0;
    background-image: url("mybackground.jpg");
    background-position: top left;
    background-repeat: no-repeat;
}

background සදහා දීර්ඝ ක්‍රමය මෙවැනියි. මෙහි පසුබිම් වර්ණය, පසුබිම් රූපය, පසුබිම පිහිටවියයුතු ස්‌තානය සහ පසුබිම repeat වෙනවාද යන්න දක්‌වලා තියෙනවා.

එයම කෙටියෙන් මෙලෙස ලියන්න පුලුවන්.

#myelement {
    background:#356AA0 url("mybackground.jpg") no-repeat top left;
}

මේකෙදි මුල්ම අගය වෙන් වන්නේ පසුබිම් වර්නයට..ඊට පසු අගය පසුබිම් රූපය සදහා.. ඉතිරි අගයන් පිලිවෙලින් පසුබිම් රූපය repeat විය යුතු ආකාරය සහ පසුබිම් රුපයේ පිහිටීම පෙන්වනවා. මෙම පිහිටීම පික්‌සල් අගයකින් හෝ ප්‍රතිශතයක්‌ වශයෙනුත් ලබා දෙන්න පුලුවන්. 0 0 යනු ඉහල වම් කෙලවරයි. එලෙසම 0% 0% ඉහල වම් කෙලවරයි.

තවත් කෙටි මං ඉදිරියට !