CSS ගුණාංග උරුමකර ගැනීම

අපට ඡේදයක් ඇතැයි සිතමු, එහි i ටැගයේ යම් පෙළක් ඇත:

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

අපි ඡේද රතු පැහැයට 染色 කරමු:

p {
	color: red;
}

එහි ප්‍රතිඵලයක් ලෙස ඡේදයේ පෙළ පමණක් නොව, i ටැගයේ පෙළද 染色 වනු ඇත:

සියල්ල color ගුණාංගය උරුම වන බැවිනි. මෙයින් අදහස් කරන්නේ මව් ටැගයකට යම් පැහැයක් නියම කර ඇත්නම්, එම පැහැය ළමා ටැගවලටද ලැබෙනු ඇත. සියලුම CSS ගුණාංග උරුම නොවන නමුත් බොහෝ ගුණාංග උරුම වේ (ඔබ දැනටමත් දන්නා ගුණාංගවලින් - සියල්ලම උරුම වේ).

අවශ්‍ය නම්, කෙසේ වෙතත්, මව් ටැගයේ ගුණාංගය අභිබවා යා හැකිය, ළමා ටැගය සඳහා සෙලක්ටරයක් නියම කිරීමෙන්. උදාහරණයක් ලෙස, ඡේදයට රතු පැහැයක් නියම කරමු, එලිටික් පෙළට - නිල් පැහැයක්:

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

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

මෙවැනි අවස්ථාවක දී CSS කේතයේ සෙලක්ටර අනුපිළිවෙල වැදගත්කමක් නොදරයි. i සෙලක්ටරය සහ p සෙලක්ටරය ස්ථාන මාරු කළහොත්, සියල්ල එලෙසම ක්‍රියා කරනු ඇත:

<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;
}

කේතය අධ්‍යයනය කර, b ටැගයේ පෙළට ලැබෙන පැහැය කුමක්දැයි පවසන්න:

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

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

කේතය අධ්‍යයනය කර, b ටැගයේ පෙළට ලැබෙන පැහැය කුමක්දැයි පවසන්න:

<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;
}

කේතය අධ්‍යයනය කර, li ටැගයේ පෙළට ලැබෙන පැහැය කුමක්දැයි පවසන්න:

<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;
}