CSS கொண்டு இணைய எழுத்துரு நிறங்கள் மாற்ற எப்படி

நல்ல அச்சுக்கலை வடிவமைப்பு ஒரு வெற்றிகரமான வலைத்தளத்தின் ஒரு முக்கியமான பகுதியாகும். CSS வலைப்பக்கங்களில் நீங்கள் தோற்றமளிக்கும் வலைப்பக்கங்களின் உரை தோற்றத்தின் மீது உங்களுக்கு சிறந்த கட்டுப்பாட்டை வழங்குகிறது. நீங்கள் பயன்படுத்தும் எந்த எழுத்துருக்களின் வண்ணத்தை மாற்றும் திறன் இது.

வெளிப்புற நடை தாள் , உள் நடை தாள் , அல்லது HTML ஆவணம் உள்ள இன்லைன் ஸ்டைலிங் பயன்படுத்தி மாற்றலாம் எழுத்துரு நிறங்கள் மாற்ற முடியும். சிறந்த நடைமுறைகள் நீங்கள் உங்கள் CSS பாணியை ஒரு வெளிப்புற நடை தாள் பயன்படுத்த வேண்டும் என்று கட்டளையிட. உங்கள் ஆவணத்தின் "தலையில்" நேரடியாக எழுதப்பட்ட பாணியிலான உள்ளக நடை தாள், பொதுவாக சிறிய, ஒரு பக்க தளங்களுக்கு மட்டுமே பயன்படுத்தப்படுகிறது. பல ஆண்டுகளுக்கு முன்பு நாம் பழக்கமான பழைய "எழுத்துரு" குறிச்சொற்களை ஒத்திருக்கும் என்பதால் இன்லைன் பாணிகள் தவிர்க்கப்பட வேண்டும். நீங்கள் இன்லைன் பாணியில் ஒவ்வொரு நிகழ்விலும் அவற்றை மாற்ற வேண்டும், ஏனெனில் அந்த இன்லைன் வடிவங்களில் அது மிகவும் கடினமாக எழுத்துரு பாணி நிர்வகிக்க.

இந்த கட்டுரையில், நீங்கள் வெளிப்புற நடை தாள் மற்றும் ஒரு எழுத்துரு டேக் பயன்படுத்தப்படும் ஒரு பாணி பயன்படுத்தி எழுத்துரு வண்ணம் மாற்ற எப்படி கற்று கொள்கிறேன். டேக் உள்ளிட்ட உரையைச் சுற்றியுள்ள எந்தவொரு குறியீட்டிலும் எழுத்துரு நிறத்தை மாற்ற நீங்கள் அதே பாணி சொத்துக்களைப் பயன்படுத்தலாம்.

எழுத்துரு வண்ணத்தை மாற்ற பாங்குகள் சேர்த்தல்

இந்த எடுத்துக்காட்டுக்கு, உங்கள் பக்க மார்க் மற்றும் அந்த ஆவலுடன் இணைக்கப்பட்ட தனி CSS கோப்பிற்கான HTML ஆவணம் இருக்க வேண்டும். HTML ஆவணம் அநேகமாக பல கூறுகளை உருவாக்கும். இந்த கட்டுரையின் நோக்கத்திற்காக நாம் அக்கறை செலுத்துகின்ற ஒரு பத்தி உறுப்பு ஆகும்.

உங்கள் வெளி பாணி தாளைப் பயன்படுத்தி பத்தி குறிச்சொற்களை உள்ளே உரை எழுத்துரு நிறம் மாற்ற எப்படி உள்ளது.

வண்ண மதிப்புகளை வண்ண சொற்கள், RGB வண்ண எண்கள், அல்லது ஹெக்சாடெசிமல் வண்ண எண்கள் என வெளிப்படுத்தலாம்.

1. பத்தி குறிச்சொல்லை பாணி பண்பு சேர்க்க:
   1. ப {}
2. பாணியில் வண்ண சொத்துக்களை வைக்கவும். அந்த சொத்துக்குப் பிறகு ஒரு பெருங்குடல் வைக்கவும்:
   1. p {color:}
3. பின்னர் உங்கள் வண்ண மதிப்பு சொத்து பின்னர் சேர்க்க. அரை-கோலனுடன் அந்த மதிப்பை முடிக்க வேண்டும் என்பதை உறுதி செய்யவும்:
   1. p {color: black;}

உங்கள் பக்கத்தில் உள்ள பத்திகள் இப்போது கருப்பு நிறமாக இருக்கும்.

"கருப்பு" - இந்த உதாரணம் ஒரு வண்ண சொல்லைப் பயன்படுத்துகிறது. இது CSS இல் நிறத்தை சேர்க்க ஒரு வழி, ஆனால் அது மிக குறைவாக உள்ளது. "சிவப்பு", "நீலம்", அல்லது "பச்சை" போன்ற சொற்களைப் பயன்படுத்தினால், "கருப்பு" மற்றும் "வெள்ளை" க்கான முக்கிய சொற்களைப் பயன்படுத்துவது எளிது. சிவப்பு, நீலம் அல்லது பசுமை என்ன நிழலில் நீங்கள் பெறுவீர்கள்? நீங்கள் முக்கிய வார்த்தைகளை கொண்டு எந்த வண்ண நிழல் சரியாக குறிப்பிட முடியாது. இதனால்தான், ஹெக்டேடுசிமல் மதிப்புகள் பெரும்பாலும் வண்ண முக்கிய வார்த்தைகளின் இடத்தில் பயன்படுத்தப்படுகின்றன.

p {color: # 000000; }

# 000000 என்ற hex குறியீட்டை கருப்புக்கு மொழிமாற்றம் செய்வதால், இந்த CSS பாணி கருப்பு நிறத்தில் உங்கள் பத்திகளின் நிறத்தை அமைக்கும். நீங்கள் ஹெக்ஸ் மதிப்புடன் சுருக்கெழுத்தை பயன்படுத்தலாம், அதை # 000 என எழுதலாம், அதே விஷயத்தை நீங்கள் பெறுவீர்கள்.

நாங்கள் ஏற்கனவே குறிப்பிட்டுள்ளபடி, எதேனும் கருப்பு அல்லது வெள்ளை வண்ணம் இல்லாத வண்ணம் தேவைப்படும் போது, ​​ஹெக்ஸ் மதிப்புகள் நன்றாக வேலை செய்கிறது. இங்கே ஒரு உதாரணம்:

p {color: # 2f5687; }

இந்த எண்ம மதிப்பு ஒரு நீல நிறம் பத்திகளை அமைக்கும், ஆனால் முக்கிய "நீல" போலல்லாமல், இந்த எண்ம குறியீடானது நீல நிறத்தில் ஒரு குறிப்பிட்ட நிழலை அமைக்கும் திறனை அளிக்கிறது - வடிவமைப்பாளருக்கு இடைமுகத்தை உருவாக்கும்போது இந்த வலைத்தளம். இந்த வழக்கில், நிறம் ஒரு இடைப்பட்ட, ஸ்லேட் போன்ற நீலமாக இருக்கும்.

இறுதியாக, நீங்கள் எழுத்துரு வண்ணங்களை RGBA வண்ண மதிப்புகளை பயன்படுத்தலாம். RGCA இப்போது அனைத்து நவீன உலாவிகளில் துணைபுரிகிறது, எனவே இந்த மதிப்புகளை ஒரு இணைய உலாவியில் ஆதரிக்காது என்பதில் கொஞ்சம் கவலையாய்ச் சொல்லிவிடலாம், ஆனால் நீங்கள் எளிதில் வீழ்ச்சி ஏற்படலாம்.

p {color: rgba (47,86,135,1); }

இந்த RGBA மதிப்பானது முன்பு குறிப்பிடப்பட்ட ஸ்லேட் நீல வண்ணம் போலாகும். முதல் 3 மதிப்புகள் ரெட், பசுமை மற்றும் ப்ளூ மதிப்புகள் அமைத்து இறுதி எண் ஆல்பா அமைப்பாகும். இது "1" என்று அமைக்கப்பட்டது, அதாவது "100%" என்று பொருள், எனவே இந்த நிறத்தில் வெளிப்படைத்தன்மை இல்லை. நீங்கள் .85 போன்ற ஒரு தசம எண்ணாக அமைத்துவிட்டால், அது 85% ஒளிபுகாநிலையை மொழிபெயர்க்கும் மற்றும் வண்ணம் சிறிது வெளிப்படையானதாக இருக்கும்.

உங்கள் வண்ண மதிப்புகளை புல்லட் செய்ய விரும்பினால், இதைச் செய்வீர்கள்:

p {
நிறம்: # 2f5687;
நிறம்: rgba (47,86,135,1);
}

இந்த தொடரியல் முதலில் ஹெக்ஸ் குறியீட்டை அமைக்கிறது. இது RGBA எண்ணுடன் அந்த மதிப்பை மேலெழுதும். இது RGBA க்கு ஆதரவளிக்காத எந்த பழைய உலாவியும் முதல் மதிப்பைப் பெறும் மற்றும் இரண்டாவதை புறக்கணிக்க வேண்டும் என்பதாகும். நவீன உலாவிகள் CSS cascade ஒன்றுக்கு இரண்டாவது பயன்படுத்த வேண்டும்.