Create an Internal Style Sheet

HTML မွာ internal style sheet နဲ႕ external style sheet ဆုိျပီး ၂ မ်ဳိး အသံုးျပဳႏိုင္ပါတယ္။ internal style sheet ကို <style> နဲ႕ </style> ၾကားမွာ ေရးသားရပါတယ္။ ကၽြန္ေတာ္ တုိ႕ေတြ ေအာက္က CSS example ေလးကို ၾကည့္ရေအာင္။

<html>
    <head>
        <title>CSS</title>
    <style>
    h1 {
        color:red;
    }
    .myclass {
        color:orange;
    }
    #myid {
        color: blue;
    }
    </style>
</head>
<body>

<h1>This is header</h1>
<p class="myclass">Color green</p>
<p id="myid">Color blue</p>

</body>
</html>

အဲဒီ code ေလးကို ကၽြန္ေတာ္တုိ႕ေတြ ေအာက္ကလို ျမင္ရပါလိမ့္မယ္။

Figure 3-1

Figure 3-1

CSS မွာ tag name , class နဲ႕ id ဆုိျပီး ၃ ခု ကို အသံုးျပဳပါတယ္။ tag name ကေတာ့ HTML tag name ေတြေပါ့။ p , h1,h2 စတာေတြေပါ့။ အေပၚက ဥပမာမွာ ကၽြန္ေတာ္တုိ႕ h1 ဆုိတဲ့ tag name ကို အသံုးျပဳထားပါတယ္။ class ကေတာ့ dot (.) ေလးနဲ႕ တြဲျပီး အသံုးျပဳပါတယ္။ class ကို ေၾကျငာခ်င္ရင္ class="myclass" ဆုိျပီး ေရးပါတယ္။ ကၽြန္ေတာ္က myclass ဆုိျပီး နာမည္ေပးထားခဲ့ပါတယ္။ ဒါေၾကာင့္ .myclass ဆုိျပီး သံုးထားပါတယ္။ id ကေတာ့ # နဲ႕ အသံုးျပဳပါတယ္။ id ကို HTML tag မွာ id="myid" ဆုိျပီး အသံုးျပဳတယ္။ အခု ဥပမာမွာ myid လို႕ နာမည္ေပးထားတယ္။ ဒါေၾကာင့္ #myid ဆုိျပီး အသံုးျပဳထားပါတယ္။

class နဲ႕ id ကြာျခားခ်က္ကေတာ့ id က တစ္ခု တည္း အေနနဲ႕ အသံုးျပဳျပီး class ကေတာ့ တစ္ခု မက အသံုးျပဳပါတယ္။ id="myid" လုိ႕ ေပးထားတဲ့ အတြက္ ထပ္ျပီးေတာ့ id နာမည္ေပးတဲ့ အခါ myid ဆုိျပီး ထပ္ မေပးေတာ့ပါဘူး။ class ကေတာ့ ထပ္ျပီး ေပးခြင့္ရိွပါတယ္။ class="myclass" လုိ႕ ေပးထားတဲ့ အတြက္ အျခား ေနရာမွာလည္း ဒီ class ကို ပဲ အသံုးျပဳခ်င္ရင္ class="myclass" ဆုိျပီး ထပ္ေပးလို႕ရပါတယ္။

css ကို စေရးရင္ { နဲ႕ စျပီးေတာ့ } နဲ႕ ဆံုးပါတယ္။ အဲဒီ ၾကားထဲမွာ code ေရးပါတယ္။ color:orange; ဆုိတာကေတာ့ စာလံုး အေရာင္ လိေမၼာ္ေရာင္ သံုးမယ္လုိ႕ ဆုိထားတာပါ။ code တစ္ေၾကာင္း ဆံုးရင္ ; ထည့္ရပါတယ္။

ဒီတစ္ေခါက္ေတာ့ font ေျပာင္းၾကည့္ရေအာင္

<html>
    <head>
        <title>CSS</title>
    <style>
    h1 {
        color:red;
        font-family: Arial;
    }
    .myclass {
        color:orange;
        font-style: italic;
    }
    #myid {
        color: blue;
        font-size: 12px;
    }
    </style>
</head>
<body>

<h1>This is header</h1>
<p class="myclass">Color green</p>
<p id="myid">Color blue</p>

</body>
</html>

အဲဒီ code ကို browser မွာ ၾကည့္ရင္ ေအာက္ကလို ျမင္ရပါမယ္။

Figure 3-2

Figure 3-2

အဲဒီ code မွာ font-family: Arial; ဆုိတာကေတာ့ font ကို Arial သံုးမယ္လုိ႕ ေျပာထားပါတယ္။ font-style: italic; ကေတာ့ font style ကို italic (စာလံုးေစာင္း) ပံုစံ သံုးမယ္လို႕ ေျပာထားပါတယ္။ font-size: 12px; ကေတာ့ font ရဲ႕ size က 13px ကို အသံုးျပဳမယ္လို႕ ဆိုထားတာပါ။ ေနာက္ chapter တစ္ခုမွာ ဒီထက္ပိုၿပီးေတာ့ CSS ကို ရွင္းျပေပးသြားမွာပါ။

results matching ""

    No results matching ""