HTML Style မ်ား - CSS
0
HTML Style မ်ား - CSS
HTML element ေတြကုိ စတုိင္အမ်ိဳးမ်ိဳးလုပ္ဖုိ႔ CSS (Cascading Style Sheet မ်ား) ကုိသုံးပါတယ္။
စာလုံးပုံစံနဲ႔ အေရာင္ေတြကုိ ၾကည့္ပါ။
This text is in Verdana and red
This text is in Times and blue
This text is 30 pixels high
HTML မွာ CSS သုံးျပီး Style မ်ားျပဳလုပ္ျခင္း
HTML Element ေတြကုိ ပုိျပီး အဆင္ေျပေျပနဲ႔ Style လုပ္ႏိုင္ဖုိ႔အတြက္ CSS ကုိ HTML 4 နဲ႔အတူ စတင္မိတ္ဆက္ခဲ့ပါတယ္။
ေအာက္မွာျပထားတဲ့ နည္းလမ္းေတြအရ CSS ကုိ HTML Document ထဲကုိ ထည့္ႏိုင္ပါတယ္။
ေအာက္မွာျပထားတဲ့ နည္းလမ္းေတြအရ CSS ကုိ HTML Document ထဲကုိ ထည့္ႏိုင္ပါတယ္။
- Inline - HTML element ေတြထဲမွာပဲ styleattribute ကုိအသုံးျပဳျခင္း။
- Internal - <head> section ထဲမွာ <style>element ကုိသုံးျပီးေရးျခင္း။
- External - ျပင္ပ CSSဖိုင္ တစ္ခုေရးျပီးခ်ိတ္ဆက္ျခင္း။
ျပင္ပဖုိင္တစ္ခုစီသီးျခားေရးျပီး HTML ထဲကုိ ထည့္သုံးဖုိ႔ အၾကံျပဳခ်င္ပါတယ္။
ဒီ HTML သင္ခန္းစာ မွာေတာ့ style attribute ကုိသုံးျပီး CSS ကုိမိတ္ဆက္ေပးလုိက္ပါတယ္။ ဥပမာေတြက ရုိးရွင္းပါတယ္။ Code ေတြကလည္း ကုိယ္တုိင္ေလ့က်င့္ဖုိ႔လြယ္ပါတယ္။
ဒီ HTML သင္ခန္းစာ မွာေတာ့ style attribute ကုိသုံးျပီး CSS ကုိမိတ္ဆက္ေပးလုိက္ပါတယ္။ ဥပမာေတြက ရုိးရွင္းပါတယ္။ Code ေတြကလည္း ကုိယ္တုိင္ေလ့က်င့္ဖုိ႔လြယ္ပါတယ္။
Inline Style မ်ား
Inline style ကုိ ဝဘ္စာမ်က္ႏွာ တစ္ခုရဲ့ လုိခ်င္တဲ့ အပုိင္းတစ္ခုတည္းအတြက္ပဲသီးျခား style လုပ္ခ်င္ရင္သုံးသင့္ပါတယ္။
Inline style ကုိသုံးဖုိ႔အတြက္ ကုိ Style လုပ္ခ်င္တဲ့ Tag မွာ style attribute ကိုသုံးရမွာျဖစ္ပါတယ္။
Style attribute မွာ CSS တန္ဖုိးတစ္ခုခုပါဝင္ႏုိင္ပါတယ္။ ေအာက္က ဥပမာမွာ စာသားအေရာင္န႔ဲ စာပုိဒ္ရဲ့ ဘယ္ဖက္ Margin ကုိေျပာင္းဖုိ႔အတြက္ CSS ကိုဘယ္လုိသုံးထားတယ္ဆုိတာ ၾကည့္ႏုိင္ပါတယ္။
Inline style ကုိသုံးဖုိ႔အတြက္ ကုိ Style လုပ္ခ်င္တဲ့ Tag မွာ style attribute ကိုသုံးရမွာျဖစ္ပါတယ္။
Style attribute မွာ CSS တန္ဖုိးတစ္ခုခုပါဝင္ႏုိင္ပါတယ္။ ေအာက္က ဥပမာမွာ စာသားအေရာင္န႔ဲ စာပုိဒ္ရဲ့ ဘယ္ဖက္ Margin ကုိေျပာင္းဖုိ႔အတြက္ CSS ကိုဘယ္လုိသုံးထားတယ္ဆုိတာ ၾကည့္ႏုိင္ပါတယ္။
<p style=“color:blue;margin-left:20px;">ဒါကစာပုိဒ္တစ္ခုျဖစ္ပါတယ္</p>
HTML Style ဥပမာ - ေနာက္ခံအေရာင္
ေနာက္ခံအေရာင္တန္ဖုိးက Element တစ္ခုရဲ့ ေနာက္ခံအေရာင္ကုိ သတ္မွတ္ပါတယ္။
ဥပမာ
<!DOCTYPE html>
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">ဒါကေခါင္းစဥ္တစ္ခုျဖစ္ပါတယ္။</h2>
<p style="background-color:green;">ဒါက စာပုိဒ္တစ္ခုျဖစ္ပါတယ္</p>
</body>
</html>
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">ဒါကေခါင္းစဥ္တစ္ခုျဖစ္ပါတယ္။</h2>
<p style="background-color:green;">ဒါက စာပုိဒ္တစ္ခုျဖစ္ပါတယ္</p>
</body>
</html>
ဒီေနာက္ခံအေရာင္တန္ဖုိးက အရင္တုန္းကသုံးခဲ့တဲ့ပုံစံ အတုိင္းျပမွာျဖစ္ပါတယ္။
HTML Style ဥပမာ - Font အမ်ိဳးအစား၊ အေရာင္နဲ႔ အရြယ္အစား
Font အမ်ဳိးအစား၊ အေရာင္နဲ႔ အရြယ္အစားတန္ဖုိးေတြက Element တစ္ခုမွာပါတဲ့ စာသားရဲ့ font အမ်ဳိးအစား၊ အေရာင္နဲ႔ အရြယ္အစား ေတြကိုသတ္မွတ္ပါတယ္။
ဥပမာ
<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">ေခါင္းစဥ္တစ္ခု</h1>
<p style="font-family:arial;color:red;font-size:20px;">စာပုိဒ္တစ္ခု။</p>
</body>
</html>
<html>
<body>
<h1 style="font-family:verdana;">ေခါင္းစဥ္တစ္ခု</h1>
<p style="font-family:arial;color:red;font-size:20px;">စာပုိဒ္တစ္ခု။</p>
</body>
</html>
ဒီ font အမ်ဳိးအစား၊ အေရာင္နဲ႔ အရြယ္အစားတန္ဖုိးက သိပ္မသုံးၾကေတာ့တဲ <font> tag အေဟာင္း (အရင္တုန္းကသုံးခဲ့တဲ့ပုံစံ) အတုိင္းျပမွာျဖစ္ပါတယ္။
HTML Style ဥပမာ- စာသား Alignment
text-align ရဲ့တန္ဖုိးဟာ Element တစ္ခုရဲ့ စာသားအတြက္ ေရျပင္ညီ alignment ကုိအထူးျပဳပါတယ္။
ဥပမာ
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">အလည္ပို႔ထားတဲ့ ေခါင္းစဥ္</h1>
<p>စာပုိဒ္တစ္ခုျဖစ္ပါတယ္။</p>
</body>
</html>
<html>
<body>
<h1 style="text-align:center;">အလည္ပို႔ထားတဲ့ ေခါင္းစဥ္</h1>
<p>စာပုိဒ္တစ္ခုျဖစ္ပါတယ္။</p>
</body>
</html>
text-align တန္ဖုိးက သိပ္မသုံးၾကေတာ့တဲ့ Tag အေဟာင္း <center> tag ပုံစံ ျဖစ္ပါတယ္။
Internal Style Sheet ဆိုသည္မွာ?
Internal style sheet ကုိလုိခ်င္တဲ့ ဝဘ္စာမ်က္ႏွာ တစ္ခုတည္းကုိပဲ သီးျခား style လုပ္ခ်င္ရင္သုံးသင့္ပါတယ္။ သူ႔ကုိ <head> Section ထဲမွာ <style> Tag ကုိသုံးျပီးေရးရမွာျဖစ္ပါတယ္။
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
External Style Sheet ဆိုသည္မွာ ?
external style sheet မွာ ဝဘ္စာမ်က္ႏွာ အမ်ားအျပားအတြက္ တူညီတဲ့ Style လုပ္ႏုိင္ဖုိ႔သုံးရတာျဖစ္ပါတယ္။ external style sheet တစ္ခုနဲ႔ ဝဘ္ဆုိဒ္ တစ္ခုလုံးရဲ့ Style ကုိစာမ်က္ႏွာတစ္ခုတည္းကုိ ျပင္ရုံနဲ႔ ေျပာင္းႏုိင္မွာျဖစ္ပါတယ္။ ဒါေပမယ့္ ဝဘ္စာမ်က္ႏွာ တုိင္းကုိေတာ့ <link> Tag သုံးျပီး ခ်ိတ္ထားရမွာျဖစ္ပါတယ္။ <link> Tag ကုိ <head> section ထဲမွာထားရမွာျဖစ္ပါတယ္။
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
HTML Style Tag မ်ား
| Tag | အေၾကာင္းအရာ |
|---|---|
| <style> | Document တစ္ခုအတြက္ Style လုပ္ဖုိ႔သုံးပါတယ္။ |
| <link /> | Document တစ္ခုနဲ႔ ျပင္ပ CSS ဖုိင္တစ္ခုခ်ိတ္ဖုိ႔ သုံးပါတယ္။ |
Deprecated Tag နဲ႔ Attribute မ်ား
HTML 4 မွာ tag အမ်ားအျပားနဲ႔ attribute ေတြမ်ားစြာကုိ Style လုပ္ဖို႔သုံးၾကပါတယ္။ အဲဒါေတြကို New HTML က လက္မခံပါ ဘူး။
ဒါေၾကာင့္ <font>, <center> နဲ႔ <strike> Element ေတြနဲ႔ အေရာင္ နဲ႔ bgcolor Attribute ေတြကုိမသုံးပါန႔ဲ။
ဒါေၾကာင့္ <font>, <center> နဲ႔ <strike> Element ေတြနဲ႔ အေရာင္ နဲ႔ bgcolor Attribute ေတြကုိမသုံးပါန႔ဲ။
http://www.soemoeaung.com/
ခုလိုအားေပးတဲ့အတြက္ အထူးေက်းဇဴးတင္ပါေၾကာင္း ေျပာၾကားပါရေစ..ဘေလာ့ခရီးသည္မွ နည္းပညာမ်ားအား မည္သူမဆို လြတ္လပ္စြာ ကူးယူသုံးစြဲနိဳင္ပါတယ္.. ကြ်န္ေတာ္ ပိုင္ဆိုင္ေသာေနရာေလးမ်ားအား ဆက္လက္ လည္ပါတ္လိုပါက ***************************************
About the author
နည္းပညာမ်ား ကို က် ေနာ္သိသေလာက္ ျပန္လည္ မ်ွေဝသြားပါမည္. Admin >> အိုင္တီရဲ ကို.
0 comments: