ඔබේ වෙබ් අඩවියේ පෙනුම වැඩි දියුණු කිරීමට ඉගෙන ගන්න
CSS සමඟ ආකෘති විලාසනය කරන ආකාරය ඉගෙන ගැනීම ඔබේ වෙබ් අඩවියේ පෙනුම වැඩි දියුණු කිරීම සඳහා විශිෂ්ට ක්රමයකි. බොහෝ වෙබ් අඩවිවල HTML ආකෘති තර්කානුකූලව ඉදිරිපත් කර ඇත. ඔවුන් නිතරම වෙහෙස මහන්සි වී වැඩ කරන අතර ඒවායේ ස්වරූපයෙන් බොහෝ දේ ඉදිරිපත් නොකරයි.
CSS සමඟ එය වෙනස් කළ හැකිය. වඩා උසස් ආකෘති ටැග් සහිත CSS ඒකාබද්ධ කිරීම මගින් යම් ලස්සන පෙනුමක් ඇති ආකාරයන් ලබා ගත හැකිය.
වර්ණ වෙනස් කරන්න
පාඨමය ලෙස මෙන්ම, ආකෘති මූලද්රව්යවල පෙරබිම සහ පසුබිම් වර්ණ වෙනස් කළ හැකිය.
සෑම ස්වරූපයක්ම පාහේ පසුබිමේ වර්ණය වෙනස් කිරීමට පහසු ක්රමයක් වන්නේ ආදාන ටැගය මත පසුබිම් වර්ණ දේපල භාවිතා කිරීමයි. උදාහරණයක් ලෙස, මෙම කේතය සියලු මූලද්රව්ය මත නිල් පසුබිම් වර්ණය (# 9cf) යොදයි.
ආදාන {
පසුබිම් වර්ණය: # 9cf;
වර්ණය: # 000;
}}
ඇතැම් ආකෘති මූලද්රව්යවල පසුබිම් වර්ණය වෙනස් කිරීම සඳහා, textarea එක් කරන්න සහ ශෛලියට තේරීම. උදාහරණයක් වශයෙන්:
ආදාන, textarea, {
පසුබිම් වර්ණය: # 9cf;
වර්ණය: # 000;
}}
ඔබ පසුබිමේ වර්ණය අඳුරු කළහොත් ඔබට පෙළ වර්ණය වෙනස් කිරීමට වග බලා ගන්න. වර්ණ වෙනස් කිරීම උපකාරි වේ. උදාහරණයක් ලෙස, වර්ණය සුදු පාට නම්, අඳුරු රතු පසුබිමක වර්ණය බොහෝ පහසුවෙන් කියවිය හැකි ය. උදාහරණයක් ලෙස, මෙම කේතය සුදු පාට රතු පසුබිමක් මත ස්ථානගත කරයි.
ආදාන, textarea, {
පසුබිම් වර්ණය: # c00;
වර්ණය: #fff;
}}
ඔබට පවා ආකෘති ටැගය තුළ පසුබිම් පාටක් තැබිය හැකිය. ආකෘති ටැගය යනු බ්ලොක් මූලද්රව්යයක් බව මතක තබා ගන්න, එම නිසා සම්පූර්ණ වර්ණකය පුරවා ඇති අතර, මූලද්රව්යවල ස්ථානවල පමණක් නොවේ.
ඔබට මෙවැනි ප්රදේශයක් කැපී පෙනෙන ලෙස කොටස් කිරීමට කැපූ කොටසක කහ පැහැති පසුබිමක් එකතු කළ හැකිය:
ආකෘතිය {
පසුබිම් වර්ණය: #ffc;
}}
දේශසීමා එකතු කරන්න
වර්ණ වශයෙන් මෙන්, විවිධ ආකාරයේ අංගවල සීමාවන් වෙනස් කළ හැකිය. සම්පූර්ණ ස්වරූපය වටා එක් මායිමක් එක් කළ හැකිය. වැල්වැටීම එකතු කිරීමට වග බලා ගන්න, නැතහොත් ඔබේ ආකෘති අංගය දේශසීමාවට ආසන්නව තල්ලු කරනු ලැබේ.
මෙන්න 1 හි ඇති පික්සල් කළු පාට පෙදෙසට 5 පික්සල් සහිත කෝඩ් එකක උදාහරණයක්:
ආකෘතිය {
මායිමේ: 1px solid # 000;
වැල්ඩින්: 5px;
}}
ඔබට පෝරමය පමනක් නොව සීමාවන්ට වඩා ඔබ වටා කළ හැකිය. ආදාන අයිතමවල මායිම වෙනස් කරන්න:
ආදාන {
දේශසීමා: 2px ඉරා දැමූ # c00;
}}
එවිට ඔබ ආදාන පෙට්ටිවලට වඩා අඩුවෙන් පෙනෙන පරිදි ආදාන පෙට්ටිවල සීමාවන් තැබිය යුතුය. ඇතැම් අය විසින් එම ආකෘති පත්රය පිරවිය නොහැකි බව සමහරුන් නොදැන සිටිය හැකිය.
සංයුක්ත ශෛලිය විශේෂාංග
ඔබේ ආකෘති අංගය සිතුවිලි හා ඇතැම් CSS සමඟ සම්බන්ධ කිරීමෙන්, ඔබට ඔබේ වෙබ් අඩවියේ සැලසුම සහ සැලැස්ම සමඟ ගැලපෙන මනාව පෙනෙන ආකෘතියක් සකස් කළ හැකිය.