CSS ဂုဏ်သတ္တိများ အမွေဆက်ခံခြင်း

ကျွန်ုပ်တို့တွင် စာပိုဒ်တစ်ခု ရှိပါစေ၊ ထိုစာပိုဒ်အတွင်း၌ <i> တဂ်ထဲတွင် စာသားအချို့ ရှိပါစေ။

<p>
	This is some <i>text</i> in paragraph.
</p>

စာပိုဒ်များကို အနီရောင်သို့ ပြောင်းလဲကြည့်ရအောင်။

p {
	color: red;
}

ရလဒ်အနေဖြင့် စာပိုဒ်၏ စာသားသာမက <i> တဂ်၏ စာသားပါ အနီရောင် ဖြစ်သွားမည်။

အကြောင်းမှာ <color> ဂုဏ်သတ္တိသည် <အမွေဆက်ခံသည် ဟူသော အချက်ကြောင့်ဖြစ်သည်။ ဆိုလိုသည်မှာ မိဘတဂ်တွင် အရောင်တစ်မျိုး သတ်မှတ်ထားပါက ထိုအရောင်သည် ၎င်း၏ ကလေးတဂ်များတွင်လည်း ဖြစ်လာမည်ဟု ဆိုလိုသည်။ CSS ဂုဏ်သတ္တိအားလုံး အမွေမဆက်ခံပါ။ သို့သော် (သင်သိပြီးသော ဂုဏ်သတ္တိများထဲမှ) များစွာမှာ အမွေဆက်ခံပါသည်။

လိုလားချက်ရှိပါက၊ မိဘ၏ ဂုဏ်သတ္တိကို ကလေးအတွက် selector သတ်မှတ်ပေးခြင်းဖြင့် အစားထိုး သတ်မှတ်နိုင်ပါသည်။ ဥပမာအားဖြင့်၊ စာပိုဒ်ကို အနီရောင် သတ်မှတ်ပြီး စာစောင်းကို အပြာရောင် သတ်မှတ်ကြည့်ပါ။

<p>
	This is some <i>text</i> in paragraph.
</p>

p {
	color: red;
}
i {
	color: blue;
}

ထိုသို့သောအခြေအနေတွင် CSS ကုဒ်အတွင်း selector များ၏ အစီအစဥ်သည် အရေးမပါပါ။ <i> selector နှင့် <p> selector တို့ကို နေရာပြောင်းလဲထားပါက၊ အတူတူပင် အလုပ်လုပ်မည်ဖြစ်သည်။

<p>
	This is some <i>text</i> in paragraph.
</p>

i {
	color: blue;
}
p {
	color: red;
}

ကုဒ်ကို လေ့လာပြီးနောက်၊ <b> တဂ်အတွင်းရှိ စာသားသည် မည်သည့်အရောင် ရှိမည်နည်း ဆိုသည်ကို ပြောပြပါ။

<p>
	This is some <b>text</b> in paragraph.
</p>

p {
	color: blue;
}

<p>
	This is some <b>text</b> in paragraph.
</p>

p {
	color: blue;
}
b {
	color: red;
}

<p>
	This is some <b>text</b> in paragraph.
</p>

b {
	color: red;
}
p {
	color: blue;
}

ကုဒ်ကို လေ့လာပြီးနောက်၊ <li> တဂ်အတွင်းရှိ စာသားသည် မည်သည့်အရောင် ရှိမည်နည်း ဆိုသည်ကို ပြောပြပါ။

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

ul {
	color: blue;
}

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

ul {
	color: blue;
}
li {
	color: red;
}

ကုဒ်ကို လေ့လာပြီးနောက်၊ <i> တဂ်အတွင်းရှိ စာသားသည် မည်သည့်အရောင် ရှိမည်နည်း ဆိုသည်ကို ပြောပြပါ။

<ul>
	<li>text <i>italic</i> text</li>
	<li>text <i>italic</i> text</li>
	<li>text <i>italic</i> text</li>
</ul>

ul {
	color: blue;
}
li {
	color: red;
}
i {
	color: green;
}

ကုဒ်ကို လေ့လာပြီးနောက်၊ <i> တဂ်အတွင်းရှိ စာသားသည် မည်သည့်အရွယ်အစား ရှိမည်နည်း ဆိုသည်ကို ပြောပြပါ။

<ul>
	<li>text <i>italic</i> text</li>
	<li>text <i>italic</i> text</li>
	<li>text <i>italic</i> text</li>
</ul>

i {
	font-size: 30px;
}
ul {
	font-size: 20px;
}
li {
	color: red;
	font-weight: bold;
}