Styles for Nested Tags

CSS ကို အသံုးျပဳရမွာ ကၽြန္တာ္တုိ႕ေတြ အေနနဲ႕ class ေတြ tag ေတြကို အဆင့္ဆင့္ ျပီး အသံုးျပဳလို႕ရပါတယ္။ ေအာက္က code ေလးကို တခ်က္ေလ့လာၾကည့္ရေအာင္။

<html>
<head>
    <title>Nested CSS</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section class='first'>
    <p>This is first paragraph.</p>
    <div id="example">
        <p>This is second paragraph.</p>
    </div>
</section>

<section class='second'>
    <p>This is first paragraph.</p>
    <div id="example">
        <p>This is second paragraph.</p>
    </div>
</section>
</body>
</html>

အထက္ပါ code မွာ ကၽြန္ေတာ္ section ၂ ခုကို အသံုးျပဳထားပါတယ္။ ပထမ section မွာ paragraph ၂ခု ပါသလို ဒုတိယ section မွာလည္း paragraph ၂ ခု ပါပါတယ္။ သူ႕မွာ သံုးထားတဲ့ style.css ကို ၾကည့္ၾကည့္ရေအာင္။

p {
    color:red;
}
section.first p{
    color:blue;
}

section.second > p {
    color: purple;
}

တကယ္လုိ႕ ကၽြန္ေတာ္တုိ႕ေတြ pagraph အားလံုးရဲ႕ စာကို ေျပာင္းခ်င္ရင္ p လုိ႕ ေခၚလိုက္ရင္ရပါျပီ။ သို႕ေပမယ့္ ပထမ section ရဲ႕ paragraph ကို သာ အေရာင္ေျပာင္းခ်င္တဲ့အတြက္ section.first p ဆုိျပီး သံုးထားပါတယ္။ section tag ျဖစ္ရမယ္ အဲဒီ tag ရဲ႕ class က first ျဖစ္ရမယ္။ အဲဒီ first ရဲ႕ ေအာက္က p ေတြကို ဒီ css သံုးမယ္ဆုိျပီး ေရးထားတာပါ။

section.second > p ကေတာ့ နည္းနည္းေလး ကြဲျပာင္းပါယတ္။ section tag ျဖစ္ရမယ္။ class နာမည္က second ျဖစ္ရမယ္။ သူ႕ရဲ႕ ေအာက္က p ကို သာ ေျပာင္းမယ္။ ကၽြန္ေတာ္တုိ႕ .second ရဲ႕ ေအာက္မွာ div တစ္ခု ရိွတာကို ေတြ႕ႏိုင္ပါတယ္။ အဲဒီ ေအာက္က p က .second ေအာက္မွာ ရိွတဲ့ p class မွာ မဟုတ္ေတာ့တဲ့အတြက္ သူက default color အနီ ေရာင္သာ ျပေနပါလိမ့္မယ္။

အဲဒီ code ေလးကို run လိုက္ရင္ ေအာက္ကလိုမ်ဳိးေလး ျမင္ရပါလိမ့္မယ္။

Figure 3-9

Figure 3-9

အခု ဆုိရင္ chapter 3 ျပီးဆံုးပါျပီ။ Chapter 3 မွာ CSS နဲ႕ ပတ္သက္ျပီး အေျခခံ အဆင့္ထိ သိေလာက္ျပီလုိ႕ ထင္ပါတယ္။ Chapter 3 မွာ tag , class , ID စတာေတြကို CSS နဲ႕ တြဲသံုးျပီး သံုးနည္းကို ေဖာ္ျပထားပါတယ္။ ေနာက္ျပီး chapter မွာေတာ့ text styling နဲ႕ ပတ္သက္ျပီးေတာ့ ဆက္လက္ ေလ့လာႏိုင္ပါတယ္။

results matching ""

    No results matching ""