CSS गुण सेट करने के लिए पसंदीदा तरीका क्या है?
इनलाइन शैली गुण:
<div style="width:20px;height:20px;background-color:#ffcc00;"></div>
<style>...</style>टैग में शैली गुण :
<style>.gold{width:20px;height:20px;background-color:#ffcc00;}</style><div class="gold"></div>
जवाबों:
शैली नियमों का उपयोग करके संलग्न किया जा सकता है:
आमतौर पर, मैं लिंक्ड स्टाइल शीट का उपयोग करना पसंद करता हूं क्योंकि वे:
हालाँकि, आपका प्रश्न विशेष रूप से styleटैग बनाम इनलाइन शैलियों के बारे में पूछ रहा है । styleइस मामले में, टैग का उपयोग करना पसंद करें , क्योंकि यह:
इनलाइन तत्व केवल उनके संबंधित तत्व को प्रभावित करते हैं।
styleटैग और इनलाइन विशेषता के बीच एक महत्वपूर्ण अंतर विशिष्टता है। जब एक शैली दूसरे से आगे निकलती है तो विशिष्टता निर्धारित होती है। आम तौर पर, इनलाइन शैलियों में एक उच्च विशिष्टता होती है।
सीएसएस पढ़ें : इस विषय पर एक मनोरंजक नज़र के लिए विशिष्टता युद्ध ।
मुझे आशा है कि वह मदद करेंगे!
<div style="border:1px solid #707070; border-left:0">
@importया @font-faceएक शैली विशेषता से नियम लागू कर सकते हैं ? मैं यह भी कह रहा हूँ क्योंकि मैं एक ऐसे मामले में हूँ जिसे मुझे html विशेषता की अनुमति है style=""लेकिन <style></style>टैग नहीं ।
scopedविशेषता है (हालांकि यह अभी तक व्यापक रूप से समर्थित नहीं है) जो आपको <style> ... </style>ब्लॉक इनलाइन का उपयोग करने की अनुमति देता है - जैसे developer.mozilla.org/en-US/docs/ वेब / एचटीएमएल / तत्व / शैली
यहाँ एक पहलू है जो अंतर को नियंत्रित कर सकता है:
यदि आप जावास्क्रिप्ट में एक तत्व की शैली बदलते हैं, तो आप इनलाइन शैली को प्रभावित कर रहे हैं। अगर वहाँ पहले से ही एक शैली है, तो आप इसे स्थायी रूप से अधिलेखित कर देते हैं। लेकिन, अगर शैली को बाहरी शीट या एक <style>टैग में परिभाषित किया गया था , तो ""उस स्रोत से शैली को पुनर्स्थापित करने के लिए इनलाइन को सेट करना ।
निर्भर करता है।
मुख्य बिंदु दोहराया कोड से बचने के लिए है।
यदि समान कोड को 2 बार या अधिक बार फिर से उपयोग करने की आवश्यकता है, और परिवर्तन करते समय सिंक में होना चाहिए, बाहरी स्टाइल शीट का उपयोग करें।
यदि आप केवल एक बार इसका उपयोग करते हैं, तो मुझे लगता है कि इनलाइन ठीक है।
आपके प्रत्यक्ष प्रश्न का उत्तर देने के लिए: इनमें से कोई भी पसंदीदा तरीका नहीं है। एक अलग फ़ाइल का उपयोग करें।
इनलाइन शैलियों का उपयोग केवल अंतिम उपाय के रूप में किया जाना चाहिए, या जावास्क्रिप्ट कोड द्वारा सेट किया जाना चाहिए। इनलाइन शैलियों में विशिष्टता का उच्चतम स्तर होता है, इसलिए अपनी वास्तविक शैलियों को ओवरराइड करें। इससे उन्हें नियंत्रित करना मुश्किल हो सकता है (आपको !importantउसी कारण से बचना चाहिए )।
एक एम्बेडेड <style>ब्लॉक की अनुशंसा नहीं की जाती है, क्योंकि आप अपनी साइट पर कई पृष्ठों में स्टाइलशीट को कैश करने के लिए ब्राउज़र की क्षमता खो देते हैं।
तो संक्षेप में, जहाँ भी संभव हो, आपको अपनी शैलियों को एक अलग सीएसएस फ़ाइल में डालना चाहिए।
एक स्थिरता के दृष्टिकोण से, एक फ़ाइल में एक आइटम को प्रबंधित करना बहुत सरल है, क्योंकि यह संभवतः कई फ़ाइलों में कई मदों का प्रबंधन करना है।
आपकी स्टाइल को अलग करने से आपके जीवन को बहुत आसान बनाने में मदद मिलेगी, खासकर जब विभिन्न व्यक्तियों के बीच नौकरी के कर्तव्यों को वितरित किया जाता है। पुन: प्रयोज्य और पोर्टेबिलिटी आपको सड़क के नीचे बहुत समय बचाएगी।
इनलाइन शैली का उपयोग करते समय, जो सेट किए गए किसी भी बाहरी गुण को ओवरराइड करेगा।
मैं बहुमत के दृष्टिकोण से सहमत हूं कि बाहरी स्टाइलशीट पसंदीदा तरीका है।
हालांकि, यहां कुछ व्यावहारिक अपवाद हैं:
गतिशील पृष्ठभूमि छवियां। सीएसएस स्टाइलशीट स्थिर फाइलें हैं इसलिए आपको डायनामिक (डेटाबेस, सीएमएस आदि ...) background-imageशैली से जोड़ने के लिए इनलाइन शैली का उपयोग करने की आवश्यकता है ।
यदि पृष्ठ लोड होने पर किसी तत्व को छिपाने की आवश्यकता है, तो इसके लिए बाहरी स्टाइलशीट का उपयोग करना व्यावहारिक नहीं है, क्योंकि स्टाइलशीट संसाधित होने से पहले हमेशा कुछ देरी होगी और ऐसा होने तक तत्व दिखाई देगा। style="display: none;"इसे प्राप्त करने का सबसे अच्छा तरीका है।
यदि कोई एप्लिकेशन किसी विशेष सीएसएस मूल्य, जैसे टेक्स्ट रंग पर उपयोगकर्ता को ठीक नियंत्रण देने जा रहा है, तो यह इनलाइन styleतत्वों या इन-पेज <style></style>ब्लॉकों को जोड़ना आवश्यक हो सकता है । जैसे style="color:#{{ page.color }}", या<style> p.themed { color: #{{ page.color }}; }</style>
एक के ऊपर एक रास्ता चुनने के अलग-अलग कारण हो सकते हैं।
अन्यथा, जैसा कि कहा गया है, एक अलग सीएसएस फ़ाइल का उपयोग करना बेहतर है।
आप नीचे बताए अनुसार सीएसएस को तीन अलग-अलग तरीकों से सेट कर सकते हैं: -
1.External style sheet
2.Internal style sheet
3.Inline style
सीएसएस शैली को स्थापित करने का पसंदीदा / आदर्श तरीका बाहरी शैली की शीट का उपयोग कर रहा है जब शैली कई पृष्ठों पर लागू होती है। बाहरी स्टाइल शीट के साथ, आप एक फ़ाइल को बदलकर संपूर्ण वेब साइट का रूप बदल सकते हैं।
नमूना उपयोग हो सकता है: -
<head>
<link rel="stylesheet" type="text/css" href="your_css_file_name.css">
</head>
यदि आप किसी एकल दस्तावेज़ में एक अनूठी शैली लागू करना चाहते हैं तो आप आंतरिक शैली शीट का उपयोग कर सकते हैं।
इनलाइन शैली शीट का उपयोग न करें, क्योंकि यह प्रस्तुति के साथ सामग्री को मिलाती है और कई फायदे खो देती है।