ඔබ එක් අංගයකට එක් එක් CSS පන්තියකට සීමා නොවේ.
කැස්කැඩින් ස්ටයිල් ෂීට් (CSS) ඔබට එම මූලද්රව්යයට අදාළ වන ගුණාංගවල ඇලවීම මඟින් අංග අංගයක් නිර්ණය කිරීමට ඔබට ඉඩ සලසයි. මෙම ගුණාංග එක්කෝ, සහ හැඳුනුම හෝ පන්තිය විය හැකි අතර, ඒවායේ සියලු ගුණාංග මෙන්ම ඒවාට සම්බන්ධ වූ මූලද්රව්ය සඳහා ප්රයෝජනවත් තොරතුරු එක් කරයි. මූලද්රව්යයකට එකතු කරන ලද ගුණාංගය අනුව, ඔබට අංගයක් සහ සමස්තයක් ලෙස වෙබ් අඩවිය සඳහා පෙනුම හා හැඟීම ලබා ගැනීම සඳහා අවශ්ය වන දෘශ්ය ශෛලීන් යෙදීම සඳහා ඔබට CSS තේරියර් ලිවිය හැකිය.
IDs හෝ පංති වල CSS රීති සමඟ ඒවාට සම්බන්ධ කිරීම සඳහා වැඩ කරන අතරතුර, නවීන වෙබ් නිර්මාණකරණ ක්රමවේදයන් මගින් ID වල කොටස් පුරා පන්තිවලට අනුග්රහය දක්වයි. එය අඩුවෙන් නිශ්චිතව සහ සමස්තයක් ලෙස වැඩ කිරීමට පහසු වන බැවිනි. ඔව්, ඔබ තවමත් ID වල භාවිතා කරන බොහෝ වෙබ් අඩවි සොයාගනු ඇත, නමුත් එම ගුණාංග නවීන වෙබ් පිටු පංති විසින් අතීතයට වඩා අතීතයට වඩා වැඩි ලෙස ප්රචලිතව යෙදී ඇත.
CSS හි තනි හෝ බහු පන්ති
බොහෝ අවස්ථාවලදී ඔබ එක් අංගයක් සඳහා තනි පන්ති ගුණාංගයක් ලබා දෙනු ඇත, නමුත් ඔබ සැබවින්ම ඔබ හැඳුනුම් පත් සමග එකම ආකාරයකට පමණක් සීමා නොවේ. මූලද්රව්යයකට එකම ID හැඳුනුමක් තිබිය හැකි වුවද, ඔබට මුලුමනින්ම අංග කිහිපයක පන්ති ලබා දිය හැකි අතර, සමහර අවස්ථාවලදී එසේ කිරීමෙන් ඔබේ පිටුව වඩාත් පහසු වනු ඇත.
ඔබට කිසියම් අංගයක් සඳහා බහු පන්ති පැවරීමට අවශ්ය නම්, අතිරේක පන්ති එකතු කරගත හැකි අතර ඔබේ ආකෘතියේ ඉඩක් හුදෙක් වෙන් කරන්න.
නිදසුනක් ලෙස, මෙම ඡේදයේ පන්ති තුනක් තිබේ:
pullquote feature left "> මෙය ඡේදයේ ඡේදය වනු ඇත.
මෙම ඡේදයේ ඇති ටැගයන් පහත දැක්වේ:
- පුලුවනි
- විශේෂාංග
- වම
මෙම පන්ති වටිනාකම් වලින් එක් එක් ඉඩ ප්රමාණය අතර පරතරය සැලකිල්ලට ගන්න. එම අවකාශය යනු විවිධාකාර, තනි පංති ලෙසිනි. පන්ති නාමයන්ට ඒවායේ අවකාශ තිබිය නොහැකිය. මන්ද එසේ කිරීමෙන් ඔවුන් වෙනම පන්ති ලෙස පිහිටුවනු ඇත.
නිදසුනක් ලෙස, ඔබ අභ්යවකාශයක් නොමැතිව "pullquote-featured-left" භාවිතා කළහොත් එය එක් පන්ති අගයක් වනු ඇත, නමුත් මෙම වචන තුනම වෙන්කර ඇති ස්ථානයට ඉහලින් ඉහත උදාහරණ, තනි තනි අගයන් ලෙස සකසයි. ඔබේ වෙබ්පිටුවල භාවිතා කිරීමට කුමන පන්ති වටිනාකම් ගැන තීරණය කළ යුත්තේ මෙම සංකල්පය තේරුම් ගැනීමයි.
ඔබට ඔබගේ පන්ති අගයන් HTML කිරීමෙන් පසු, ඔබට CSS හි පංති ලෙස පැවරිය හැකි අතර ඔබට එකතු කිරීමට අවශ්ය විලාසන යොදන්න. උදාහරණයක් වශයෙන්.
.අවසානයේ {...}
.featured {...}
p.left {...}
මෙම නිදසුන් තුළ, CSS ප්රකාශ සහ වටිනාකම් යුගලය සඟල වරහන් තුල වේ, ඒ අනුව එම මෝස්තරයන් සුදුසු තේරීම්කාරක වෙත යෙදෙනු ඇත.
සටහන - ඔබ විශේෂිත මූලද්රව්යයක් සඳහා පන්තියක් සකසා ඇත්නම් (උදා. P.left), ඔබට තවමත් එය පන්ති ලැයිස්තුවක් ලෙස එය භාවිතා කළ හැකිය; කෙසේ වෙතත්, එය CSS හි සඳහන් වන මූලද්රව්යවලට පමණක් බලපාන බව දනිමු. වෙනත් වචනවලින් කිවහොත්, p.left ශෛලිය මෙම පන්තිය සමඟ ඡේද වලට අදාළ වනු ඇත. ඔබේ තේරීම්කාරකය ඇත්ත වශයෙන්ම එය "Apply" ලෙස සලකනුයේ "වාමාංශිකය" යන්නයි. ඊට විපරීතව, අනෙක් උදාහරණයක් ලෙස තෝරාගත් දෙදෙනෙක් කිසියම් අංගයක් සඳහන් නොකරයි, ඒ නිසා එම පන්ති වටිනාකම් භාවිතා කරන ඕනෑම මූලද්රව්යයකට අදාළ වේ.
බහු පන්තිවල වාසි
එම මූලද්රව්යය සඳහා සම්පූර්ණ නව ශෛලියක් නිර්මාණය කිරීමකින් තොරව අංගයන් සඳහා විශේෂ ප්රයෝග එක් කිරීම සඳහා බහු පංතීන්ට පහසු විය හැකිය.
නිදසුනක් ලෙස, ඔබට වම හෝ දකුණට මූලයන් float කිරීමට හැකියාව තිබිය යුතුය. ඔබ නිදහසේ පියාසර කරන්නට වම් සහ දකුණු පංති දෙකක් ලියන්න: වම්; සහ float: හරි; ඔවුන් තුළ ඇත. එවිට, ඔබට කිසියම් මූලද්රව්යයක් තිබුනේ නම් වමට වතුර පාවෙන විට, ඔබ "පන්ති" වම් පස ලැයිස්තුවට එකතු කරනු ඇත.
කෙසේ වෙතත් මෙහි ඇවිදීමට ඉතා හොඳ රේඛාවක් තිබේ. වෙබ් ප්රමිතීන් අනුව ශෛලිය හා ව්යූහය වෙන් කිරීම තීරණය කරනු ලැබේ. ව්යුහය HTML හරහා හැසිරවිය හැකි අතර CSS වල style එකකි.
ඔබේ HTML ලේඛනය සියලු දෙනාටම "රතු" හෝ "වමේ" වැනි පන්ති නාමයන් පිරී ඇති නම්, ඒවායේ ඒවාට වඩා කෙතරම් පරාමිතීන් බලනු ඇත්දැයි යන නාමයන් නම්, ඔබ ව්යුහය හා ස්වරය අතරට එම පේළිය හරස් වේ. මෙම හේතුව නිසා මාගේ නොවිසඳුනු පංති නාමයන් හැකි තරම් සීමා කිරීමට මම උත්සාහ කරමි.
බහු පන්ති, semantics සහ JavaScript
විවිධ පංති භාවිතා කිරීම සඳහා තවත් වාසියක් එය තවත් බොහෝ අන්තර්ක්රියාකාරී හැකියාව ලබා දෙයි.
ආරම්භක පංති කිසිවක් ඉවත් නොකෙරෙන JavaScript භාවිතයෙන් පවතින නව අංග සඳහා ඔබට නව පන්ති යොමු කළ හැකිය. මූලද්රව්යයක අර්ථ විග්රහ කිරීමට පංති භාවිතා කළ හැකිය. මෙම මූලද්රව්ය අර්ථ දැක්වීම අර්ථවත් කිරීම සඳහා අතිරේක පන්ති මත එක් කළ හැකිය. මයික්රොෆෝටේෂස් ක්රියා කරන්නේ මේ ආකාරයටය.
විවිධ පංතිවල අවාසි
ඔබගේ මූලද්රව්යවල බහු පන්ති භාවිතා කිරීම සඳහා ඇති ලොකුම අවාසි වන්නේ, එය කාලයත් සමඟ කළමණාකරනය කිරීමට සහ ඒවා කළමනාකරණය කිරීමට ඔවුන් සෑහෙන අමාරු තත්වයකට පත් කළ හැකි බවයි. කිසියම් මූලද්රව්යයකට බලපාන කුමන විලාසිතාවන්ද යන්න තීරණය කිරීමට අපහසු විය හැකි අතර යම්කිසි අක්ෂර මාලාවකට එය බලපානවා. වර්තමානයේ බෝට් ස්ටෙප් වැනි බොහෝ රාමු බහුපරිමාණ සහිත මූලද්රව්ය විශාල ලෙස භාවිතා කරයි. එම කේතය ඔබට පරෙස්සම් විය නොහැකි නම් ඉක්මනින් වැඩ කිරීමට අපහසු විය හැකිය.
ඔබ විවිධ පංති භාවිතා කරන විට, ඔබ විසින් මෙම පංතිය සඳහා තවත් එක් පන්තියක හැඩගැසීමේ අවදානම ක්රියාත්මක නොකරයි. එවිට ඔබේ විලාසිතාවන් ඒවාට අනුකූල නොවන අවස්ථාවලදී යෙදීම නොලැබේ මන්දැයි තේරුම් ගැනීමට අපහසු විය හැකිය.
එම එක් මූලද්රව්යයට අදාළ වන ගුණාංග සමඟ පවා ඔබ විශේෂිත බව දැන සිටිය යුතුය!
Chrome හි වෙබ්මාස්ටර් මෙවලම් වැනි මෙවලමක් භාවිතා කරමින්, ඔබේ පන්ති වලට ඔබේ විලාසයන් කෙරෙහි බලපාන ආකාරය සහ ගැටුම්කාරී විලාසයන් සහ ගුණාංග වල මෙම ගැටළුව මඟහරවා ගත හැකිය.
ජෙනිෆර් ක්රිනින්ගේ මුල් ලිපියක්. 8/7/17 ජෙරමි ගිරාඩ් විසින් සංස්කරණය කරන ලදි