Skip to main content

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

Anonim

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

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

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

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

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

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

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

p {color: # 000000; }

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

p {color: # 2f5687; }

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

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

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

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

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

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

உடை ஒரு HTML பக்கம் மற்ற வழிகள்

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

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