HTML ႏွင့္ CSS ဆိုင္ရာ သိမွတ္ဖြယ္ရာမ်ား (၂)
အခုမွ စဖတ္မယ့္ သူေတြအတြက္ အရင္ပို႔စ္ကို ျပန္ညႊန္းလိုက္ပါတယ္။ ခုေရးေနတဲ့အပိုင္းကို HTML & CSS Intermediate အပိုင္းမွာထည့္ရမယ္ ထင္ပါတယ္။ Beginner ေတာ့ မဟုတ္ပါဘူး။ တကယ့္ WebPage ေတြကို ဖန္တီးရင္ ေတြ႕ႀကံဳလာရတဲ့ အခက္အခဲေတြ အေပၚမွာ အေျခခံၿပီး ေရးထားတာပါ။ Beginner ေတြအေနနဲ႔ HTML အေၾကာင္း ေရးထားတဲ့ပို႔စ္ေတြ Myanmar Tutorials မွာ ရွိပါတယ္။
font and font-family
CSS မွာ font-family နဲ႔ font ဆိုၿပီး ႏွစ္မ်ဳိးသံုးလို႔ ရတာ သတိထားမိပါလိမ့္မယ္။ font-family နဲ႔ font ဘယ္လိုကြာလဲ။ font-family အေနနဲ႔ font name ေတြကိုပဲ သီးသန္႔ ေပးလို႔ရပါတယ္။ element အတြက္ သတ္မွတ္တဲ့ font နဲ႔ ပတ္သက္တဲ့ Properties ေတြ်ထဲမွာ font name တစ္ခုပဲ သတ္မွတ္ေပးလို႔ ရပါတယ္။ font ကေတာ့ font နဲ႔ ပတ္သက္သမွ် properties ေတြ အားလံုး သတ္မွတ္ေပးလို႔ရပါတယ္။
font-family
- family-name
font
- font-style
- font-variant
- font-weight
- font-size/line-height
- font-family, etc.
HTML မွာ စမ္းသပ္ၾကည့္ရေအာင္
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
<style type="text/css" media="screen">
#content{
font-weight: bold;
font-size: 15px;
line-height: 30px;
font-family: Georgia, "MS Trebuchet", Arial, sans-serif;
}
#content-two{
font: bold 15px/30px Georgia, "MS Trebuchet", Arial, sans-serif;
}
</style>
</head>
<body>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="content-two">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
</html>
အေပၚက content နဲ႔ content-two ႏွစ္ခု အတူတူပါပဲ။ တစ္ခုက သီးျခားစီ သတ္မွတ္ၿပီး တစ္ခုကေတာ့ တစ္ခါတည္း သတ္မွတ္ထားပါတယ္။ သီးျခားစီ သတ္မွတ္တာ နဲ႔ တစ္ခါတည္းစုၿပီး သတ္မွတ္တာ ဘယ္ဟာ ပိုေကာင္းလဲ ဆုိတာကေတာ့ ကိုယ့္ကၽြမ္းက်င္မႈ အေပၚမွာ မူတည္ပါတယ္။ တစ္ခုျခင္းစီ ခြဲၿပီး သံုးတယ္ဆိုတာ နားလည္ရလြယ္ၿပီး တစ္ခါတည္း စုေရးတာေတာ့ နည္းနည္း မွတ္ရခက္ပါတယ္။ ႏွစ္ခုလံုး Inherit ေကာ Overwrite ေကာ ရပါတယ္။
Margin and Padding
Margin နဲ႔ Padding ကိုေတာ့ ခုမွာ HTML နဲ႔ စေလ့လာမယ့္သူေတြ အမွတ္မွားတတ္ၾကလို႔ပါ။
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
<style type="text/css" media="screen">
body {
width: 960px;
margin: auto;
}
#content{
font-weight: bold;
font-size: 15px;
line-height: 30px;
font-family: Georgia, "MS Trebuchet", Arial, sans-serif;
}
#content-two{
width: 400px;
height: 400px;
border: 1px solid #666;
background: #e3e3e3;
font: bold 15px/30px Georgia, "MS Trebuchet", Arial, sans-serif;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="content-two">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</body>
</html>
အဲဒီ coding မွာ content-two အေနနဲ႔ margin ေရာ padding ပါသံုးထားတာ ေတြ႔ရမွာ ျဖစ္ပါတယ္။ အဲဒီ Code ကို Browser မွာ ေခၚၾကည့္ မယ္ဆိုရင္
အေပၚမွာ ျပထားတဲ့ ပံုကိုၾကည့္မယ္ဆိုရင္ A ရဲ႕ အကြာအေဝးက Margin ကို ကိုယ္စားျပပါတယ္။ Out of the box ရဲ႕ ၾကားက အကြာအေဝးက Margin ပါ။ B နဲ႔ C ရဲ႕ အကြာအေဝးကေတာ့ Padding ပါ။ ဒီႏွစ္ခုက အကြာအေဝးမတူဘူး ျဖစ္ေနပါတယ္။ C က အစစ္အမွန္ 20px ကို ကိုယ္စားျပဳၿပီး B ကၾကေတာ့ 20px ျဖစ္ရမွာ မျဖစ္ပဲ 40px ျဖစ္ေနပါတယ္။ အဲဒါ ဘာေၾကာင့္လဲဆိုရင္ Reset CSS မလုပ္ထားလို႔ပါ။ အဲဒီေတာ့ အပိုင္း (၁) မွာ တုန္းကလိုပဲ Reset CSS လုပ္ေပးလိုက္ပါ။ တစ္ခါတစ္ေလမွာ Reset CSS မလုပ္မိတဲ့အတြက္ Padding ေတြမွာ ဒုကၡလာေပးတတ္ လို႔ပါ။
* {
margin: 0px;
padding: 0px;
}
ေနာက္ Value ေလးခုရွိတဲ့ Margin တို႔ Padding တို႔ကို တန္ဖိုးသတ္မွတ္တဲ့ အခါမ်ာ margin-top, margin-bottom, margin-top, margin-right ဆိုၿပီး တစ္ခုခ်င္းစီ သတ္မွတ္လို႔ ရသလို (Padding မွာလည္း တူတူပါပဲ) အားလံုးကို တစ္ေပါင္းတည္းလည္း သတ္မွတ္လို႔ ရပါတယ္။
Padding နဲ႔ ဥပမာေပးထားပါတယ္။ top right bottom left ဆိုၿပီးသြားပါတယ္။ ပံုမွန္ေရးေနၾကဆိုရင္ padding-left, padding-right, padding-top, padding-bottom ဆိုၿပီး ေရးတတ္ၾကတဲ့အတြက္ အဲဒီ အစီအစဥ္နဲ႔ အမွတ္မွားတတ္ၾကပါတယ္။
Clear Both
Div ေတြကို float left, float right လုပ္ၿပီး သံုးၾကပါတယ္၊ အဲဒီလိုသံုးၾကရင္း ပံုမွန္အတိုင္း ျဖစ္ခ်င္တဲ့အခါ။ clear: both; ဆိုတဲ့ CSS properties ကို သံုးၾကပါတယ္။
ေအာက္မွာျပထားတဲ့ HTML ကို စမ္းၾကည့္ပါ။
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Testing DIV</title>
<style type="text/css" media="screen">
* {
margin: 0px;
padding: 0px;
}
body {
width: 960px;
margin: auto;
}
#content {
float: left;
width: 300px;
height: 400px;
margin: 20px;
}
#content-two {
float: right;
width: 300px;
height: 400px;
margin: 20px;
}
#content-three {
margin: 20px;
}
</style>
</head>
<body>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div id="content-two">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div id="content-three">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
</body>
</html>
အေပၚမွာျပထားတဲ့ HTML ကို Browser မွာ စမ္းၾကည့္မယ္ဆိုရင္ content-three က အလည္မွာ ဝင္ေနတာ ေတြ႔ရပါလိမ့္မယ္။ အဲဒီေတာ့ content-three ရဲ႕ CSS မွာ clear: both; ဆိုတာ တစ္ခုထည့္လိုက္ရင္ ေအာက္ကို က်သြားပါလိမ့္မယ္။ သေဘာကေတာ့ ဘယ္ဖက္၊ ညာဖက္ ကပ္ေနတာေတြကို ပံုမွန္အတိုင္း ျပန္ထားလိုက္ဆိုတဲ့ အဓိပၸါယ္ရမယ္ထင္ပါတယ္။
ဆက္ပါဦးမယ္ ..
Facebook comments:
