- Inline: <> tag မ်ားတြင္ style attribute ျဖင့္ေရးျခင္း
- Internal: <head> ႏွင့္ </head> အတြင္းမွာ <style>element ျဖင့္ ေရးျခင္း
- External: CSS file တစ္ခုအေနျဖင့္ သီးသန္.ေရးသားထားျပီးမွ <head> section မွ <link> ျဖင့္ ခ်ိတ္ဆက္ အသံုးျပဳျခင္းတို. ျဖစ္ပါတယ္။
Inline Style
Inline Style ကို Element တစ္ခုတည္းမွာပဲ unique style ေတြ ေျပာင္းလဲဖုိ.အတြက္ အသံုးျပဳပါတယ္။ ထို.ေၾကာင့္ CSS ကို မိမိ ျပဳလုပ္လိုေသာ HTML element ၏ Start Tag အတြင္းတြင္ style attribute ျဖင့္ ထည့္သြင္းေရးသားရပါတယ္။ Style attribute တြင္ CSS ၏ properties မ်ားအားလံုးကို အသံုးျပဳေရးသား ႏိုင္ပါတယ္။ေအာက္ပါ HTML document မွ <h1> tag ႏွင့္ <p> tag တို.တြင္ CSS ကိုေရးသားျခင္းျဖင့္ Browser ေပၚတြင္ style မ်ား ေျပာင္းလဲ ေဖာ္ျပမွဳကို ေလ့လာႏိုင္ပါတယ္။
<!DOCTYPE html>
<html>
<body>
<h1 style="color:#ff0000; text-align:center;">This is center-aligned heading</h1>
<p style="color:blue; margin-left:20px;">This is paragraph</p>
</body>
</html>
မွတ္ခ်က္။ ။ အထက္ပါ Example မွ Start tag တြင္ ေရးထားေသာ style သည္ attribute ျဖစ္ပါတယ္။ color, text-align, margin-left တို.သည္ CSS ၏ properties မ်ား ျဖစ္ျပီး #FF0000, center, blue, 20px တို.သည္ CSS ၏ values မ်ားျဖစ္ပါတယ္။ CSS မွာ property ႏွင့္ value တစ္စံု (color:#FF0000) ကို Declaration လို.ေခၚပါတယ္။ style attribute ထဲတြင္ declaration မ်ားစြာ ေရးႏိုင္ျပီး declaration တစ္ခုျပီးတိုင္း ( ; ) ထည့္ေပးရပါတယ္။ text-align:center; ဆိုသည္မွာ element ကို browser ၏ အလယ္တည့္တည့္တြင္ ေဖာ္ျပဖို.ျဖစ္ပါတယ္။ <p> tag တြင္ေရးထားေသာ margin-left:20px; မွာ browser တြင္ျမင္ေတြ. ရေသာ ျမင္ကြင္း ၏ ဘယ္ဘက္ျခမ္း 20 px အကြာမွစျပီး ေဖာ္ျပဖို. ေရးသားျခင္းျဖစ္ပါတယ္။
Inline style သည္ element တစ္ခုတည္းကိုပဲ ကိုယ္စားျပဳ ပါတယ္။ <h1> tag တြင္ ေရးထားေသာ Inline style သည္ </h1> tag အဆံုးထိပဲ လုပ္ေဆာင္ေပးပါတယ္။ ထို.အတူ <p> tag မွ Style သည္လည္း <p> element တစ္ခုတည္းကိုသာ လုပ္ေဆာင္ေပးပါတယ္။
Browser တြင္ ေအာက္ပါအတိုင္း ျမင္ေတြ.ရပါတယ္...
Internal Style Sheet
Internal style ကို <head> ႏွင့္ </head> section ထဲမွာ <style> tag ျဖင့္ ေရးရပါတယ္။ တနည္းေျပာရလ်င္ <body> အတြင္းမွ tag တစ္ခုစီတြင္ attribute ျဖင့္ မေရးေတာ့ပဲ <head></head> အတြင္းတြင္ <style> tag ျဖင့္ ေရးသားျခင္းျဖစ္ ျဖစ္ပါတယ္။ <body> ထဲတြင္ <h1> element ႏွစ္ခု ရွိျပီး ႏွစ္ခုလံုးကို style တူတူ ျပဳလုပ္ခ်င္ ပါက Inline CSS ေရးသားမွဳတြင္ <h1> tag ႏွစ္ခုလံုးမွာ ေရးသားရျပီး Internal Style sheet ေရးသားမွဳတြင္ေတာ့ တစ္ၾကိမ္သာ ေရးသားျခင္းျဖင့္ <body> tag ထဲမွ <h1> tag မ်ားအားလံုး၏ style မ်ား ကိုေျပာင္းလဲေပးႏိုင္ ပါတယ္။Internet style ေရးနည္းမွာ_
<style type=”text/css”>
Tag name {CSS}
</style>
ေအာက္တြင္ ေရးျပထားေသာ နမူနာ အတုိင္းလိုက္ေရးျပီး Browser မွာေလ့လာၾကည့္ပါ။
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {color:blue;font-family:Arial;}
h1 {color:red;font-family:verdana;}
</style></head>
<body>
<h1>This is heading 1</h1>
<p> This is the first paragraph </p>
<h1>This is heading 2 </h1>
<p> This is the second paragraph. </p></body>
</html>
Browser တြင္ ေအာက္ပါအတုိင္းျမင္ရပါမယ္။
External Style sheet
External style sheet မွာ html document မ်ားစြာနဲ. အေကာင္းဆံုး ခ်ိတ္ဆက္အသံုးျပဳႏိုင္ပါတယ္။ CSS file တစ္ခုတည္းကို HTML document မ်ားစြာက ရယူအသံုးျပဳႏိုင္ပါတယ္။ ၄င္း CSS file ကို HTML document မွာ ယူသံုးဖို. အတြက္ <head></head> section မွာ <link> tag နဲ.ခ်ိတ္ဆက္ေပးရပါတယ္။ CSS file ႏွင့္ html file တို.သည္ folder တစ္ခုတည္းတြင္ရွိရပါမည္။CSS Link syntax:
<link rel="stylesheet" type="text/css" href="filename.css">
က်ေနာ္တို. CSS file တစ္ခုေဆာက္ၾကည့္ရေအာင္...
Step1:
ပထမဦးဆံုး folder တစ္ခု ကို မိမိၾကိဳက္ရာ ေနရာမွာ ႏွစ္သက္ရာ အမည္ေပးျပီး တည္ေဆာက္လိုက္ပါ။ျပီးလ်င္ Notepad သို.မပာုတ္ Notepad++ ကိုဖြင့္လိုက္ပါ။
Step 2:
Notepad++ တြင္ ေအာက္ပါ တို.ကိုလိုက္ေရးေပးပါ။body { background-color:#ddeeee;}
h1 {color:#ff00ff;}
p{font-family:"Times New Roman"; font-size 14px; color:#0000ff;}
Step 3:
File menu မွ save as ကို ႏွိပ္ျပီး style.css ပာု နာမည္ေပးျပီး အသစ္ေဆာက္ထားတဲ့ folder ထဲမွာ သိမ္းလိုက္ပါ။ .css ထည့္ျပီးေရးမွ css file အျဖစ္သိမ္းေပးမွာျဖစ္ပါတယ္။Step 4:
Notepad သို.မပာုတ္ Notepad++ တြင္ file menu မွ new ကို ႏွိပ္ျပီး document အသစ္ယူလိုက္ပါ။ျပီးလ်င္ ေအာက္ပါတို.ကို လိုက္ေရးျပီး index.html အမည္ျဖင့္သိမ္းလိုက္ပါ။
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"></head>
<body>
<h1> This is Heading </h1>
<p> This is paragraph. </p></body>
</html>
Step 5:
index.html ကို double click ႏွိပ္ၾကည့္ပါက ေအာက္ပါပံုအတိုင္းျမင္ရပါမယ္။
ယခု chapter မွာ color ေတြကို အသံုးျပဳသြားလို. ေနာက္ post မွာ HTML color အေၾကာင္းကို ေဖာ္ျပေပးပါမယ္။
No comments:
Post a Comment