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

Monday, June 7, 2010

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

කලින් පාඩම කරා කරාමයි ආයෙත් මේ පැත්තට එන්නත් බැරි වුණා වැඩ ගොඩක් තිබුණ නිසා. ඉන්නකො මට මතක් කර ගන්න මොනාද කලින් වතාවෙදි කරේ කියලා. ම්ම්... හ්ම්ම්ම්.... හරි අපි කතා කරේ අර හැඩ කාරයා කොහොමද එයාගෙ වැඩ පෙන්නන්නේ කියල නේද. ආයෙත් ටික දවසකින් මුණ ගැහුණ නිසා කම්මැලිත් වගේ ලියන්න ගන්න. ඒත් ඉතින් කට්ටිය බන් ඉන්නවා නෙ මගෙන් ඉගෙන ගන්න. හරි හරි කිසි දේකට බය වෙන්න එපා අනිවාර්යෙන් මේ පාඩම ඉවර කරනවා ඉක්මණින්ම. දැන් ඉතින් මේ පුංචි පාඩමක් නේ කියල දෙන්නේ. ඇත්තෙන්ම අමතර පාඩමක්.

අපේ අරමුණට තව ටික දවසකින් යමුකෝ. ඒත් ඉතින් පටන් ගත්තුවා ඉක්මණින් ඉවර කරන්න අමාරුයි නේ කියල නොදී. ඒ නිසා ඉගෙන ගන්න අයත් ඉගෙන ගන්න. මගෙන් ඕනෙ දෙයක් අහන්න. මට මතකයි ඔයාලා දාල තිබුණු කොමෙන්ට් එහෙම. ඒවාටත් බොහොම ස්තූතියි. ඒත් තරහ වෙන්න එපා ඒවට උත්තර නුදුන්නට. ආඩම්බර කම නෙවෙයි හොඳේ. වැඩ වැඩි කම තමා. අද ටිකක් නිවාඩු පාඩුවේ ගෙදරට වෙලා ඉන්න තියෙන දවසක්. මොකද සෙනසුරාදාවක් නිසා. කමක් නෑ. ගෙදර ඉන්න නිසා උගන්වන්න තියෙන එක තමයි ගොඩක් හොඳ. මොකද ටික දවසකින් පාඩම් කීපයක්ම කියල දෙන්න බැරි වුන නිසා. කට්ටියත් මම හිතුවාට වඩා උනන්දුයි නොවැ. මම හිතනවා මේවා වල තියෙන දේවල්, උගන්වන දේවල් ඉගෙන ගන්නවාය කියලා කරලා බලලාම.

හරි. අපි ඉගෙන ගත්තා තනි පේළියකින් style දාන්නේ කොහොමද කියලා ටැ
ග් එකක. මගේ කලින් පාඩමෙන් මම කීවේ හැඩ වැඩ කර ගන්න පුළුවන් වැදගත්ම උප ඇට්‍රිබියුට් කීපයකුයි ඒවායෙ යොදන්න පුළුවන් අගයනුයි තමා. ඒත් අපි උදාහරණයක් කරේ නෑ. මේක ඉතින් ඕනෙම ටැග් එකකට පොදුයි කීව නේ. ඒ නිසා බය නැතිව body ටැග් ඇතුලෙ ලියන්න පුළුවන් ටැගයක් තොර ගන්න style පාවිච්චි කරන්න. මෙන්න මේ පහල තියෙන විදියටයි අපේ උදාහරණෙ මම කියල දෙන්නේ.
<font style="background-color:yellow; color:#0000ff; font-size: 20px; font-weight: bold; border: 2px red dashed; "
>I love my country, Sri Lanka.</font>

ඕක පෙන්නන්නේ මෙන්න මේ පහල තියෙන විදියට. බලන්න. font ටැග් එකේ එක ඇට්‍රිබියුට් එකක්වත් පාවිච්චි නොකර style ටැග් එකෙන් විතරක් හැ වැඩේමත්, ඊට වඩා යමකුත් කර ගත්තු හැටි.

I love my country, Sri Lanka.

වල බලපුළුවන්කාර කම මෙතනින් නැවතෙන් නෑ. මේ තමයි ප්‍රබලත්වය වැඩිම ක්‍රමය style යෙදීමේ. ඒ කීවේ ටැග් එකක් ඇතුලේ style ඇට්‍රිබියුට් එකක styles ලබා දීම තමයි වෙන කොහේ style අපි දුන්නත් අවසාන වශයෙන් වැඩ කරන බලවත්ම ආකාරයේ styles යෙදීම. හැබැයි මේ ක්‍රමේ හරිම කරදරයි. මොකද අපිට එක වගේ තැන් කීපයක් තිබුණොත්, ඒ හැම තැනටම ගිහින් අතින්ම වෙනස් කර ගන්න වෙනවා ඒ හැම තැනක්ම.style වලින් ආවේ. ඒ ක්‍රමේ තමයි වඩාත්ම පාවිච්චි වෙන්නෙත්. ඒ වගේම ඊට සමාන මීළඟ ක්‍රමේ.

ඒ ක්‍රමේ තමයි, html ටැග් යුගලක් අතරේ වෙනමම අපේ වෙබ් පිටුවේ තැනක, කලින්ම අපිට තැන් තැන් වලට යොදා ගන්න පුළුවන් style ටික හදා ගෙන තියා ගන්න විදිය. මේකෙන් ලැබෙන ප්‍රයෝජනේ තමයි අපිට එක style එකක්, අපේ වෙබ් පිටුවේ ඕනෙම තැනක නැවත නැවත ලිවීමකින් තොරව පාවිච්චි කර ගන්න පුළුවන් වීම හරිම ලේසියෙන්ම. ඔන්න ඔය අපහසුව නැති කර ගන්න තමයි මීලඟට ඉගෙන ගන්න ක්‍රමේ.

ඒ ටැග සාමාන්‍යයෙන් ලියන්න ඕනේ head ටැග් යුගල අතරේ. නීතියක් නෙවෙයි. ඒ සාමාන්‍ය ක්‍රමේ. body ටැග් යුගල ඇතුලෙත් ලියන්න පුළුවන් ඕනෙ නම්. ඒ ටැග් එකේ නමත් style ම තමයි. යුගල ටැග් එකක්.
<style></style>. මේ ටැග් යුගලට ඇට්‍රිබියුට් එකක් තියෙනවා විශේෂ. ඒ type කියන එක. ඒකේ අගය විදියට දෙන්න ඕනෙ, "text/css" කියන එක. ලියන්නේ
<style type="text/css" ></style> වගේ.

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

9 comments:

Tera@® said...

නියමට තියෙනවා...ඊලග එකත් ඉක්මනට ......

dinesh said...

පොඩී ප්‍රශ්ණයක් තියනව.දැන් අපි මේ විදියෙ ඇට්‍රිබියුට් එකක් දීපුවාම(search) මේ අපි දෙන ලින්ක් එක ඕපන් වෙන්නෙ අපේම පේජ් එකේනෙ.ඒ කියන්නෙ ආපහු අපි හිටපු පේජ් එකට යන්න බැක් යන්න ඕනැනෙ.එහෙම නැතුව මේ ලින්ක් එක අලුත් වින්ඩෝ එකක ඕපන් වෙන්න දෙන්නෙ කොහොමද?

TeeRox said...

අහ්! ඒකට තමයි ලින්ක් එකකට target කියලා ඇට්‍රිබියුට් එකක් තියෙන්නේ. අන්න ඒ target ඇට්‍රිබියුට් එකට දෙන අගයන් තියෙනවා වෙනමම page එකක් ඕපන් කර ගන්න ලින්ක් එකක් click කරාම. ඒවා තමයි,
_blank
_parent
_self
_top

අපි iframe එකක ලින්ක් එකක් click කරලා වෙබ් පිටුවක් දිග ඇරියා මතක ඇති නේ. අන්න ඒකෙදි target එකට දුන්නේ iframe එකේ නම. ඒත් මෙතෙන්දි දෙන්නේ ඔය උඩ තියෙන අගයන්. මේවායෙන් එක එක වැඩ වෙන්නේ. ඔයාගේ ප්‍රශ්නෙට උත්තරේ ලැබෙන්නේ ඕකෙන් _blank දැම්මාමයි.

TeeRox said...

පුදුමයි මට ඕක මග ඇරුණා. බොහොම ස්තූතියි මතක් කරාට.

පීවර් said...

වනද වගේම හරිම ෂෝක්. මම බලාගෙන ඉන්නෙ ඉවර වෙනකන්. මේක ඉවර උනාට පස්සෙ, වෙබ් පිටුවක් හදමු නේද? ඔයා උගන්නපු ඔක්කම දාල.

TeeRox said...

hadamu hadamu... et meka iwara wenne naa nee... :(

dinesh said...

div,/div මේ ටැග් එක භාවිතා වෙන්නෙ මොන අවස්ථා වලදිද?

දුමී said...

මල්ලි, ඔයාගේ e-mail ID එක දෙන්න පුළුවන්ද ? PHP ප්‍රොජෙක්ට් එකක් තියෙනවා කරන්න පුළුවන්ද ?

TeeRox said...

මේ දවස් වල මගේ degree එකෙ project එක නිසා ටිකක් busy අයියේ.

Post a Comment