ස්ලට් පංති සහ හැඳුනුම් පත් භාවිතා කිරීම

පන්ති සහ හැඳුනුම්පත් ඔබගේ CSS ව්යාප්ත කරන්න

වර්තමාන වෙබ් මත වෙබ් අඩවි ගොඩනැඟීම CSS (Cascading Style Sheets) ගැඹුරු අවබෝධයක් අවශ්ය වේ. බ්රව්සර් කවුළුව තුළ එය සැකසීමේ ආකාරය තීරණය කිරීමට වෙබ් අඩවියක් ලබා දෙන උපදෙස් මේවායි. ඔබේ වෙබ් පිටුවේ ඔබේ පෙනුම හා හැඟීම් නිර්මාණය කරන ඔබේ HTML ලේඛනයට "ස්ටයිල්ස්" මාලාවක් අනුගමනය කරන්න.

ලේඛනයක් හරහා ඉහත සඳහන් කළ විලාසයන් යෙදීම සඳහා බොහෝ ක්රම තිබේ. නමුත් බොහෝ විට ඔබ ලියවිල්ලක ඇති මූලද්රව්ය කිහිපයක පමණි, නමුත් එම මූලද්රව්යයේ සෑම සිද්ධියක්ම නොවේ.

එක් එක් එක් එක් උදාහරණය සඳහා ශෛලිය රීතියක් නැවත නැවත නොකෙරේ නම්, ඔබට ලේඛනයක් තුල ඇති අංග කිහිපයකට අදාළ විය හැකි ආකාරයක් නිර්මාණය කිරීමට ඔබට අවශ්ය විය හැකිය. මෙම අපේක්ෂිත ශෛලයන් සාක්ෂාත් කර ගැනීම සඳහා ඔබට පංතිය සහ හැඳුනුම්පත් HTML ගුණාංග භාවිතා කරනු ඇත. මෙම ගුණාංග ගෝලීය ගුණාංග සෑම HTML ටැගයක්ම පාහේ යොදා ගත හැකි ගෝලීය ගුණාංග වේ .ඔබ ලියූ ලිපියක් තුල, හැඩගැසීම්, ඡේද, සබැඳි, ලැයිස්තු හෝ වෙනත් ඕනෑම කෑල්ලක්, ඔබ පන්ති හෝ ID ගුණාංග වෙත හැරිය හැකිය. මෙම කාර්යය ඉටු කිරීමට ඔබට සහාය වනු ඇත!

පංති වාර

ප්ලේයර් තෝරාගන්නා ඔබට ලේඛනයක් තුල එකම මූලද්රව්ය හෝ ටැගය වෙත විවිධාකාර ස්තම්භයන් සැකසිය හැක. උදාහරණයක් ලෙස, ඔබේ ලේඛනයේ ඇතැම් කොටස් අනෙක් ලේඛනයේ ඉතිරි ලේඛනයෙන් වෙනත් වර්ණයකින් කැඳවීමට අවශ්ය විය හැකිය. මෙම උද්දීපනය කර ඇති කොටස් ඔබ විසින් පිටුවෙහි සිටුවම් කරන බව "අනතුරු ඇඟවීමක්" විය හැකිය. මෙවැනි ආකාරයේ පන්ති සමග ඔබේ ඡේද පවරන්න:

p {වර්ණය: # 0000ff; }}
p.alert {වර්ණ: # ff0000; }}

මෙම විලාසයන් සියළුම ඡේදවල නිල් (# 0000ff) දක්වා වර්ණය සැකසෙනු ඇත, නමුත් රතු පැහැති (# ff0000) වර්ණ ගැන්වූයේ "අවවාදය" පංතියේ ආවේගය සහිත ඕනෑම ඡේදයකි. මෙම හේතුව වන්නේ පන්ති ආකෘතියේ පළමු CSS රීතියට වඩා වැඩි විශේෂිතතාවයක් ඇති නිසා, ටැග් තේරීම් භාවිතා කරයි.

CSS සමඟ වැඩ කරන විට වඩාත් නිශ්චිත රීතියක් අඩු විශේෂිත එකක් යටපත් කරනු ඇත. මේ උදාහරණයේ දී, වඩාත් පොදු රීතිය සියලු ඡේදවල වර්නය සකස් කරයි. නමුත් දෙවන පාර්ශ්වයන් මත පමණක් ඇති වන පරාවර්තනය වඩා දෙවන විශේෂිත රීතියයි.

සමහරක් HTML markup හි මෙය භාවිතා කළ හැකි ආකාරය මෙහි දැක්වේ:

මෙම ඡේදය නිල් පැහැයෙන් පෙන්වනු ඇත, පිටුව සඳහා වන පෙරනිමි අගයයි.

මෙම ඡේදය නිල් පාටින් විය හැකිය.

මෙම වගන්තිය රතු පැහැයෙන් දිස් වනු ඇත. පන්තියේ ගුණය මූලද්රව්ය තේරීමේ ඇලවීමෙන් සම්මත නිල් වර්ණය උඩින් ලියනු ලැබේ.

එම උදාහරණයේ දී "p.alert" හි ඇති ශෛලිය පමණක් "විපරම්" පංතිය භාවිතා කරන ඡේදවල මූලද්රව්යවලට පමණක් අදාළ වේ. ඔබට එම පංතියේ විවිධ අංගයන් හරහා එම පන්තිය භාවිතා කිරීමට අවශ්ය නම්, ඔබ හුදෙක් HTML අංගය ආරම්භයේ සිට ඉවත් කරනු ඇත. ශෛලිය අමතන්න (මෙම කාල පරිච්ඡේදය (.) ස්ථානගත කිරීමට වග බලා ගන්න:

. පසුබිම {background-color: # ff0000;}

මෙම පංතිය දැන් එය අවශ්ය වන ඕනෑම මූලද්රව්යයකට දැන් ලබා ගත හැකිය. "සාවද්ය" පරාසයක පරාසයක වටිනාකමක් ඇති ඔබගේ HTML ඕනෑම කෑල්ලක් දැන් මෙම ශෛලිය ලබා ගනී. පහත දැක්වෙන HTML හි, අපි "විපරම්" පන්තිය භාවිතා කරන ඡේදයක් සහ මාතෘක මට්ටම් 2 ඇත. මේවා දෙකටම රතු වර්ණ රතු පැහැති වර්ණ ගැන්වු CSS මත පදනම්ව ඇත.

මෙම ඡේදය ලියා ඇත්තේ රතු පැහැයෙන්ය.

මෙම h2 රතුද වේ.

වර්තමානයේ වෙබ් අඩවි වල පන්ති ගුණාංග බොහෝ මූලද්රව්ය මත භාවිතා වේ. ID වල ඇති විශේෂිත දෘෂ්ටිකෝණයෙන් ඔවුන් වැඩ කිරීමට පහසුය. බොහෝ වත්මන් HTML පිටු වර්ගවල ගුණාංගයන් පිරවිය යුතු අතර, ඇතැම් ඒවා ලේඛනයක කිහිප වතාවක්ම නැවත නැවතත් දැක්විය හැකිය.

ID තේරීම්කාරකය

ID තෝරාගන්නා ඔබට ටැග් හෝ වෙනත් HTML අංගයක් සමඟ ඇසුරු නොකර විශේෂ ස්තරයකට නමක් ලබාදේ. කිසියම් සිදුවීමක් පිළිබඳ තොරතුරු අඩංගු ඔබේ HTML සලකුණු තුල ඔබට බෙදීමක් ඇති බව කියන්න.

මෙම අංශයට "සිද්ධිය" හඳුනාගැනීමේ ලක්ෂණයක් ලබා දෙන්න ඔබට හැකි නම්, ඔබ 1-පික්සල් පුළුල් කළු දේශ සීමාවක් සහිතව එම අංශය වර්ණ ගැන්වීම සඳහා අවශ්ය නම් ඔබ මෙවැනි ID කේතයක් ලිවීමට:

#event {border: 1px solid # 000; }}

හැඳුනුම්කරුවන් සමඟ ඇති අභියෝගය වන්නේ HTML ලේඛනයක් තුල ඒවා නැවත නැවත කළ නොහැකි බවයි. ඒවා අද්විතීය විය යුතුය (ඔබේ වෙබ් අඩවියේ පිටු ගණනාවක එකම ID එක භාවිතා කළ හැකි නමුත් එක් එක් එක් HTML ලේඛනයේ පමණක් එක් වරක් පමණි). එබැවින් ඔබට මෙම දේශ සීමාවට අවශ්ය වූ සිද්ධීන් 3 ක් තිබුනේ නම්, "event1", "event2" සහ "event3" යන ඒවායේ ID සලකුණු ලබා දිය යුතුය. එබැවින්, "සිදුවීම" ඉහත සඳහන් පංතියේ ආකෘතිය භාවිතා කිරීමට පහසු වන අතර එකවර ඒවා සියල්ලම ශෛලීය විය යුතුය.

ID ගුණාංග සහිත තවත් අභියෝගයක් වන්නේ ඒවායේ පන්ති ගුණාංගවලට වඩා වැඩි විශේෂිතතාවයක් ඇති බවයි. මෙයින් අදහස් කරන්නේ ඔබ කලින් ස්ථාපිත ශෛලිය පරාවර්තනය කළ CSS තිබිය යුතු නම්, ඔබ ID වල විශාල ලෙස රඳා පවතින්නේ නම් එසේ කිරීමට අපහසු විය හැකිය. බොහෝ වෙබ් නිර්මාණකරුවන් බොහෝ විට එම අගයන් භාවිතා කිරීමට අදහස් කරන්නේ නම් ඔවුන්ගේ ID සලකුණු භාවිතයෙන් ඉවත් වී ඇති අතර, ඒ වෙනුවට සියලුම ස්වරූප සඳහා අඩු විශේෂිත පන්ති ගුණාංග වෙත හැරී ඇත.

ID වල ඇති ගුණාංගයන් එක් ක්ෂේත්රයකදී සිදුවනුයේ එක් පිටුවක ඇන්කර් සබඳතා ඇති පිටුවක් නිර්මාණය කිරීමට ඔබට අවශ්ය විටදීය. නිදසුනක් ලෙස, ඔබට එක් පිටුවක විවිධාකාර කොටස් වෙත "පැනීම" යන සබැඳියන් සහිත තනි පිටුවක අඩංගු අන්තර්ගතයක් අඩංගු පැරාලැක්ස් ශෛලී වෙබ් අඩවියක් තිබේ නම්. මෙම ඇන්කර් සබඳතා භාවිතා කරන ID ගුණාංග සහ පෙළ සබැඳි භාවිතා කරනුයේ මෙයයි.

ඔබ හුදෙක් මෙම සංකේතාකයේ වටිනාකම, # සංකේතය, සබැඳියේ ඇති href විශේෂණයට:

මෙම සබැඳිය

ක්ලික් කළ විට හෝ ස්පර්ශ කළ විට, මෙම සබැඳිය මෙම හැඳුනුම් පතයට අයත් වන පිටුවේ කොටස වෙත පනින්න. මෙම පිටුවෙහි කිසිදු අංගයක් මෙම ID අගය භාවිතා නොකළේ නම්, සබැඳිය කිසිවක් නොකරන ලදි.

මතක තබා ගන්න, ඔබට වෙබ් අඩවියේ සබැඳි පිටුවක් නිර්මාණය කිරීමට අවශ්ය නම් ID ගුණාංග භාවිතා කිරීම අවශ්ය වනු ඇත, නමුත් ඔබට පොදු CSS හැඩගැස්වීමේ අරමුණු සඳහා පන්තියට හැරවිය හැකිය. වර්තමානයේ පිටු මානයන්වන්නේ මේ ආකාරයටයි. මම හැකි තරම් පංති තේරියර් භාවිතා කළෙමි. CSS සඳහා හකු පමණක් පමණක් නොව, පිටු සම්බන්ධයක් ලෙස ක්රියා කිරීමට මට අවශ්යය වන විට ID වල හැරෙන්නට පමණි.

ජෙනිෆර් ක්රිනින්ගේ මුල් ලිපියක්. 8/9/17 ජෙරමි ගිරාඩ් විසින් සංස්කරණය කරන ලදි