Saturday, November 12, 2016
Using CSS With HTML Document
CSS ကုတ္ေတြကို HTML Doucment ေတြနဲ႔ ခ်ိတ္ဆက္အသံုးျပဳပံု သံုးမ်ိဳးရွိတယ္၊
1. Inline Style ဒီနည္းကေတာ့ CSS ကုတ္ေတြကို HTMl Doucment ရဲ့ စာေၾကာင္းေတြ Tags ေတြထဲမွာ တိုက္ရိုက္ထည့္ျပီးသံုးတဲ့နည္းပါ၊
2. Internal Style ဒီနည္းကေတာ့ CSS ကုတ္ေတြကို HTML Document ရဲ့ Head Section (tags) ၾကားထံမွာ ထည့္ျပီး သံုးတဲ့နည္းပါ၊
3. External Style ဒီနည္းကေတာ့ CSS ကုတ္ေတြ ကိုဖိုင္တစ္ဖိုင္ထဲမွာ ထည့္ျပီး HTML Doucment ကေန ေခၚယူ အသံုးျပဳတဲ့နည္းပါ၊
ႈအခု အထက္က နည္းသံုးခုလံုးကို ေအာက္က HTML ဖိုင္းကို အသံုးျပဳျပီးရွင္းျပသြားမယ္၊
Inline Style
<body>
<b> hey now brown cow in down town </b>
<p> Noting last for ever but my love. </p>
</body>
အထက္က HTML element ႏွစ္ခုကို စာလံုးအေရာင္ နဲ႔ အရြယ္အစားေျပာင္းမယ္၊ စာလံုးအေရာင္ အနီေရာင္ စာလံုး အရြယ္အစား 20
pxiel ေျပာင္းလိုက္မယ္၊ ပထမဆံုး Inline Style ကိုသံုးမယ္၊
<body>
<b style= "color:red ; font-size : 20px"> hey now brown cow in down town </b>
<p style= "color:red ; font-size : 20px"> Noting last for ever but my love. </p>
</body>
အထက္မွာေတာ့ Inline Style ကိုသံုးျပီး HTML Document ထဲ ကို CSS ကုတ္ထည့္လိုက္ပါပီ၊ ပထမစာေၾကာင္းျဖစ္တဲ့ <b> hey now brown cow in
down town </b> ဆိုတဲ့ စာေၾကာင္းကို CSS ထည့္ဖို႔အတြက္ အဖြင့္ <b ထဲမွာ style “color: red ; font-size :20”> ဆိုျပီး CSS Style ကို စာေၾကာင္း
ကို၀ိုင္းထားတဲ့ HTML Tag ထဲမွာပဲ တိုက္ရိုက္ေရးထည့္လိုက္တယ္၊ ဒီလိုတိုက္ရိုက္ HTML Tags ထဲမွာေရးထည့္ျပီးသံုးတဲ့နည္းကိုေတာ့ Inline Style CSS
လို႔ေခၚတယ္၊
ဒုတိ ယ <p> Noting last for ever but my love. </p> ဆိုတဲ့စာေၾကာင္းကို စာလံုး အေရာင္ အနီေရာင္ စာလံုး အရြယ္အစား 20px ျဖစ္ဖို႔အတြက္ CSS
ကုတ္ကို အဖြင့္ <p ရဲ့ အတြင္းမွာတိုက္ရိုင္ထည့္ေရးလိုက္တယ္၊ ဒီနည္းကိုပဲ Inline Style CSS လို႔ေခၚတာပါ၊
HTML Document ရဲ့ Elements ေတြထဲမွာ CSS ကုတ္ေတြကို တိုက္ရိုက္ထည့္ေရးတဲ့အခါ ၾကရင္ေတာ့ style = “” ဆိုတဲ့တည္ေဆာက္ပံုကိုသံုးပါတယ္၊
style= “” လို႔ေရးျပီး ႏွစ္ထပ္ေကာ္မာထဲမွာ ၾကိဳက္ရာ Declaration ေတြကိုထည့္သံုးႏိုင္ပါတယ္၊ ထည့္သံုးတဲ့ Declaration ေတြအားလံုးရဲ့ အစနဲ႔ အဆံုး
မွာေတာ့ ႏွစ္ထပ္ေကာ္မာပါဖို႔မေမ့နဲ႔ အလယ္ေတြမွာလဲ ျဖတ္ျပီးမထည့္မိေစနဲ႔၊
Internal Style CSS
ဒီနည္းကေတာ့ ပိုျပီးရွင္းပါတယ္၊ သင္အသံုးျပဳလိုတဲ့ CSS ကုတ္ေတြကို HTML ရဲ့ Head Tags ၾကားမွာထည့္ရံုပါပဲ၊ မထည့္ခင္ သင္ထည့္ထားတဲ့ကုတ္ေတြ
က CSS ကုတ္ေတြျဖစ္ေၾကာင္းကိုေတာ့ Browser က သိေအာင္ေၾကျငာရဦးမယ္၊ ေၾကျငာဖို႔အတြက္ သံုးတာကေတာ့
<style type= “text/css”>
</style>
ဆိုျပီးေရးေပးရတယ္၊ ျပီးရင္ သူတို႔ရဲ့ ၾကားမွာ CSS ကုတ္ေတြကိုထည့္ေပးရတယ္၊ ေအာက္က အတုိင္း
<html>
<head>
<title>what's up </title>
<style type="text/css">
b{
color : red;
font-size : 20px;
}
p{
color : red;
font-size : 20px;
}
</style>
</head>
<body>
<b > hey now brown cow in down town </b>
<p > Noting last for ever but my love. </p>
</body>
</html>
အထက္က ကုတ္မွေတာ့ body မွာပါတဲ့ HTML Elements ႏွစ္ခုျဖစ္တဲ့ <b> နဲ႔ <p> တို႔ကို <head> Tags ၾကားမွာရွိတဲ့ CSS ကုတ္ေတြကေနလွမ္းျပီး
အလွဆင္တဲ့ပံုပါ၊ ေရးနည္းကေတာ့ ေရွ႕ က Selector {property:value;} ဆိုတဲ့နည္းကိုသံုးျပီးေရးတာပါ၊
External Style CSS
ဒီနည္းကေတာ့ အေကာင္းဆံုးနဲ႔ အဆင့္အျမင့္ဆံုးနည္းပါ၊ 72coder က အၾကံျပဳလိုတာကေတာ့ ဒီနည္းကိုပဲ သံုးျပီးေလ့က်င့္ပါ၊ ဒီနည္ကို ကၽြမ္းက်င္မွသာလွ်င္
Web Designer ေကာင္းေကာင္းျဖစ္ႏိုင္တယ္၊ ျမန္မာ ႏိုင္ငံ အတြင္း ၀က္ဆိုက္ဆြဲမယ့္ သူေတြ ကိုပိုင္း ဆိုက္ ပုစိေကြးေလးေတြ ေရးမယ့္သူေတြေတာ့
ၾကိဳက္တဲ့နည္းကိုသံုးရတယ္၊ ႏို႔ေပမယ့္ ႏိုင္ငံျခား ကေန ဆိုက္ေတြကို ေလလံဆြဲျပီး အလုပ္လုပ္သည္ျဖစ္ေစ CSS Develper ေတြအျဖစ္ 72coder က
Carreer ေအာက္မွာ ေဖာ္ျပထားတဲ့အလုပ္ေတြကိုလုပ္သည္ျဖစ္ေစ တကယ့္ကိုလက္ေတြက်ျပီး အဆင့္ျမင့္ျမင့္လုပ္ႏိုင္ဖို႔ External Style ကိုပဲသံုးပါ၊
ေရးနည္းကေတာ့ Internal Style ကိုေရးပံုနဲ႔တူတယ္၊ ဒါေပမယ့္ <style type= “text/css”> အဖြင့္ပိတ္မပါဘူး၊ ေအာက္က အတိုင္းေရးရတယ္၊
b{
color : red;
font-size : 20px;
}
p{
color : red;
font-size : 20px;
}
အထက္က လို CSS ကုတ္ေတြျခည္း သည္းသန္႔ေရးရတယ္၊ ျပီးရင္ သူ႔ကို CSS ဖိုင္အေနနဲ႔ သိမ္းရတယ္၊ ၾကိဳက္တဲ့နာမည္ေပးျပီးသိမ္းႏိုင္တယ္၊ absolute url
နဲ႔ Relative URL တို႔ကို နား မလည္သူေတြေတာ့ သိမ္းမယ့္ CSS ဖိုင္ကို HTML ဖိုင္နဲ႔ ဖိုဒါတစ္ခုထဲမွာ သိမ္းရမယ္၊ ဒါေပမယ့္ Extension ကိုေတာ့ .css
လို႔ေပးရမယ္၊ အခု သင္က baby.css လို႔အထက္က CSS ကုတ္ေတြ ေရးထားတဲ့ဖိုင္ကို နာမည္ေပးသိမ္းလိုက္ျပီဆိုပါစို႔၊ ဒါဆိုရင္ေတာ့ သူ႔ကိုဒီ
တိုင္းထားလို႔မျဖစ္ဘူး၊ သူနဲ႔ HTML Document တို႔ကိုခ်ိတ္ဆက္ေပးမွရမယ္၊ ဒီ့အတြက္ေတာ့ HTMl ရဲ့ Head Tags အတြင္းမွာ
<link href= “” rel = “stylesheet” type= “text/css”> ဆိုျပီးေရးေပးရပါတယ္၊ <link ဆိုတာကေတာ့ ခ်ိတ္ဆက္မယ္လုိ႔ေျပာတာ href က hyper
referance ပါ၊ rel ကေတာ့ relative မ်ိဳးႏြယ္စုေပါ့ အခု သံုးမယ့္ ကုတ္က ဘယ္ ကုတ္မ်ိဳးႏြယ္လဲေပါ့ေလ၊ type ကေတာ့ တိက်တဲ့ အမ်ိဳးအစားနာမည္ပါ၊
ဒါကိုေတာ့ ျပည့္စံုးမွန္ကန္ေအာင္ထည့္ႏိုင္ရမယ္၊ href= “” ဆိုတဲ့ ေနရာက ႏွစ္ထပ္ေကာ္မာထဲမွာ သင္ေခၚသံုးခ်င္တဲ့ CSS ဖိုင္ကိုထည့္ရမယ္၊ အထက္က
တည္ေဆာက္ခဲ့တဲ့ baby.css ကိုေခၚသံုးမယ္ဆိုရင္ျဖင့္
<link href= “baby.css” rel = “stylesheet” type= “text/css”> လို႔ေရးေပးလိုက္ရံုပါပဲ၊ အခု ေရးထားတဲ့ကုတ္ေတြကိုစမ္းၾကည့္မယ္
မစမ္းခင္ကုတ္အစံုးအလင္ကိုေရးျပမယ္၊ ဖိုင္ႏွစ္ခုရွိမယ္၊ တစ္ခု က HTML ဖိုင္ျဖစ္ျပီး ေနာက္တစ္ခုက CSS ဖိုင္ ေအာက္မွာ HTML ဖိုင္ကိုၾကည့္ပါ၊
<html>
<head>
<title>what's up</title>
<link href= "baby.css" rel= "stylesheet" type= "text/css">
</head>
<body>
<b>hey now brown cow in down town </b>
<p>Nothing last forever, but my love </p>
</body>
</html>
အထက္က ေတာ့ HTML ဖိုင္ပါ၊ သူ႔ကို baby.css ဖိုင္နဲ႔ ခ်ိတ္ထားတယ္ေနာ္၊ ေအာက္ မွာ baby.css ဖိုင္၊
b {
color : red;
font-size : 20px;
}
p{
color : red;
font-size : 20px;
}
အထက္က ဖုိင္ကေတာ့ CSS ကုတ္ေတြျခည္း ေရးထားတဲ့ baby.css ဖိုင္ပါ၊ အခု အထက္က အတိုင္း ဖိုင္ႏွစ္ခုလံုးကိုေသခ်ာခ်ိတ္ဆက္ျပီး ေရးျပီးသြားရင္ျဖင့္
HTML Document ကို Run ၾကည့္လိုက္ပါ၊ ေအာက္က အတိုင္း သင္ေရးထားတဲ့ ၀က္ဆိုက္စာမ်က္ႏွာကိုေတြ႔ရမွာပါ/
အထက္က ခ်ိတ္ဆက္ပံုသံုးမ်ိဳးလံုးကိုပိုျပီးနာလည္သြားေအာင္ အၾကိမ္ၾကိမ္ဖက္ပါ၊ ေနာက္ပိုင္းအခန္းေတြမွာ သြင္သြင္ ၾကီးသံုးသြားမယ္၊ ဒါေပမယ့္
ခ်ိတ္ဆက္ပံုေတြကိေတာ့ ထပ္သင္ျပေတာ့မွာမဟုတ္ပါဘူး၊
ေရာင္ျပန္ေလး(နည္းပညာ)
www.yplitshare.org
