class ගුණාංගය
class ගුණාංගය මූලද්රව්යයකට (tag එකකට) එකක් හෝ
වැඩි ගණනක පන්ති ලබා දෙයි.
මෙය කරනු ලබන්නේ පසුව CSS හරහා එකම පන්තියක් ලබා දී ඇති මූලද්රව්ය සමූහයකට යොමු වී ඔවුන්ට නිශ්චිත ගුණාංග යොදන්නටය (උදාහරණයක් වශයෙන්, පෙළ වර්ණය වෙනස් කිරීම, අකුරු විශාලත්වය වෙනස් කිරීම සහ තවත්).
id ගුණාංගය ද ඇත,
එය class ගුණාංගය වැනිවම
HTML පිටුවක මූලද්රව්ය තෝරා ගැනීමට ඉඩ සලසයි.
class ගුණාංගය සහ id
ගුණාංගය අතර වෙනස වන්නේ class එක මූලද්රව්ය
සමූහයක් තෝරා ගන්නා අතර (එය එක් මූලද්රව්යයකට දුන්නද
- පසුව එය තවත් අයකුට දිය හැකිය),
id එක අනන්ය මූලද්රව්යයක් තෝරා ගන්නා බැවිනි (එවැනි
id එකක් සහිත වෙනත් මූලද්රව්යයක් එම වෙබ් පිටුවේ
තිබිය නොහැක, නැතහොත් ගැටළු ඇති වේ).
මූලද්රව්යයකට දිය යුත්තේ පන්තියක් ද නැතහොත් id එකක් ද යන්න වෙන්කර හඳුනා ගන්නේ කෙසේද? පන්තියක් දෙනු ලබන්නේ වෙබ් අඩවියේ පිටුවල නැවත නැවත ඇති වන මූලද්රව්ය සඳහාය (එකම CSS කේතය කිහිප වතාවක් ලිවීමෙන් වැළකීම සඳහා). ඔබට දැනට මෙම මූලද්රව්යය එකක් පමණක් තිබුනත්, නමුත් ඔබට දැනෙන්නේ, ඒ හා සමාන මූලද්රව්ය අනාගතයේ දී ඇති විය හැකි බව - එවිට මෙම මූලද්රව්යයට පන්තියක් දෙන්න. ඔබට විශ්වාසයක් තිබේ නම්, එවැනි මූලද්රව්යයක් අනන්ය බව - එවිට එයට id එකක් දෙන්න. තවදුරටත් සියලු මූලද්රව්ය සඳහා පන්ති දීමටත්, id යොදා ගැනීම JavaScript සඳහා ඉතිරි කිරීමටත් නැඹුරුවක් ඇතත්, එය සර්විද්ය නොවේ.
මූලද්රව්යයකට පන්ති කිහිපයක් ලබා දිය හැකිය, මෙම අවස්ථාවේ දී ඒවා හිස්තැන් මගින් වෙන් කර ලැයිස්තුගත කළ යුතුය.
පන්තිවල නම් ඉංග්රීසි අකුරු, අංක, හිස්තැන් නොමැතිව ඇති කළ යුතුය (හිස්තැන් පරතරය පන්ති එකිනෙකින් වෙන් කරයි, ඒ වෙනුවට යොදා ගත හැක්කේ යටි ඉරි හෝ කෙටි ඉරි). පන්ති ආරම්භ විය යුත්තේ අංකයකින් නොවේ (HTML5 හි දැන් එය කළ හැකි නමුත් පැරණි බ්රවුසර වල එය ක්රියා නොකරයි).
පන්ති සඳහා නම් දිය යුත්තේ ඉංග්රීසි භාෂාවෙනි (රුසියානු භාෂාවෙන් නොවේ, හුදෙක් ඉංග්රීසි අකුරු වලින්!). නම් අර්ථවත් විය යුතු අතර, පන්තියේ ස්වභාවය පිළිබිඹු කළ යුතුය.
උදාහරණය
test පන්තිය සහිත සියලු ඡේද වලට
රතු පෙළ වර්ණයක් ලබා දෙමු:
<p class="test">test පන්තිය සහිත ඡේදය.</p>
<p>පන්තියක් නොමැති පරීක්ෂණ ඡේදය.</p>
.test {
color: red;
}
:
උදාහරණය . මූලද්රව්යයකට පන්ති කිහිපයක්
මෙහිදී පළමු ඡේදයට පන්ති කිහිපයක්
ලබා දෙමු - test1 සහ test2 (ඒවා
හිස්තැන් මගින් වෙන් කර ලියන්න). test1 පන්තිය ලබා දෙන්නේ
රතු පෙළ
වර්ණයක්, test2 පන්තිය ලබා දෙන්නේ අකුරු
විශාලත්වය 20px ලෙසය. දෙවන ඡේදයට
ලබා දී ඇත්තේ test1 පන්තිය පමණි (මෙම ඡේදය
රතු පැහැයට හැරේ), තෙවන ඡේදයට - test2 පන්තිය
(මෙම ඡේදය අකුරු විශාලත්වය 20px වනු ඇත). පළමු ඡේදය, එයට
පන්ති දෙකක් ඇත, එයට රතු වර්ණය සහ අකුරු විශාලත්වය
20px යන දෙකම ඇත:
<p class="test1 test2">test1 සහ test2 පන්ති දෙකම සහිත ඡේදය.</p>
<p class="test1">test1 පන්තිය සහිත ඡේදය.</p>
<p class="test2">test2 පන්තිය සහිත ඡේදය.</p>
<p>පන්ති නොමැති පරීක්ෂණ ඡේදය.</p>
.test1 {
color: red;
}
.test2 {
font-size: 20px;
}
:
මෙයද බලන්න
-
idගුණාංගය,
එය මූලද්රව්ය සඳහා අනන්ය හඳුනාගැනීමේ සලකුණු ලබා දෙයි
