कस्टम CSS गुणों का उपयोग करके एक विजेट बनाएँ: NHL वेबसाइट के लिए एक कस्टम लिंक एम्बेड करें

HTML वेब डिज़ाइन नेटोलॉजी कोर्स के लेखक, स्टास मेलनिकोव ने एक विजेट के लेआउट का एक उदाहरण दिखाया, जिसे तीसरे पक्ष की साइट पर एम्बेड किया जा सकता है।

पिछली बार हमने इस बारे में बात की थी कि उपयोगकर्ता के गुण क्या हैं , और अब, उदाहरण के रूप में NHL वेबसाइट का उपयोग करते हुए, हम दिखाएंगे कि कस्टम लिंक एम्बेड करने के लिए उनका उपयोग कैसे करें।

कभी-कभी आपको एक विजेट विकसित करने की आवश्यकता होती है जिसे विभिन्न परियोजनाओं में लागू किया जाएगा। सीएसएस विशिष्टता की प्रकृति के कारण, यह अक्सर सिरदर्द में बदल जाता है।

मैं इस समस्या के समाधान के साथ आया जब मुझे कस्टम गुणों के बारे में पता चला। मैं आपको दिखाता हूं कि यह कैसे काम करता है: मैं एक awesomeLink विजेट नहीं awesomeLink और इसे NHL.com पर एम्बेड करने का प्रयास awesomeLink ।

विजेट में तीन कस्टम गुण होंगे जो कि अंतर्निहित color , font-size और display गुणों के लिए मान सेट करने के लिए उपयोग किए जा सकते हैं। display संपत्ति के लिए, मैं inline-block में डिफ़ॉल्ट मान सेट करता हूं।

 .awesomeLink { --uiAwesomeLinkColor: var(--awesomeLinkColor); --uiAwesomeLinkFontSize: var(--awesomeLinkFontSize); --uiAwesomeLinkDisplay: var(--awesomeLinkDisplay, inline-block); display: var(--uiAwesomeLinkDisplay); font-size: var(--uiAwesomeLinkFontSize); color: var(--uiAwesomeLinkColor); } 

मेरी CSS फ़ाइल कनेक्ट करने के लिए, devTools खोलें और link टैग जोड़ें।

NHL.com साइट मेनू में आँकड़े तत्व बदलें

साइट मेनू में आँकड़े लिंक बदलें। नेविगेशन में आँकड़े तत्व के लिए एक awesomeLink जोड़ें।



यदि आप तत्व के सीएसएस को देखते हैं, तो आप देख सकते हैं कि display की विशिष्टता के कारण, font-size और color गुणों को पार किया जाता है।



एक परिचित तस्वीर, सही? यह सुनिश्चित करने के लिए कि विजेट की अंतर्निहित संपत्तियाँ हमेशा कॉपीराइट शैलियों में पूर्वता लेती हैं, जोड़ो !important

कई डर शब्द, और एक कारण के लिए। वास्तव में, यदि आपको मूल्यों को बदलने की आवश्यकता है, तो आपको फिर से रखना होगा !important फिर से, और यह पहले से ही इसके साथ एक अंतहीन संघर्ष की ओर ले जाता है।

हम कस्टम गुण का उपयोग करके इस समस्या को हल करेंगे: यह उनके माध्यम से है कि आप अंतर्निहित गुणों के मूल्यों को नियंत्रित कर सकते हैं। आइए देखें कि यह कैसे काम करता है।

 .awesomeLink { --uiAwesomeLinkColor: var(--awesomeLinkColor); --uiAwesomeLinkFontSize: var(--awesomeLinkFontSize); --uiAwesomeLinkDisplay: var(--awesomeLinkDisplay, inline-block); display: var(--uiAwesomeLinkDisplay) !important; font-size: var(--uiAwesomeLinkFontSize) !important; color: var(--uiAwesomeLinkColor) !important; } 

अब आप अंतर्निहित color , font-size और display गुणों के लिए मान सेट कर सकते हैं:

 :root { --awesomeLinkColor: #c21bc2; --awesomeLinkFontSize: 20px; --awesomeLinkDisplay: flex; } 

आँकड़े तत्व ने रंग और आकार बदल दिया

हम देखते हैं कि सेटिंग्स काम करती हैं, लेकिन कंप्यूटेड टैब में उनके मान देखें।



सब कुछ वैसा ही चले जैसा होना चाहिए।

नियंत्रण प्रयोग: शेड्यूल तत्व को बदलें

प्रयोग के लिए, शेड्यूल एलिमेंट के लिए एक और awesomeLink क्लास जोड़ने का प्रयास करें। हमने इसके मूल तत्व li में सेटिंग्स को वर्ग megamenu-navbar-overflow__menu-item ।

 .megamenu-navbar-overflow__menu-item:nth-child(6) { --awesomeLinkColor: tomato; --awesomeLinkFontSize: 25px; --awesomeLinkDisplay: block; } 

नेत्रहीन, तत्व को इस तरह प्रदर्शित किया जाता है:



अलग रंग और आकार शेड

मुझे पता है कि पाठकों को !important घोषणा का उपयोग करने के बारे में संदेह होगा। मुझे भी संदेह था, लेकिन अभी तक मुझे कोई समस्या नहीं हुई है। यदि आपको समस्याएँ दिखाई देती हैं, तो !important टिप्पणी में चर्चा करते हैं।

संपादकों से

विषय पर नेटोलॉजी पाठ्यक्रम:

• ऑनलाइन पेशा " फ्रंटेंड डेवलपर "
• ऑनलाइन पेशा " वेब डेवलपर "
• ऑनलाइन पेशे " परीक्षक "
• नि: शुल्क HTML और सीएसएस बुनियादी बातों ऑनलाइन पाठ्यक्रम