HTML ႏွင့္ CSS ဆိုင္ရာ သိမွတ္ဖြယ္ရာမ်ား

ThihaJune 22, 2010HTML & CSS

HTML ႏွင့္ CSS ဆိုင္ရာ သိမွတ္ဖြယ္ရာမ်ား ကိုစတင္လိုက္ပါတယ္။ အဓိက ရည္ရြယ္ခ်က္ကေတာ့ သိမလိုလိုနဲ႔ မသိပဲ က်န္ခဲ့တဲ့ အပိုင္းေတြကို စုစည္းၿပီး ေဖာ္ျပခ်င္တဲ့ ရည္ရြယ္ခ်က္ ျဖစ္ပါတယ္။ အႀကံဥာဏ္မ်ားလည္း ေပးဖို႔ ဖိတ္ေခၚပါတယ္။

Reset CSS

Reset CSS ကို နားလည္ဖို႔အတြက္ ပထမဦးဆံုး ေအာက္မွာေပးထားတဲ့ Code ကို ကူးၿပီး Notepad မွာ ျဖစ္ျဖစ္ Notepad ++ ကူးၿပီး .html နဲ႔ သိမ္းလိုက္ပါ။ ၿပီးရင္ Browser တစ္ခုခုမွာ ေခၚၾကည့္ပါ။

<!DOCTYPE html>

<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Testing HTML</title>
</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>
</body>
</html>

အဲဒီလို ေခၚၾကည့္တဲ့အခါမွာ

အဲဒီလို Browser က အလိုလို ျခားထားေပးတာေတြရွိပါတယ္။ အဲဒီလို အလိုအေလွ်ာက္ ျခားထားေပးတာကို မလိုခ်င္တဲ့အခါမွာ Reset CSS ကို လုပ္ေပးရပါတယ္။ ေအာက္မွာ ေရးထားတဲ့ Code ကို <head> … </head> ၾကားထဲမွာ ထည့္လိုက္ပါ။

        <style type="text/css" media="screen">
		* {
                          margin: 0px;
                          padding: 0px;
                    }
	</style>

အဲဒီလိုထည့္ၿပီး Browser မွာ ျပန္ေခၚၾကည့္ရင္ေတာ့ ေအာက္မွာ ျပထားတဲ့ ပံုကို ကပ္သြား ပါလိမ့္မယ္။

ID နဲ႔ Class ဘာကြာလဲ

ID နဲ႔ Class ဆိုၿပီး HTML နဲ႔ CSS ကို ခ်ိတ္တဲ့ေနရာမွာ သံုးေလ့ရွိပါတယ္။ တစ္ခ်ဳိ႕ေနရာေတြမွာ ID ကို သံုးၿပီး တစ္ခ်ဳိ႕ ေနရာေတြမွာေတာ့ Class ကို သံုးပါတယ္။ အဲဒီႏွစ္ခု ဘယ္လို ကြာျခားပါသလဲ။

ID ဆိုတာက Unique ျဖစ္ပါတယ္။

တစ္ခုတည္းရွိတယ္။ တစ္ခုတည္း သံုးမယ္လို႔ အဓိပၸါယ္ရပါတယ္။
Page မွာ Element တစ္ခုကို ID တစ္ခုတည္း ရွိရပါမယ္။

Class ဆိုတာ Unique မျဖစ္ဘူး

တစ္ခုထက္ပိုတဲ့ Element ေတြကို Class တစ္ခုတည္းနဲ႔ သံုးလို႔ရပါတယ္။
တစ္ခုထက္ပိုတဲ့ Class ေတြကို Element တစ္ခုတည္းမွာ သံုးလို႔ရပါတယ္။

ကၽြန္ေတာ္ေပးထားတဲ့ Coding ေလးကို ထံုးစံအတုိင္း Notepad မွာ ျဖစ္ျဖစ္ Notepad ++ မွာ ျဖစ္ျဖစ္ ကူးၿပီး .html နဲ႔ သိမ္းပါၿပီးရင္ Browser တစ္ခုခုမွာ ဖြင့္ၾကည့္ပါ။

<!DOCTYPE html>

<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Testing HTML</title>
	<style type="text/css" media="screen">
		body {
			margin: 0px;
		}
		#content {
			font-size: 15px;
		}
		.content-two {
			font-size: 30px;
		}
		.three {
			font-weight: bold;
		}
		.four {
			font-size: 60px;
		}
	</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 class="content-two">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
	</div>
	<div id="content">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
	</div>
	<div class="content-two">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
	</div>
	<div class="content-two three">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
	</div>
	<div class="content-two three four">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
	</div>
</body>
</html>

Result အေနနဲ႔ေတာ့ ေအာက္မွာ ျပထားတဲ့အတိုင္း ရလာပါလိမ့္မယ္။

Coding ကို ျပန္ေလ့လာ ၾကည့္မယ္ဆိုရင္ content ဆိုတဲ့ ID ကို ႏွစ္ခါထပ္သံုးထားပါတယ္။ ဒီေနရာမွာ ဘာ Error မွ မျပေပမယ့္ မွားပါတယ္။ မသံုးသင့္ပါဘူး။ ID ဆိုတာ browser မွာ Special abilities ရွိပါတယ္။ class မွာ အဲဒီလိုမ်ဳိး မရွိပါဘူး။ ဘယ္လိုမ်ဳိးလဲဆိုရင္ # နဲ႔ value link ေတြကို ID မွာမွ သံုးလို႔ရပါတယ္။

http://www.myanmartutorials.com/mm-tutorials/articles/on-the-information-super-highway/#comments

အေပၚမွာ ျပထားတဲ့ လင့္ကို ကလစ္ေခါက္ၾကည့္ပါ။ တစ္ခါတည္း Comments ကိုေရာက္သြားပါလိမ့္မယ္။ အဲဒါ ID ရဲ႕ အားသာခ်က္ပါပဲ။ Class မွာေတာ့ အဲဒါမ်ဳိး မရပါဘူး။ အဲဒီလို ID ရွိတဲ့ေနရာကို သြားဖို႔အတြက္ Unique ျဖစ္ဖို႔ အဓိက လိုအပ္ပါတယ္။

content-two ဆိုတဲ့ Class ကိုေတာ့ ႀကိဳက္သေလာက္ ထပ္ထပ္ၿပီး သံုးလို႔ရပါတယ္။ content-two ကိုElement ႏွစ္ခုမွာ ထပ္သံုးလို႔ရသလို Element တစ္ခုတည္းမွာလည္း Class ေတြ ထပ္သံုးလို႔ရပါတယ္။ content-two three, content-two three four ဆိုၿပီး ထပ္သံုးလို႔ရပါတယ္။ ပထမတစ္ခါ ထပ္သံုးတဲ့ အခ်ိန္မွာ font-size: 30px အေပၚမွာ font-weight: bold ကို ထပ္ေပါင္ထည့္ လိုပါတယ္။ ဒါေပမယ့္ content-two three four ဆိုရင္ေတာ့ font-size: 30px ကို font-size: 60px ဆိုၿပီး Overwrite လုပ္လိုက္တာပါ။

တစ္ခ်ဳိ႕ Element ေတြမွာေတာ့ ID ေရာ Class တြဲသံုးတတ္ၾကပါတယ္။ ဒါကလည္း တစ္ခ်ဳိ႕ ကိစၥေတြမွာ အင္မတန္ အသံုးဝင္ပါတယ္။ Comment ေတြကို ၾကည့္မယ္ ဆိုရင္ ID ေတြ အေနနဲ႔ သီးသန္႔စီ ရွိေနေစခ်င္ေပမယ့္ Class အေနနဲ႔ Comment အေနနဲ႔ေတာ့ Style အတူတူ ထားဖို႔ လိုပါတယ္။ အဲဒီေနရာမွာ ခုလို ပံုစံမ်ဳိး သံုးႏိုင္ပါတယ္။

<div id="comment-10011" class="comment-style"></div>

အဲဒီေနရာမွာ comment-1011 ဆိုတာက Unique ID အေနနဲ႔ သံုးၿပီး Class ျဖစ္တဲ့ comment-style ကေတာ့ Style အေနနဲ႔ သံုးႏိုင္ပါတယ္။

ID ေတြ ထပ္သံုးတဲ့ ကိစၥကို CSS မွာ ျပႆနာ မရွိေပမယ့္ JavaScript ကို သံုးတဲ့ ေနရာမွာေတာ့ ျပႆနာရွိပါတယ္။ အေကာင္းဆံုးကေတာ့ ထပ္ မသံုးပါနဲ႔။

ဆက္ပါဦးမယ္ …

Facebook comments:

2 Responses

HTML နှင့် CSS ဆိုင်ရာ သိမှတ်ဖွယ်ရာများ (၂) | Myanmar Tutorials says:

June 22, 2010 at 6:43 PM

[...] HTML နှင့် CSS ဆိုင်ရာ သိမှတ်ဖွယ်ရာများ [...]

Reply
HTML5 နဲ့ CSS3 သုံးပြီး Website ဆောက်ကြမယ် (၂) | Myanmar Tutorials says:

August 22, 2010 at 1:53 AM

[...] နဲ့ class ဘာကွာလဲဆိုတာ သိချင်ရင်တော့ ဒီနေရာမှာ ရေးခဲ့ပြီး ဖြစ်ပါတယ်။ အဲဒီလို [...]

Reply

About the Author

Thiha

စာမရေးရ မနေနိုင်သူ၊ ဒီဇိုင်းဆွဲခြင်း၊ ပရိုဂရမ်ရေးခြင်း၊ အင်တာနက်တွင် သင်ယူခြင်းတို့ အမြဲမပြတ် ပြုလုပ်နေသူ၊ နည်းပညာနှင့် ပတ်သက်လျှင် အကုန် စိတ်ဝင်စားသူ၊ ကလေး တစ်ယောက် အဖေ၊ နည်းပညာသမားအပေါ် နားလည်မှု အပြည့်ပေးနိုင်သော ဇနီးတစ်ယောက်၏ ခင်ပွန်း၊ Myanmar Links မှာ နည်းပညာ အကြောင်း သောင်းပြောင်းထွေလာ သင်တဲ့ဆရာ ... လောလောဆယ် လေ့လာနေတာက iOS