သင္ခန္းစာ-၃
အရင္ေန႔ေတြကselectorေတြအေၾကာင္းသင္ခဲ့ပီးၿပီဆိုေတာ့ဒီေန႔ေတာ့ဒီေန႔ေတာ့cssရဲ႕propertiesနဲ႔valueေတြအေၾကာင္းတင္မယ္ဗ်ာ ဒီပထမပိုင္းမွာေတာ့ စာလံုးေတြအတြက္သီးသန္႔တင္ေပးမွာပါ ေနာက္အခန္းေတြက်မွပံုေတြလင့္ေတြေပါ့ဗ်ာselector{ properties:value; } ဒီလိုေရးရတယ္လို႔ေျပာခဲ့တယ္ေနာ္ခုpropertiesနဲ႔valueေတြအေၾကာင္းတြဲၿပီး႐ွင္းသြားမယ္ဗ်ာ ၁။ ။ font fontမွာသူနဲ႔တြဲတဲ့ဟာေတြကိုတင္ျပသြားပါမယ္ (က)font-family သူကေတာ့စာလံုပံုစံေတြပါ စာလံုးလိမ္လိမ္ေကာက္ေကာက္ေတြလိုမ်ိဳးေပါ့ ေရးနည္းကေတာ့p{ font-family:impact; } အဲ့လိုေရးပါတယ္ သူ႕ရဲ့valueေတြကေတာ့impact,time new roman,serial,အစ႐ွိသျဖင့္႐ွိပါတယ္ ေအာက္မွာစာလံုးပံုစံနဲ႔နာမည္ေတြကိုၾကည့္လိုက္ပါဦး
(ခ)font-style
သူကေတာ့စာလံုးအေစာင္းေတြစာလံုးထူထူေတေရးရာမွာသံုးပါတယ္ သူ႔ရဲ႕valueေတြကေတာ့
bold (စာလံုထူထူပါ)
italic(စာလံုးေစာင္းေစာင္းပါ)p{font-style:bold;}
(ဂ)font-weight
သူကေတာ့စာလံုးကိုboldတင္တာပါစာလံုးထူထူေပါ့ ေရးနည္းကp{font-weight:bold;}
(ဃ)font-variant
သူကစာလံုးပံုမွန္အရြယ္အစားလားနည္းနည္းႀကီးႀကီးလားေရးခ်င္ရင္သံုးပါတယ္ သူ႔ရဲ႕valueေတြကေတာ့ small,normal,စတာေတြပဲျဖစ္ပါတယ္p{font-variant:normal;}
(င)text-indent
သူကေတာ့စာကိုဘယ္ဘက္ေဘးမ်ဥ္းကေနညာဘက္ကိုတြန္းထုတ္ခ်င္ရင္သံုးပါတယ္သူ႔valueကိုpixels(px)နဲ႔တြက္ပါတယ္
p{font-indent:40px;}
(စ)font-size
သူကစာလံုးအရြယ္အစားကိုသတ္မွတ္တာပါသူ႔ကိုလည္းpxနဲ႔ရာခိုင္းႏႈန္းနဲ႔တြက္ခ်က္ပါတယ္p{font-size:30px;}
ေအာက္မွာpxတြက္ခ်က္ပံုေတြကိုပံုနဲ႔တကြျပထားပါတယ္ခမ်ာ
၂။ ။color
သူက႐ွင္းပါတယ္စာလံုးအေရာင္သတ္မွတ္တာပါp{color:green;}
ကဲအေပၚကcodeေတြအလုပ္လုပ္ပံုကိုid selectorသံုးၿပီးစမ္းၾကည့္ၾကရေအာင္
<html> <head> <style type="text/css"> #one{ font-family:impact; } #two{ font-style:italic; } #three{ font-weight:bold; } #four{ font-variant:small; } #five{ text-indent:100px; } #six{ font-size:100px; } #seven{ color:green; } </style> </head> <body> <p id="one">This is a font-family effect</p> <p id="two">This is a font-style effect</p> <p id="three">This is a font-weight effect</p> <p id="four">This is a font-variant effect</p> <p id="five">This is a font-indent effect</p> <p id="six">This is a font-size effect</p> <p id="seven">This is a color effect</p> </body> </html>
ကဲအေပၚကcodeကိုrunၾကည့္လိုက္ပါဦး
No comments:
Post a Comment