သင္ခန္းစာ-၄
သင္ခန္းစာ(၃)ရဲ႕အဆက္ပါ စာလံုးေတအတြက္ပဲအဓိကထားေျပာသြားမွာပါ ေရွ႕အခန္းမွာေတာ့ fontနဲ႔ရွင္းသြားတယ္ ဒီတစ္ခါtextနဲ႔ရွင္းပါမယ္ (၁)text-indent သူကေတာ့စာတန္းကိုဘယ္ဘက္မ်ဥ္းစကေနညာဘက္ကိုခြာေစလိုတဲ႔အခါသံုးပါတယ္ သူ႔ရဲ႕valueကေတာ့ pxပါp{ text-indent:100px; } (၂)text-align သူကေတာ့စာတန္းကိုဘယ္ဘက္ကေနကပ္ေရးမွာလားညာဘက္ကေနကပ္ေရးမွာလားအလယ္မွာေရးမွာလား အဲ့ဒီအခါမွာသံုးပါတယ္ သူ႔valueေတြကေတာ့ left,right,centerp{ text-align:center; } (၃)text-decoration သူကေတာ့စာလးံုေအာက္မွာမ်ဥ္းတားတာ စာလံုးအေပၚမွာမ်ဥး္ဆြဲတာ စာလံုးကိုျဖတ္မ်ဥ္းဆြဲတာ linkေတလိုမ်ဥ္းပါရင္မ်ဥ္းေဖ်ာက္တဲ႔ေနရာမွာသံုးပါတယ္ သူ႔ရဲ႕valueေတြကေတာ့ underline,overline,line-through,noneတို႔ပဲျဖစ္ပါတယ္p{ text-decoration:underline; } (၄)letter-spacing သူကေတာ့စာလံုးအစိပ္အက်ဲအတြက္သံုးပါတယ္ valueကpxပါp{ letter-spacing:5px; } (၅)text-transform သူကေတာ့ စာလံုးေတကိုအျကီးနဲ႔ေရးတာ အေသးနဲ႔ေရးတာ ေရွ႕စာလံုးကအျကီးေနာက္စာလံုးကအေသးနဲ႔ေရးလိုတဲ့အခါမွာသံုးပါတယ္ သူ႔ရဲ႕valueေတကေတာ့ uppercase(စာလံုးအျကီး) lowercase(စာလံုးအေသး) capitalize(ေရွ႕စာလံုးအၾကီးေနာက္စာလံုးအေသး)ေတြပဲျဖစ္ပါတယ္p{ text-transform:capitalize; } ကဲcodeေလးေတြရဲ႕အလုပ္လုပ္ပံုကိုျကည့္ျကရေအာင္<html> <head> <style type="text/css"> #idt{ text-indent:100px; } #alnl{ text-aling:left; } #alnc{ text-align:center; } #alnr{ text-align:right; } #dcru{ text-decoration:underline; } #dcro{ text-decoration:overline; } #dcrt{ text-decoration:line-through; } a{ text-decoration:none; } #spac{ letter-spacing:8px; } #trfu{ text-transform:uppercase; } #trfl{ text-transform:lowercase; } #trfc{ text-transform:capitalize; } </style> </head> <body> <h2>1-text-indent</h2> <p id="idt">This is text-indent effect</p> <h2>2-text-align</h2> <p id="alnl">This is text-align:left effect</p> <p id="alnc">This is text-align:center effect </p> <p id="alnr">This is text-align:right effecf</p> <h2>3-text-decoration</h2> <p id="dcru">This is text-decoration:underline effect</p> <p id="dcro">This is text-decoration:overline effect</p> <p id="dcrt">This is text-decoration:line-through effect</p> <a href="link">This is text-decoration:none effect.It is hide the underline from link.</a> <h2>text-spacing</h2> <p id="spac">This is letter-spacing effect</p> <h2>text-transform</h2> <p id="trfu">this is text:transform:uppercase effect</p> <p id="trfl">This is text-transform:lowercase effect</p> <p id="trfc">This is text-transform:capitalize effect</p> </body> </html> ကဲအေပၚကcodeကိုcopyကူးrunပီးဘာေတထူးျခားလာလဲၾကည့္လိုက္ဦးေနာ္
No comments:
Post a Comment