CSS सह वेबसाइट फॉन्ट रंग कसे बदलावे

चांगली टायपोग्राफी डिझाईन हे एक यशस्वी वेबसाइटचा एक महत्वाचा भाग आहे. CSS आपण तयार केलेल्या वेब पृष्ठांवर आपल्याला वेबपृष्ठांवर मजकूराच्या स्वरुपावर खूप नियंत्रण देते. यात आपण वापरत असलेल्या कोणत्याही फॉन्टचा रंग बदलण्याची क्षमता समाविष्ट आहे.

बाह्य रंगीत शैली , आंतरीक शैली पत्रक वापरून फॉन्ट रंग बदलता येतात, किंवा HTML डॉक्युमेंटमध्ये इनलाइन स्टाईल वापरून ते बदलता येतील. सर्वोत्कृष्ट अभ्यासासाठी आपल्या CSS शैलीसाठी आपण बाह्य शैली पत्रक वापरणे आवश्यक आहे. एक आंतरिक शैली पत्रक, जे आपल्या दस्तऐवजाच्या "डोके" मध्ये थेट लिहिलेली शैली आहेत, साधारणपणे केवळ लहान, एक-पृष्ठ साइट्ससाठी वापरली जातात. इनलाइन शैली टाळली पाहिजे कारण ते बर्याच वर्षांपूर्वी आम्ही हाताळलेल्या जुन्या "फॉन्ट" टॅग्ड प्रमाणेच आहोत. त्या इनलाइन शैलीने फॉन्ट शैली व्यवस्थापित करणे खूप कठीण बनवते कारण आपल्याला त्याला इनलाइन शैलीच्या प्रत्येक घटनात बदलण्याची आवश्यकता आहे.

या लेखातील, आपण एक बाह्य शैली पत्रक आणि एक परिच्छेद टॅग मध्ये वापरली एक शैली वापरून फॉन्ट रंग कसे बदलावे ते शिकू शकाल आपण टॅगसह मजकूरास कोणत्याही टॅगवरील फाँट रंग बदलण्यासाठी समान शैली प्रॉपर्टी अर्ज करू शकता.

फॉन्ट रंग बदलण्यासाठी शैली जोडणे

या उदाहरणासाठी, आपल्या पृष्ठाच्या मार्कअपसाठी एक HTML दस्तऐवज असणे आवश्यक आहे आणि त्या दस्तऐवजाशी संलग्न एक स्वतंत्र सीएसएस फाइल असेल. एचटीएमएल डॉक्युमेंटमध्ये त्यातील अनेक घटक असतील. आम्ही या लेखाच्या उद्देशासाठी काळजी घेत असलेला परिच्छेद घटक आहे.

येथे आपल्या बाह्य शैली पत्रकाचा वापर करुन मजकूराच्या फॉन्टचा रंग कसा बदलावा ते येथे आहे.

कलर व्हॅल्यूज रंगीत कीवर्ड, आरजीबी कलर नंबर्स किंवा हेक्झाडेसिमल कलर नंबर्स म्हणून व्यक्त केले जाऊ शकतात.

1. परिच्छेद टॅगसाठी शैली विशेषता जोडा:
   1. पी {}
2. शैलीमध्ये रंग गुण ठेवा त्या मालमत्तेनंतर एक विष्ठा ठेवा:
   1. पी {रंग:}
3. नंतर आपले रंग मूल्य मालमत्ता नंतर जोडा अर्ध कोलन असलेल्या मूल्याची खात्री करणे:
   1. पी {रंग: काळा;}

आपल्या पृष्ठातील परिच्छेद आता काळा होईल

हे उदाहरण रंगाचे कीवर्ड "काळा" वापरते. CSS मध्ये रंग जोडण्याचा हा एक मार्ग आहे, परंतु तो खूप मर्यादित आहे. "काळा" आणि "पांढर्या" साठी कीवर्ड वापरणे सोपे आहे कारण त्या दोन रंग अतिशय विशिष्ट आहेत, परंतु आपण "लाल", "निळा", किंवा "हिरव्या" असे कीवर्ड वापरत असल्यास काय होते? लाल, निळा किंवा हिरवा रंग कोणता आहे? आपण कीवर्डसह कोणता रंग शेड इच्छित आहात ते निर्दिष्ट करू शकत नाही. या कारणास्तव हेक्झाडेसीमल व्हॅल्यू वारंवार रंग कीवर्डच्या जागी वापरले जाते.

पी {रंग: # 000000; }

ही सीएसएस शैली आपल्या परिच्छेदांचा रंग काळ्या रंगाने सेट करेल कारण हेक्स कोड # 000000 मध्ये काळा करिता भाषांतरित आहे. आपण हेक्स मूल्यासह लघुलिपी देखील वापरू शकता आणि ते केवळ # 000 म्हणून लिहू शकता आणि आपल्याला तीच गोष्ट मिळेल

आम्ही आधीच नमूद केल्याप्रमाणे, हेक्स व्हॅल्यूज योग्य प्रकारे कार्य करते जेव्हा आपल्याला केवळ काळा किंवा पांढरा नसलेला रंग आवश्यक असतो येथे एक उदाहरण आहे:

पी {color: # 2f5687; }

हे हेक्स मूल्य निळ्या रंगाचे परिच्छेद सेट करेल परंतु "ब्लू" या शब्दाच्या विपरीत, हे हेक्स कोड आपल्याला ब्लूच्या विशिष्ट छटा सेट करण्याची क्षमता देते - संभाव्यतः डिझाइनर जेव्हा ते इंटरफेस तयार करत होते तेव्हा ही वेबसाइट. या प्रकरणात, रंग एक चेंडू श्रेणी, स्लेट सारखी निळा असेल.

शेवटी, आपण फॉन्ट रंगांकरिता RGBA रंग मूल्ये देखील वापरू शकता. RGCA आता सर्व आधुनिक ब्राउझरमध्ये समर्थित आहे, जेणेकरून आपण या मूल्यांना थोडा काळजीपूर्वक वापरू शकता की ते एका वेब ब्राउझरमध्ये समर्थित नसेल, परंतु आपण सोपा फॉलबॅक देखील सेट करू शकता.

पी {रंग: आरजीबीए (47,86,135,1); }

हे RGBA मूल्य पूर्वी निर्दिष्ट स्लेट निळा रंग सारखेच आहे. पहिले 3 मूल्ये रेड, ग्रीन आणि ब्लू व्हॅल्यू सेट करतात आणि अंतिम संख्या अल्फा सेटिंग आहे. हे "1" वर सेट आहे, याचा अर्थ "100%" आहे, त्यामुळे या रंगाकडे पारदर्शकता नसेल आपण ते दशांश क्रमांकावर सेट केल्यास, .85 सारखे, ते 85% अपारदर्शकतेमध्ये अनुवादित होईल आणि रंग किंचित पारदर्शक होईल

आपण आपली रंग मूल्ये बुलेटप्रुफ करू इच्छित असल्यास, आपण हे करू:

पी {
रंग: # 2f5687;
रंग: आरजीबीए (47,86,135,1);
}

हे वाक्यरचना प्रथम हेक्स कोड सेट करते त्यानंतर RGBA क्रमांकासह त्या मूल्य ओव्हरराय होतो. याचा अर्थ असा की आरजीबीएला समर्थन देत नसलेला कोणताही जुना ब्राउझर प्रथम मूल्य प्राप्त करेल आणि दुसऱ्याकडे दुर्लक्ष करेल. आधुनिक ब्राउझर सीएसएस कॅस्केड प्रति सेकंद वापरतात.