CSS හි මූලද්රව්ය පන්ති
පෙර පාඩම් වලදී අපි පිටුවේ මූලද්රව්ය තෝරා ගත්තේ ටැග් නම අනුව ය, උදාහරණයක් ලෙස සියලු ඡේද සඳහා එකවර විලාසිතා නියම කරමිනි. කෙසේ වෙතත්, පිටුවේ විවිධ වර්ගවල ඡේද තිබිය හැකිය, ඒවාට විවිධ විලාසිතා යෙදිය යුතුය. මෙම ගැටළුව විසඳීම සඳහා විවිධ ඡේද විවිධ CSS පන්ති වලට ඇතුළත් කළ හැකිය.
ටැගයක් යම් පන්තියකට ඇතුළත් කිරීමට, එම ටැගයට
class ගුණාංගය ලිවිය යුතුය,
එය තුළ - ඔබ විසින් යෝජනා කරන ලද පන්තියේ නම,
අකුරු, ඉලක්කම්, යටි ඉරි සහ යටි කොටස්
සංකේත වලින් සමන්විත වේ.
අපි උදාහරණයක් බලමු. ඡේද සාදන්න
පන්ති වර්ග දෙකකින් - eee සහ zzz:
<p class="eee">
paragraph with class eee
</p>
<p class="eee">
paragraph with class eee
</p>
<p class="zzz">
paragraph with class zzz
</p>
<p class="zzz">
paragraph with class zzz
</p>
දැන් අපි CSS හි විවිධ පන්ති සහිත ඡේද වෙත ඇමතුම් කර
ඒවාට යම් විලාසිතා නියම කරමු. උදාහරණයක් ලෙස, පන්තියේ ඡේද
zzz රතු පාටට වර්ණාලේප කරන්න, සහ පන්තියේ ඡේද
eee - කොළ පාටට.
මේ සඳහා CSS ගොනුවේ අපගේ පන්ති වෙත ඇමතීමට
අවශ්යය. ඇමතුමට පහත සංකේත විද්යාව ඇත: පළමුව ලක්ෂ්ය සංකේතය එනවා, පසුව
අප විසින් යෝජනා කරන ලද පන්ති නම. ඒ නිසා
පන්තියට ඇමතීමට eee ලිවීමට අවශ්යය
.eee, සහ පන්තිය සඳහා zzz - ලිවීමට
.zzz.
ඉතින්, ඉහත සඳහන් කරන ලද කරමු. අපගේ HTML වෙත CSS විලාසිතා එකතු කරමු අපි හඳුන්වා දුන් පන්ති සඳහා:
.eee {
color: green;
}
.zzz {
color: red;
}
අපගේ කේතය ධාවනය කරන්නේ නම්, ප්රතිඵලය වනු ඇත පහත දැක්වෙන පරිදි:
පහත කේතය ලබා දී ඇත:
<ul>
<li class="odd">text</li>
<li class="eve">text</li>
<li class="odd">text</li>
<li class="eve">text</li>
<li class="odd">text</li>
<li class="eve">text</li>
</ul>
රතු පාටට වර්ණාලේප කරන්න පන්තියේ මූලද්රව්ය
odd සහ කොළ පාටට - මූලද්රව්ය සමඟ
පන්තිය eve.
පහත කේතය ලබා දී ඇත:
<h2 class="eee">Title</h2>
<p class="eee">
paragraph
</p>
<p class="eee">
paragraph
</p>
<p>
paragraph without class
</p>
<ul class="eee">
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
රතු පාටට වර්ණාලේප කරන්න පන්තියේ සියලුම මූලද්රව්ය
eee.
පැහැදිලි කරන්න, ඇයි පෙර කාර්යයේ රතු පාටට
වර්ණාලේප වන්නේ li ටැග්, පන්තිය,
වර්ණය නියම කිරීම, ටැගයට නියම කර ඇත ul.
