CSS Introduction

Blog

CSS Introduction

March 26, 2010 at 7:24 am | Posted in CSS Basic By Examples | Leave a comment

Html code ေတြနဲ့ဘဲ web site ေတြကိုတည္ေဆက္ရမယ္ဆို code ေတြ႐ႈပ္ပြၿပီးေတာ႔ သိပ္မလွပတဲ့ site ေတြဘဲ ထြက္ပါလိမ့္မယ္။ css ကို သံုးျခင္းျဖင့္ဒါေတြကိုျပဳျပင္ႏိုင္ပါတယ္။
ကၽြန္ေတာ္တို႔ css ကိုသံုးၿပီး html tag ေတြကို modify လုပ္လို႔ရပါတယ္။ ဒါ႔အျပင္ ကၽြန္ေတာ္တို႔ css style တစ္ခုကိုတစ္ခါေရးၿပီးတာနဲ့ ဒါကို အၿမဲေခၚသံုးလို့ရပါတယ္။ ဥပမာအားျဖင့္ သင္က html headign tag h1 ကို css သံုးၿပီး h1 ကို အျပာေရာင္ထားမယ္။ ေနာက္အလယ္မွာေပၚမယ္လို႔ css နဲ႔ တစ္ခါျပဳျပင္လိုက္တာနဲ႔ h1 ကိုသံုးလိုက္တာနဲ႔ အဲဒီအခ်က္ေတြက သံုးတိုင္းပါလာမွာပါ။ ထပ္ျပဳျပင္စရာမလိုေတာ႔ပါဘူး။ ေနာက္ၿပီး h1 ကို ကၽြန္ေတာ္တို႔ အနီေျပာင္းခ်င္တယ္ဆိုရင္လည္းတစ္ေနရာထဲမွာျပင္လိုက္႐ုံနဲ့ ရပါတယ္ site တစ္ခုလံုးမွာရွိတဲ့ h1 tag ေတြကို ကုန္လိုက္ျပင္စရာမလိုေတာ႔ဘူး။ ဒါဟာ site ကိုျပင္တဲ့ေနရာမွာ လြယ္ကူေစပါတယ္။ အဲဒီလိုဘဲ အျခား html tag ေတြအားလံုးကိုလည္း ျပဳျပင္ႏိုင္ပါတယ္။ html ကေတာ႔တစ္ခါသံုးတစ္ခါေရးေနရေတာ႔ code ေတြကိုမ်ားျပား႐ႈပ္ပြေစပါတယ္။

ကၽြန္ေတာ္အရင္ဆံုး css ကို html နဲ႔ေပါင္းစပ္တဲ့ နည္းလမ္း 3 မ်ိဳးကို ေဖၚျပလိုပါတယ္။

1. Embedded Style

<html>
<head>
<title>Embedded Style</title>
<style type="text/css">
	h1 {
	font: Arial, Helvetica, sans-serif;
	color: #00CC00;
	}
</style>
</head>

<body>

<h1>Heading h1 modify with css</h1>

</body>
</html>

ဒီ example မွာ css style ကို html ဖိုင္ထဲမွာပဲ ေရးထားတာေတြ႔မွာပါ။

2.External Style Sheet

<html>
<head>
<title>External Style Sheet</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<h1>Heading h1 modify with css</h1>

</body>
</html>

ဒီ code ေတြကို notepad မွာ႐ုိက္ၿပီး html extension နဲ႔ သိမ္းလိုက္ပါ။ ၿပီးရင္ေတာ႔ notepad အသစ္ထပ္ယူလိုက္ပါ။ ၿပီးရင္ေအာက္က css code ေတြကို႐ုိက္ၿပီး style.css အမည္နဲ႔သိမ္းလိုက္ပါ။

h1 {
font: Arial, Helvetica, sans-serif;
color: #00CC00;
}

ကၽြန္ေတာ္တို႔ css file ကို ဒီ html ဖိုင္နဲ႔ folder တစ္ခုထဲမွာ ထားၿပီး save ရပါမယ္။ ဒါဆိုရင္ေတာ႔ ကၽြန္ေတာ္တို႔ html ဖိုင္ဟာ style.css ဖိုင္က css properties ေတြကိုယူသံုးၿပီးသားျဖစ္ သြားပါၿပီ။
external css file ကို link ခ်ိတ္တဲ့ေနရာမွာ ေအာက္ပါအတိုင္းလည္း ခ်ိတ္ဆက္အသံုးျပဳ ႏိုင္ပါတယ္။

<style type="text/css">
@import url("styles.css");
</style>

3.Inline Style Rule

<html>
<head>
<title>Inline Style</title>
</head>

<body>

<h1 style="font: Arial, Helvetica, sans-serif; color: #00CC00;">Heading h1 modify with css</h1>

</body>
</html>

CSS Structure

css ရဲ႔ syntax မွာအပိုင္း ၃ ပိုင္းပါပါတယ္။ selector, property, value တို႔ျဖစ္ပါတယ္။

h1
{
color: blue;
}

ဒီ example မွာ h1 က selector ပါ။ color ကေတာ႔ property ေပါ႔။ blue ကေတာ႔ value ပါ။ selector ကိုေရးၿပီးတာနဲ႔ property နဲ႔ value ကို တြန္႔ကြင္းထဲမွာထားၿပီးေရးရပါမယ္။ property နဲ႔ value ၾကားမွာေတာ႔ full colon ခံၿပီးမွ value ကုိ ထည့္ရပါမယ္။ value အားလံုးထည့္ၿပီးရင္ေတာ႔ semicolon နဲ႔ အဆံုးသတ္ရပါမယ္။ ၿပီးေတာ႔ value ကို ႏွစ္ခုသံုးခု ထည့္မယ္ဆိုရင္ေတာ႔ တစ္ခုနဲ့တစ္ခုၾကားမွာ comma ခံေရးရပါတယ္။ property ကိုလည္း အမ်ားႀကီး ထည့္ႏိုင္ပါတယ္။ property တစ္ခုၿပီးလို႔ semicolon နဲ႔ အဆံုးသတ္ၿပီးတာနဲ႔ ေနာက္တစ္ခုကို ဆက္ေရးႏုိင္ ပါတယ္။ ေအာက္မွာ နမူနာျပထားပါတယ္။

h1
{
color: blue;
font-family: Arial;
}

Like this:

Be the first to like this post.

Leave a Comment »

RSS feed for comments on this post. TrackBack URI

My Note Book