जवाबों:
बस jdelStrother ने w3 स्पेक्स और ARTstudio के ब्राउजर रेंडरिंग के बारे में क्या कहा है, इसे जोड़ने के लिए।
यह अनुशंसित है क्योंकि जब आपके पास सीएसएस <body>शुरू होने से पहले घोषित किया जाता है, तो आपकी शैली वास्तव में पहले से ही भरी हुई है। तो बहुत जल्दी उपयोगकर्ताओं को अपनी स्क्रीन पर कुछ दिखाई देता है (जैसे पृष्ठभूमि रंग)। यदि नहीं, तो उपयोगकर्ता सीएसएस के उपयोगकर्ता तक पहुंचने से पहले कुछ समय के लिए रिक्त स्क्रीन देखते हैं।
इसके अलावा, यदि आप शैलियों को कहीं छोड़ देते हैं <body>, तो ब्राउज़र को पृष्ठ (नए और पुराने को लोड करते समय) को फिर से प्रस्तुत करना पड़ता है जब घोषित शैलियों को पार्स किया गया होता है।
linkऔर styleतब तक शरीर में दिखाई नहीं देना चाहिए जब तक वे या तो स्कोप (शैली) न हों या उनके पास विशेषता itemprop(लिंक) न हो।
styleएक प्रवाह तत्व है (भले ही यह स्कूप न हो) और शरीर में डाला जा सकता है।
scopedविशेषता को बाधित किया गया है।
एचटीएमएल कल्पना के सबसे हाल के संस्करण अब <style>शरीर के तत्वों के भीतर टैग की अनुमति देते हैं। https://www.w3.org/TR/html5/dom.html#flow-content
इसके अलावा जो scopedविशेषता पूर्व styleमें टैग होने के लिए आवश्यक थी, bodyवह अब अप्रचलित है।
इसका मतलब है, कि आप styleहर जगह अपने इच्छित टैग का उपयोग कर सकते हैं, एक बार ब्राउज़र में शैलियों को पेज ट्री में और नीचे हिट करने के बाद संभव रिफॉल्स / रिपैन्ट्स के कारण केवल प्रदर्शन कम हो जाते हैं।
अप्रचलित उत्तर:
<style>टैग के भीतर अनुमति नहीं है <body>w3 चश्मा के अनुसार। ( <div style="color:red">यदि आवश्यक हो, तो आप निश्चित रूप से इनलाइन शैलियों को लागू कर सकते हैं, लेकिन यह आमतौर पर शैली और सामग्री की खराब पृथक्करण माना जाता है)
<style>एक प्रवाह तत्व है और इसे शरीर में रखा जा सकता है (अन्य सभी प्रवाह तत्वों के रूप में)।
CSS को बॉडी में डालने का मतलब है कि इसे बाद में लोड किया गया है। यह एक ऐसी तकनीक है जिसके उपयोग से ब्राउज़र इंटरफ़ेस को तेज़ी से शुरू करने देता है (यानी, यह एक अवरुद्ध कदम को हटा देता है)। यह स्मार्टफ़ोन पर उपयोगकर्ता के अनुभव के लिए महत्वपूर्ण है।
मैं एक छोटी सी सीएसएस रखने की पूरी कोशिश करता हूं <head>और मैं नीचे की तरफ बढ़ता हूं। उदाहरण के लिए, यदि कोई पृष्ठ JQuery UI CSS का उपयोग करता है, तो मैं हमेशा इसे <body>JQuery के जावास्क्रिप्ट के लिंक से ठीक पहले, नीचे की ओर ले जाता हूं । कम से कम, सभी गैर जेकरी आइटम पहले से ही खींचे जा सकते हैं।
हेड के लिए डिज़ाइन किया गया है (W3C को उद्धृत करते हुए):
"वर्तमान दस्तावेज़ के बारे में जानकारी, जैसे इसका शीर्षक, कीवर्ड जो खोज इंजन के लिए उपयोगी हो सकते हैं, और अन्य डेटा जिन्हें सामग्री नहीं माना जाता है "
एक HTML दस्तावेज़ की वैश्विक संरचना देखें । जैसा कि सीएसएस दस्तावेज़ सामग्री नहीं है, यह सिर में होना चाहिए।
इसके अलावा हर दूसरे वेब डेवलपर को इसे वहां देखने की उम्मीद होगी, इसलिए इसे काम करने पर भी इसे शरीर में रखकर भ्रमित न करें, भले ही यह काम करता हो!
केवल सीएसएस जिसे आपको शरीर में रखना चाहिए , इनलाइन सीएसएस है , हालांकि मैं आमतौर पर इनलाइन शैलियों से बचता हूं।
मानक ( HTML 4.01: शैली तत्व ) स्पष्ट रूप से निर्दिष्ट करता है कि शैली टैग केवल हेड टैग के अंदर की अनुमति है। यदि आप बॉडी टैग में स्टाइल टैग लगाते हैं, तो ब्राउजर किसी भी तरह, यदि संभव हो तो इसे सर्वश्रेष्ठ बनाने की कोशिश करेगा।
यदि आप एक सख्त दस्तावेज़ प्रकार निर्दिष्ट करते हैं तो यह संभव है कि ब्राउज़र शरीर में एक शैली टैग को अनदेखा कर देगा। मुझे नहीं पता कि कोई वर्तमान ब्राउज़र ऐसा करता है, लेकिन मैं सभी भविष्य के संस्करणों पर भरोसा नहीं करूंगा कि आप शैली के तत्व को कहां रखते हैं।
styleटैग्स में शरीर में अनुमति दी जाती है यदि उनके पास एक scopedविशेषता है।
यद्यपि styleटैग को शरीर में अनुमति नहीं है, लेकिन linkटैग तब तक है, जब तक आप बाहरी स्टाइलशीट का संदर्भ दे रहे हैं, सभी ब्राउज़रों को सीएसएस को सही तरीके से प्रस्तुत करना और उपयोग करना चाहिए जब में उपयोग किया जाता है body।
स्रोत: https://html.spec.whatwg.org/multipage/semantics.html#the-link-element
पहले के उत्तरों के अलावा, हालांकि तत्व के अंदर एक स्टाइल कोड ब्लॉक डालना आधुनिक ब्राउज़रों में काम कर सकता है (हालांकि यह अभी भी इसे सही नहीं बनाता है), हमेशा एक खतरा होता है, खासकर पुराने ब्राउज़रों के साथ कि ब्राउज़र कोड को पाठ के रूप में प्रस्तुत करेगा। जब तक कि स्टाइल सेक्शन सीडीएटीए सेक्शन में शामिल नहीं हो जाता।
बेशक, इनलाइन शैलियों के अलावा, तत्व के अंदर डालने के साथ दूसरी बात यह है कि जैसा कि यह डब्ल्यू 3 सी एचटीएमएल / एक्सएचटीएमएल चश्मा के साथ नहीं मिलता है, यह है कि शरीर के भीतर इसके साथ कोई भी पृष्ठ डब्ल्यू 3 सी सत्यापनकर्ता पर विफल हो जाएगा। अप्रत्याशित प्रदर्शन समस्याओं को बग-हंट करना हमेशा आसान होता है यदि आपका सभी कोड मान्य है, तो गलतियों को सुलझाना आसान है। एक अमान्य HTML तत्व किसी भी और सभी तत्व के कोड में जहां कहीं भी होता है, उसके प्रतिकूल प्रभाव को प्रतिकूल रूप से प्रभावित कर सकता है, इसलिए आप उन स्थानों पर तत्वों के अप्रत्याशित प्रभाव प्राप्त कर सकते हैं जहां उन्हें नहीं होना चाहिए, क्योंकि जब कोई ब्राउज़र एक अमान्य तत्व पाता है, तो यह बस यह सबसे अच्छा अनुमान लगाता है कि इसे कैसे प्रदर्शित किया जाना चाहिए, और विभिन्न ब्राउज़र इसे कैसे प्रस्तुत करते हैं, इसमें अलग-अलग निर्णय ले सकते हैं।
चाहे आप एक संक्रमणकालीन या एक सख्त सिद्धांत का उपयोग करते हैं, यह अभी भी (एक्स) एचटीएमएल चश्मा के अनुसार अमान्य होगा।
आप वास्तव में शरीर में शैलियों को डालकर सीएसएस का उपयोग करने के उद्देश्य को हरा देंगे। बिंदु प्रस्तुति (और फ़ंक्शन) से सामग्री को अलग करना होगा। इस तरह, स्टाइल में कोई भी बदलाव स्टाइलशीट में किया जा सकता है, कंटेंट में नहीं। एक बार जब आप इनलाइन स्टाइल विधि का उपयोग कर लेते हैं, तो इनलाइन स्टाइलिंग वाले प्रत्येक पृष्ठ को एक-एक करके बदलना पड़ता है। थकाऊ और जोखिम भरा है क्योंकि आप एक पृष्ठ या तीन, या दस को याद कर सकते हैं।
एक स्टाइलशीट का उपयोग करना, आपको केवल स्टाइलशीट बदलने की आवश्यकता है; परिवर्तन हर HTML पृष्ठ पर स्वचालित रूप से प्रचारित होता है जो स्टाइलशीट से जुड़ता है।
नवजात की बात भी एक और बड़ी वजह है; यदि आप CSS इनलाइन जोड़कर HTML को गड़बड़ करते हैं, तो रेंडरिंग एक समस्या बन जाती है। HTML आपके कोड में अपवाद नहीं फेंकता है। इसके बजाय यह बाहर जाता है और इसे सबसे अच्छा तरीका प्रदान करता है, और आगे बढ़ता है।
एक स्टाइलशीट का उपयोग करके वेब मानकों का पालन करना एक बेहतर वेबसाइट के लिए बनाता है। और जब आपको सहायता की आवश्यकता होती है क्योंकि आपके पृष्ठ पर चीजें ठीक उसी तरह से नहीं हैं जैसे आप उन्हें चाहते हैं, तो अपने सीएसएस को सिर पर रखकर शरीर के विपरीत अपने आप से बहुत बेहतर समस्या निवारण के लिए बनाता है और किसी से भी आप मदद मांगते हैं।
दो परस्पर विरोधी उत्तर:
लिंक टैग पर MDN पेज से :
एक
<link>तत्व या तो तत्व<head>या<body>तत्व में हो सकता है , यह इस बात पर निर्भर करता है कि क्या उसका लिंक प्रकार शरीर-ठीक है। उदाहरण के लिए, स्टाइलशीट लिंक प्रकार बॉडी-ओके है, और इसलिए<link rel="stylesheet">शरीर में इसकी अनुमति है। हालांकि यह सबसे अच्छा अभ्यास नहीं है; यह आपके<link>तत्वों को आपके शरीर की सामग्री से अलग करने के लिए अधिक समझ में आता है, उन्हें आपके सिर में डाल रहा है।
सीएसएस से निश्चित गाइड (4 वें संस्करण / 2017) पृष्ठ 10
बाहरी स्टाइलशीट को सफलतापूर्वक लोड करने के लिए, लिंक को मुख्य तत्व के अंदर रखा जाना चाहिए, लेकिन किसी अन्य तत्व में नहीं रखा जा सकता है।
क्या फर्क पड़ेगा?
पेशेवरों: कभी-कभी कुछ स्थानों पर कुछ विशेषताओं को लागू करना आसान होता है, खासकर अगर कोड मक्खी पर उत्पन्न हो रहा हो (जैसे कि php के माध्यम से निर्माण और गतिशील रूप से आकार की प्रत्येक सूची में अपनी कक्षा की आवश्यकता होती है ... जैसे कि परिवर्तनों के लिए आइटम समय के लिए)।
विपक्ष: थोड़ा धीमा, दूर के भविष्य में किसी दिन काम नहीं हो सकता है।
इस पर मेरी सामान्य राय: ऐसा न करें कि आपके पास यह नहीं है, लेकिन अगर आपके पास है, तो इस पर कोई नींद न खोएं।
<style>शरीर में पुट लगाना सभी आधुनिक ब्राउज़रों के साथ अच्छा काम करता है।
मैं ईबे में इस का उपयोग कर रहा था।
अगर यह काम करता है, तो इसे लात मत मारो।