CSS සමඟ වෙබ් අඩවි වර්ණ වෙනස් කිරීම සිදු කරන්නේ කෙසේද?

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

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

මෙම ලිපියේ, ඔබට බාහිර ආකාරයේ පත්රිකාවක් සහ ඡේද ටැග් වල භාවිතා කරන ආකාරයේ අකුරු වර්ණය වෙනස් කිරීමට ඉගෙන ගනු ඇත. <සිරස්> ටැගය ඇතුළු පාඨය වටා ඇති ඕනෑම ටැගය මත ෆොන්ට වර්ණය වෙනස් කිරීම සඳහා එම ශෛලිය දේපලට අදාළ කළ හැකිය.

වර්ණ වෙනස් කිරීම සඳහා ස්ලයිඩ එකතු කිරීම

මෙම උදාහරණයේදී, ඔබේ පිටු සලකුණු සඳහා HTML ලේඛණයක් සහ එම ලේඛනයට අමුණා ඇති වෙන වෙනම CSS ගොනුවකි. HTML ලේඛනය එහි මූලද්රව්ය ගණනාවක් ඇත. මෙම ලිපියේ අරමුණු සඳහා අප සම්බන්ධ වන්නේ අපායේ කොටසයි.

මෙන්න ඔබේ බාහිර ශිලා පත්රය භාවිතයෙන් ඡේදයේ ඇතුළත අකුරු වර්ණය වෙනස් කිරීමයි.

වර්ණ අගයන් වර්ණ වචන, RGB වර්ණ අංක හෝ හෙඩියෙක් ප්රමාණයේ වර්ණ අංක ලෙස ප්රකාශ කළ හැකිය.

1. ඡේද ටැගය සඳහා ශෛලමය ගුණත්වය එක් කරන්න:
   1. p {}
2. ශෛලිය තුල වර්ණ දේපල තබන්න. එම දේපලෙන් චිලියේ ස්ථානයක් තබන්න:
   1. p {වර්ණය:}
3. එවිට දේපලෙන් පසුව ඔබේ වර්ණ අගය එකතු කරන්න. අර්ධ-අක්ෂරය සමඟ එම අගය අවසන් කිරීමට වග බලා ගන්න:
   1. p {වර්ණය: කළු;}

ඔබේ පිටුවෙහි ඡේද කළු බවට පත්වේ.

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

p {වර්ණය: # 000000; }}

මෙම CSS ශෛලිය ඔබේ පාට කළු වර්ණයෙන් වර්ණවත්වන අතර, # 000000 hex කේතය කළු වර්ණයෙන් පරිවර්තනය වේ. ඔබ හෙක්ටෙයාර් අගයටත් සරල කළ හැකි අතර එය # 000 ක් ලෙස ලියන්න. ඔබට එකම දේ ලැබෙනු ඇත.

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

p {වර්ණය: # 2f5687; }}

මෙම හෙක්ටයාර අගයන් නිල් පාටට තැබිය හැකි නමුත්, නිල් පැහැති යතුර මෙන් නොව, මෙම හෙක්ටෙයාර් කේතය නිල් පැහැති නිශ්චිත සෙවනක් සැකසීමට ඔබට හැකියාව ලබා දෙයි - නිර්මාණකරු තෝරාගන්නා විට අතුරුමුහුණතක් නිර්මාණය කරන විට එය තෝරා ගත හැකිය. මෙම වෙබ් අඩවිය. මෙම අවස්ථාවේ දී වර්ණය මැද-පරාසය, ස්ලයිට් වැනි නිල් පැහැති වේ.

අවසාන වශයෙන්, ඔබට ෆොන්ට වර්ණ සඳහා RGBA වර්ණ අගයන් භාවිතා කළ හැකිය. RGCA දැන් දැන් සියලුම නූතන බ්රව්සර වල සහය දක්වයි. එබැවින් ඔබට මෙම අගයන් භාවිතා කර වෙබ් බ්රවුසරයක් තුළ සහාය නොදක්වන අතර ඒ සඳහා පහසු ගෙවීම් ලබා ගත හැකිය.

p {වර්ණය: rgba (47,86,135,1); }}

මෙම RGBA අගය කලින් සඳහන් කරන ලද ස්ලයිට් නිල් වර්ණයට සමාන වේ. මුල් 3 අගයන් රතු, කොළ සහ නිල් අගයන් අනුගමනය කරන අතර අවසාන අංකය ඇල්ෆා සැකසුම වේ. එය "1" ලෙස දක්වා ඇත, එනම් "100%" යන අර්ථය ඇති නිසා, මෙම වර්ණය විනිවිද භාවයෙන් නොතිබෙනු ඇත. ඔබ එය දශාංශික සංඛ්යාවක් දක්වා නම්, .85 වැනි, එය 85% නොවන පාරාන්ධතාවය පරිවර්තනය කරනු ඇති අතර වර්ණය තරමක් පාරදෘශ්ය වනු ඇත.

ඔබ ඔබේ වර්ණ අගය අගය නොකරන ලෙසට අවශ්ය නම්, ඔබ මෙය සිදු කරනු ඇත:

p {
වර්ණය: # 2f5687;
වර්ණය: rgba (47,86,135,1);
}}

මෙම රීතිය මුලින්ම හෙක්ටේන් කේතය ප්රථමයෙන් සකසයි. ඉන්පසු එම අගය RGBA අංකය සමඟ පරිලෝකනය කරයි. මෙයින් අදහස් කරන්නේ RGBA වලට සහාය නොදක්වන ඕනෑම පැරණි බ්රව්සරයක් පළමු අගය ලබා ගන්නා අතර දෙවැනි නොසලකා හරින බවයි. නවීන බ්රව්සර්වල CSS කැස්ඩැට් අනුව දෙවනව භාවිතා කරනු ඇත.