सीएसएससँग वेबसाइट फन्ट रङहरू कसरी परिवर्तन गर्ने?

राम्रो टाइपोग्राफिक डिजाइन एक सफल वेबसाइट को एक महत्वपूर्ण भाग हो। सीएसएसले तपाईंलाई वेब पृष्ठहरूमा पाठको उपस्थितिमा राम्रो नियन्त्रण प्रदान गर्दछ जुन तपाईले निर्माण गर्नुहुने वेब पृष्ठहरू। यसमा तपाइँले प्रयोग गर्ने कुनै पनि फन्टको रंग परिवर्तन गर्न क्षमता समावेश गर्दछ।

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

यस लेखमा, तपाईं बाह्य शैली पाना र अनुच्छेद ट्यागमा प्रयोग भएको शैली प्रयोग गरेर फन्ट रङ कसरी परिवर्तन गर्न सक्नुहुन्छ। तपाईले एउटै शैली गुण लागू गर्न सक्नुहुन्छ जुन पाठको वरिपरि कुनै पनि ट्यागमा फन्ट रङलाई बदल्दछ, जसमा ट्याग सहित।

फन्ट रङ परिवर्तन गर्न शैलीहरू थप्दै

यस उदाहरणका लागि, तपाइँसँग तपाइँको पृष्ठ मार्कअप र एक फरक CSS फाईलका लागि एचटीएमएल कागजात हुनु पर्छ जुन त्यो कागजातमा संलग्न छ। एचटीएमएल कागजातले सम्भावित हुन सक्दछ। यस लेखको उद्देश्यको लागि हामी चिन्तित छौं अनुच्छेद तत्व हो।

यहाँ तपाईंको बाह्य शैली पाना प्रयोग गरेर अनुच्छेद ट्याग भित्र पाठको फन्ट रङ कसरी परिवर्तन गर्ने छ।

रङ मानहरू रङ किबोर्डहरू, RGB रङ नम्बरहरू, वा हेक्साडेसिमल रङ नम्बरहरूको रूपमा व्यक्त गर्न सकिन्छ।

1. अनुच्छेद ट्यागका लागि शैली विशेषता थप्नुहोस्:
   1. p {}
2. रङ गुण शैलीमा राख्नुहोस्। त्यो गुण पछि बृहदान्त्र राख्नुहोस्:
   1. p {रंग:}
3. त्यसपछि गुणस्तर पछि आफ्नो रङ मान थप्नुहोस्। अर्ध-बृहदान्त्रसँग त्यो मान समाप्त गर्न निश्चित गर्नुहोस्:
   1. p {रंग: कालो;}

तपाईंको पृष्ठको अनुच्छेद अब ब्ल्याक हुनेछ।

यो उदाहरण रङ किबोर्ड प्रयोग गर्दछ - "कालो"। त्यो CSS मा रंग थप्न एक तरिका हो, तर यो धेरै सीमित छ। "ब्ल्याक" र "सेतो" को लागि कुञ्जीशब्दहरू प्रयोग गर्न सरल छ किनकि ती दुई रङहरू धेरै विशिष्ट छन्, तर के हुन्छ यदि तपाईं "लाल", "नीलो", वा "हरियो" कुञ्जी शब्दहरू प्रयोग गर्नुहुन्छ भने? के वास्तवमा रातो, निलो, हरियो को के छाया पाउनुहुनेछ? तपाईँले कुञ्जीशब्दहरूसँग कुन चाँहि छाया निर्दिष्ट गर्न सक्नुहुन्न। यसैले हेक्साडेसिमल मानहरू प्राय: रङ किबोर्डमा प्रयोग गरिन्छ।

p {रंग: # 000000; }

यो सीएसएस स्टाइलले तपाईंको अनुच्छेदको रंगलाई ब्ल्याक सेट गर्दछ, किनभने # 000000 को हेक्स कोडले ब्ल्याकलाई अनुवाद गर्दछ। तपाईं पनि हेर्थ मूल्यको साथ हेक्स मानको साथ र यसलाई सिर्फ 000 को रूपमा लेख्न सक्नुहुनेछ र तपाईं त्यहि कुरा प्राप्त गर्नुहुनेछ।

हामीले पहिले नै उल्लेख गरिसकेपछि, हेक्स मानहरू राम्रोसँग काम गर्दछौं जब तपाइँ एक रङ चाहिन्छ जुन अँध्यारो वा सेतो छैन। यहाँ एक उदाहरण हो:

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 लाई समर्थन गर्दैन जुन कुनै पुरानो ब्राउजर पहिलो मान हुनेछ र दोस्रोलाई बेवास्ता गर्दछ। आधुनिक ब्राउजरहरूले दोस्रो सीएसएस क्यास्केड प्रति प्रयोग गर्नेछ।