දන්න කියන දෙයක් හැමෝටම දැනගන්න කියලා ලියන මේ බ්ලොග් පිටුවට ඔයාලව ආදරයෙන් පිළි ගන්නවා. ඉගෙන ගන්න පුළුවන් දේවල් කියලා දෙන්න බලාපොරොත්තු වෙනවා. ආපු වෙලාවක කොමෙන්ට් එකක් දාන්නත්, පාඨකයෙක් විදියට ෆොලෝ කරන්නත් පුළුවන් නම් වටිනවා.

Saturday, June 5, 2010

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

අපි දැන් ටක් ගාලා style ඇට්‍රිබියුට් එකේ එන, නිතර පාවිච්චි වෙන විදියේ උප ඇට්‍රිබියුට් කීපයක් එක දිගට අත් හදා බලමු. පහල තියෙන්නේ ඒවා මොනාද කියලාත්, ඒවට යොදන්න පුළුවන් අගයන් මොනාද කියලාත් තමයි. අහ්! ඒවා ලියන හැටිත් මම කියල තියෙනවා.


background-color
පසුබිමේ වර්ණය / පාට.
දෙන අගයන් තමයි කලින් පාඩ්මකදී අපි ඉගෙන ගත්තු වර්ණ අගයන් දෙන ආකරයෙන් දෙන අගයන්.
උදා: background-color: yellow

background-image
පසුබිමට යොදන පිංතූරය.
පිංතූරයක් තියෙන තැනට ලිපිනය. දෙන්න ඕනෙ මෙන්න මේ විදියට.
උදා: background-image: url(image.jpg);

background-position
පසුබිම් පිංතූරයේ පිහිටුම.
දෙන අගයන් තමයි bottom, center, left, right හෝ top කියන අගයන්.
උදා: background-position: top;

background-repeat
පසුබිම් පිංතූරය කොයි අතටද එක දිගට යා යුත්තේ කියන එක.
repeat-x (x අක්ශය දිගේ හරස් අතට), repeat-y (y අක්ශය දිගේ සිරස් අතට
), no-repeat (විහිදුමක් නැති අවස්තාව) .
උදා: background-repeat: repeat-x;

background
ඔය පසුබිම සම්බන්ධ හැම උප ඇට්‍රිබියුට් එකකම අගයන් එක දිගට දෙන්න පුළුවන් තනි උප ඇට්‍රිබියුට් එක.
කලින් කියපු අගයන් දෙන්න පුළුවන් වෙන්නේ හිස් තැනකින් වෙන් කරලා එක දිගට ලියමින්.
උදා: background:#FF0000 url(image2.jpg) left repeat-x;

color
අකුරු වල පාට.
දෙන අගයන් තමයි කලින් පාඩ්මකදී අපි ඉගෙන ගත්තු වර්ණ අගයන් දෙන ආකරයෙන් දෙන අගයන්.
උදා: color: #FF0000;

height
උස.
අගයන් දෙන්නේ කලින් ඉගෙන ගත්තු දිග සම්බන්ධ අගයන් දෙන විදියට.
උදා: height: 100px;

width
පළල / දිග.
අගයන් දෙන්නේ කලින් ඉගෙන ගත්තු දිග සම්බන්ධ අගයන් දෙන විදියට.
උදා: width: 550px;

top
ඉහල මායිමේ ඉඳන් කොච්චර දුරකින් පහලට වෙන්නද කියලා.
අගයන් දෙන්නේ කලින් ඉගෙන ගත්තු දිග සම්බන්ධ අගයන් දෙන විදියට.
උදා: top: 200px;

left
වම් මායිමේ ඉඳන් කොච්චර දුරකින් දකුණු අතට වෙන්නද කියලා.
අගයන් දෙන්නේ කලින් ඉගෙන ගත්තු දිග සම්බන්ධ අගයන් දෙන විදියට.
උදා: left: 200px;

right
දකුණු මායිමේ ඉඳන් කොච්චර දුරකින් වම් අතට වෙන්නද කියලා.
අගයන් දෙන්නේ කලින් ඉගෙන ගත්තු දිග සම්බන්ධ අගයන් දෙන විදියට.
උදා: right: 200px;

bottom
පහළම මායිමේ ඉඳන් කොච්චර දුරකින් ඉහලට වෙන්නද කියලා.
අගයන් දෙන්නේ කලින් ඉගෙන ගත්තු දිග සම්බන්ධ අගයන් දෙන විදියට.
උදා: bottom: 200px;

font-size
අකුරු වල ප්‍රමාණය ලොකුද පොඩිද කියන එක අගයක් විදියට දීම.
අගයන් දෙන්නේ කලින් ඉගෙන ගත්තු දිග සම්බන්ධ අගයන් දෙන විදියට.
උදා: font-size:12px;

font-style
අකුරු වල හැඩය ඇද වෙලාද නැද්ද කියලා.
දෙන අගයන් තමයි italic, normal හෝ oblique කියන අගයන්.
උදා: font-style:italic;

font-weight
අකුරු වල මහත ප්‍රමාණය, අකුර කොච්චර තද වෙලා, තද අකුරින් පෙන්විය යුතුද වග.
උදා: font-weight:bold;

font-family
අකුරු වර්ගය / වර්ග මොකද්ද කියන එක.
එක අකුරු ජාතියක් දෙන්නත් පුළුවන්. නැති නම්, අකුරු ජාති කීපයක්ම කොමාවකින් වෙන් කර කර දෙන්න පුළුවන්. කීපයක් දෙන එකේ අදහස තමයි, එක අකුරු ජාතියක් නැති වුනොත් අපේ කොම්පියුටරයේ අනික හරි පාවිච්චි කරන්න කියන එක.
උදා: font-family:Verdana, Geneva, sans-serif;

font
කලින් වගේම අකුරු සම්බන්ධ හැම උප ඇට්‍රිබියුට් එකකම අගයන් එකට දෙන්න පුළුවන් උප ඇට්‍රිබියුට් එක
උදා: font: 12px bold italic Verdana;

border
යම කිසි දෙයක වටේ දාරය හැඩ කර ගන්න යොදා ගන්න උප ඇට්‍රිබියුට් එක. මේකත් දාරයක් සම්බන්ධ හැම උප ඇට්‍රිබියුට් එකකම අගයන් එක දිගට දෙන්න පුළුවන් උප ඇට්‍රිබියුට් එකක්. හිස් තැනකින් වෙන් කර කර දෙන අගයන් වෙන්නේ, දාරයේ පාට, දාරයේ මහත, දාරයේ විදිය වගේ දේවලුයි.
උදා: border: #000000 1px solid;

දාරයේ විදිය, නැත්නම් හැඩයට දෙන්න පුළුවන් විවිධ ආකාර තමයි මේ.
solid - සාමාන්‍ය ඉරක්
dashed - කඩ ඉරක්
dotted- තිත් ඉරක්
double - ද්විත්ව ඉරක්
thick - මහත ඉරක්
thin - සිහින් ඉරක්

මේ වගේ දාර වර්ග හතරක් තියෙනවා. ඒ උඩ, යට, වම් පස හා දකුනු පස දාර විදියට. පහලින් තියෙන ඒවාත් පොදු උප ඇට්‍රිබියුට් ගනයට වැටෙන උප ඇට්‍රිබියුට් හතරක්, ඒ දිසා හතරේ දාර හැඩ කර ගන්න තියෙන.
border-left, border-right, border-top, border-bottom

ඒ එක් එක් දිසාවේ දාර වලට පාටක් දෙන්න තියෙන උප ඇට්‍රිබියුට් හතර තමයි මේ තියෙන්නේ.
border-left-color, border-right-color, border-top-color, border-bottom-color

ඒ එක් එක් දිසාවේ දාර වලට මහතක් දෙන්න තියෙන උප ඇට්‍රිබියුට් හතර තමයි මේ තියෙන්නේ.
border-left-width, border-right-width, border-top-width, border-bottom-width

ඒ එක් එක් දිසාවේ දාර වලට විදියක් දෙන්න තියෙන උප ඇට්‍රිබියුට් හතර තමයි මේ තියෙන්නේ.
border-left-style, border-right-style, border-top-style, border-bottom-style

ඉහල තියෙන දාර සම්බන්ධ හැම උප ඇට්‍රිබියුට් එකකම අගයන් දෙන්නේ border ඇට්‍රිබියුට් එකට අගයන් දෙන විදියේ උදාහරණයේ විදියටයි.

7 comments:

Madhawa Habarakada said...

එල එල, හුඟක් වටිනව, අනිත්වත් ඉක්මනටම ලියන්න. සුභ පතනව. :)

http://blogsinhala.com/ said...

We have joined your blog in http://blogsinhala.com/ Please register and joint your blog and win best blogger award and amazing prizes.

Thanks
Admin
http://blogsinhala.com/

පීවර් said...

දැන්නෙ හොඳ හරිය. තව පාඩම් කීයක් විතර තියෙයිද? මේ පාඩම් ප්‍රින්ට් කරගෙන පොතක් වගේ හදා ගත්තට කමක් නෑ නේද?

Thilina said...

එළ, නියමයි

dinesh said...

style ඇට්‍රිබියුට් එකේ style වලට මුලින් මොකද්ද දෙන වචනෙ.මම මේ පේජ් එක යාලුවන්ටත් මේල් කලා.උනුත් හෝ ගාල මේ දවස් වල මුල ඉදන් fallow කරනව.මේ දවස් වල ඕෆ් වෙන්නෙ රෑ 11ට12ට.ප්‍රැක්ටිකල් කරල බලන්න තමා වෙලාව නැත්තෙ.ඒත් අතාරින්නෙ නෑ.කොහොම හරි කරනවා.සමහර වෙබ් පේජ්වල source කෝඩ් එක දැක්කහම නම් පිස්සු හැදෙනවා.

Buddhika Karunanayaka (itbuddhika) said...

Your top bolgger malli,

හරිම වැදගත් මම හොදට කියවනවා ඉතා කැමැත්තෙන්
අපිව මග හලන්න එපා ධිගටම ලියන්න

Tera@® said...

ඇත්තටම මම මුල ඉදලාම ඔයාගේ පාඩමි ටික කියෙවිවා... ඒවාගේම මම්ත ටිටික ඒ ගැන හොදට ඉගෙනගෙන යනවා.. ඒක ඔයාට පින්සිද්ද වෙන්න තමා... පැහැදිලි කිරිම ගොඩක් හොදින් ‍තේරැමිගන්න පුලුවන්... ගොඩක් ස්තුතියි. දිගටම කරගෙන යන්න.

Post a Comment