CSS හි මූලද්‍රව්‍ය පන්ති

පෙර පාඩම් වලදී අපි පිටුවේ මූලද්‍රව්‍ය තෝරා ගත්තේ ටැග් නම අනුව ය, උදාහරණයක් ලෙස සියලු ඡේද සඳහා එකවර විලාසිතා නියම කරමිනි. කෙසේ වෙතත්, පිටුවේ විවිධ වර්ගවල ඡේද තිබිය හැකිය, ඒවාට විවිධ විලාසිතා යෙදිය යුතුය. මෙම ගැටළුව විසඳීම සඳහා විවිධ ඡේද විවිධ CSS පන්ති වලට ඇතුළත් කළ හැකිය.

ටැගයක් යම් පන්තියකට ඇතුළත් කිරීමට, එම ටැගයට class ගුණාංගය ලිවිය යුතුය, එය තුළ - ඔබ විසින් යෝජනා කරන ලද පන්තියේ නම, අකුරු, ඉලක්කම්, යටි ඉරි සහ යටි කොටස් සංකේත වලින් සමන්විත වේ.

අපි උදාහරණයක් බලමු. ඡේද සාදන්න පන්ති වර්ග දෙකකින් - eee සහ zzz:

html<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 විලාසිතා එකතු කරමු අපි හඳුන්වා දුන් පන්ති සඳහා:

css.eee {
  color: green;
}
.zzz {
  color: red;
}

අපගේ කේතය ධාවනය කරන්නේ නම්, ප්‍රතිඵලය වනු ඇත පහත දැක්වෙන පරිදි:

html<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>

html<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>