Oh! You come to my blog. Welcome....
ေအာက္က CSS နဲ႕ div သတ္မွတ္တဲ့ ပံုစံ မွာ div ကို class and id တို႕နဲ႕ တြဲျပီး ေခၚသံုးထားတာကို သတိျပဳေစခ်င္ပါတယ္ ၊ အဲဒီလို ေခၚသံုးလိုက္ေတာ့ body ထဲမွာ ကိုလိုခ်င္တာကို div နဲ႕ format ခ်လို႕ ရတယ္ ၊ div သည္ group -element ေတြကို format လုပ္နိုင္တာကို သတိျပဳမိပါမွာ
ဲေပၚလာေသာပံုကို ၾကည္႕လိုက္ပါ---
လြတ္လပ္ေပ်ာ္ရြင္ေနေသာ ခ်စ္သူ ေမွာင္မိုက္ေသာ ကိုဘဝ ထဲကိုမလာပါနဲ႕ကြာ.
div(division) သည္ HTML Document ထဲမွ အစိတ္အပိုင္းတစ္ခုကို သတ္မွတ္ရန္အသံုးျပဳပါ သည္၊ ဆိုလိုတာက block –element ေတြကို အုပ္စုဖြဲ၍ style fromat အျဖင့္ အသံုးျပဳ ပါသည္။ ျပီးေတာ့ <div> tag သည္ web page တစ္ခု တည္ေဆာက္ရန္(layout) CSS နွင့္ အသံုးမ်ားပါတယ္။ ေအာက္ကပံုစံကိုၾကည့္လိုက္ပါဦး------
<html> <body> <h3>ေခါင္းစဥ္</h3> <p>စာပိုဒ္။</p> <div style="color:#008000"> <h3>ေခါင္းစဥ္</h3> <p>စာပိုဒ္။</p> </div> </body> </html> |
အစိမ္းေရာင္ေျပာင္းသြားတာက style color သတ္မွတ္လို႕ပါ၊ Style ေနရာမွာ က်န္တဲ့အရာေတြကို
အစားထိုးအသံုးျပဳနိုင္ပါတယ္။ဒီေနရာမွာ သတ္မွတ္ေသာ style သည္ inline style ျဖစ္ပါတယ္။
ေခါင္းစဥ္စာပိုဒ္။ ေခါင္းစဥ္စာပိုဒ္။ |
ေအာက္က CSS နဲ႕ div သတ္မွတ္တဲ့ ပံုစံ မွာ div ကို class and id တို႕နဲ႕ တြဲျပီး ေခၚသံုးထားတာကို သတိျပဳေစခ်င္ပါတယ္ ၊ အဲဒီလို ေခၚသံုးလိုက္ေတာ့ body ထဲမွာ ကိုလိုခ်င္တာကို div နဲ႕ format ခ်လို႕ ရတယ္ ၊ div သည္ group -element ေတြကို format လုပ္နိုင္တာကို သတိျပဳမိပါမွာ
<html> <head> <style type="text/css"> div.kyawko { margin: 2px; border: 1px solid #0000ff; height: auto; width: auto; float: left; text-align: center; } } div.kyawko:hover {background:#66ff66;} div.thu { text-align: center; font-weight: normal; width: 130px; margin: 2px; } </style> </head> <body> <div class="kyawko"> <img src ="https://sites.google.com/site/moethu33/thet-mon-myint-02.jpg"width="120"height="90"></a> <div class="thu">သက္မြန္ျမင့္(ခ်စ္ခ်စ္)</div> </div> <div class="kyawko"> <img src="https://sites.google.com/site/moethu33/plw.jpg"width="110" height="90" /> <div class="thu">ပုလဲ(ခ်စ္သူ)</div> </div> </body> </html> |
ဥပမာ မွာ (div. kyawko) ဆိုျပီး ေခၚသံုးထားတာကိုေတြ႕မွာပါ။
div. kyawko ဆိုတာ image ၏ size ကိုသတ္မွတ္တာ မဟုတ္ပါဘူး ၊ image frame ကို သတ္မွတ္သာ ျဖစ္ပါတယ္၊( ေဘာင္ခက္တာေပါ့ဗ်ာ) ။
div.kyawko:hover ဆိုတာ link style ကို သတ္မွတ္ထားတာပါ။ ကၽြန္ေတာ္ က ဒီေနရာမွာ frame တစ္ခုလံုးကို hover လုပ္ထားတာျဖစ္ပါတယ္။ image ရိွတဲ့ေနရာကိုတာ hover လုပ္ျခင္တယ္ဆိုရင္ေတာ့
div.kyawko a:hover img {border: 1px solid red;} ဆိုျပီး ေၾကညာရပါတယ္။ img ဆိုတာေတာ့ ပါရပါမယ္။ဒီေနရာမွာေတာ့ hover style မေပၚပါဘူး။
div.lin ဆိုတာ ပံုထဲမွာ ေရးထားတဲ့ စာသားေတြရဲ႕ style ကို သတ္မွတ္သာ ျဖစ္ပါတယ္။
 သက္မြန္ျမင့္(ခ်စ္ခ်စ္)  ပုလဲ(ခ်စ္သူ) |
Span
Span သည္ inline style ေတြသတ္မွတ္တဲ့ အခါမွာ အသံုးမ်ားပါတယ္။ CSS နဲ႕သတ္မွတ္မယ္ ဆိုရင္ေတာ့ class ကိုေတာ့ ေခၚသံုးရပါတယ္။ ကိုလိုခ်င္ေသာ ေနရာေရာက္မွ (span class=” “) ဆိုျပီးေၾကညာလိုက္ေပါ့။ ေအာက္က ဥပမာေတြ ၾကည့္လိုက္ပါဦး--------
<html> <head> <style type="text/css"> .kyaw {color:blue;font-weight:bold} .ko {color:green;font-weight:bold} </style> </head> <body> <p>လြတ္လပ္ေပ်ာ္ရြင္ေနေသာ <span class ="kyaw">ခ်စ္သူ</span> ေမွာင္မိုက္ေသာ <span class="ko">ကိုဘဝ</span> ထဲကိုမလာပါနဲ႕ကြာ.</p> </body> </html> |
ဲေပၚလာေသာပံုကို ၾကည္႕လိုက္ပါ---
လြတ္လပ္ေပ်ာ္ရြင္ေနေသာ ခ်စ္သူ ေမွာင္မိုက္ေသာ ကိုဘဝ ထဲကိုမလာပါနဲ႕ကြာ.
No comments:
Post a Comment