HTML <style> टैग
परिभाषा और उपयोग
<style>
टैग HTML दस्तावेज़ के शैली सूचना (CSS) को परिभाषित करता है。
इसमें <style>
एलिमेंट में, आप एचटीएमएल एलिमेंट के ब्राउज़र में प्रदर्शन को निर्दिष्ट कर सकते हैं。
ध्यान दें कि, style एलिमेंट HTML दस्तावेज़ के अंतर्निहित CSS शैली को परिभाषित करता है, जबकि link एलिमेंट बाहरी शैली पट्टी के शैली को आयात करता है。
style एलिमेंट HTML दस्तावेज़ के हर हिस्से में दिख सकता है। एक दस्तावेज़ में कई style एलिमेंट हो सकते हैं, इसलिए सभी शैली परिभाषाओं को head हिस्से में डालना आवश्यक नहीं है। टैंपलेट इंजीन द्वारा पृष्ठ बनाने के समय यह विशेषता बहुत मददगार होती है, क्योंकि इससे टैंपलेट द्वारा परिभाषित शैली को पृष्ठ विशेष शैली से पूरा किया जा सकता है।
अन्य संदर्भ:
HTML शिक्षा:HTML CSS
CSS शिक्षा:CSS शिक्षा
HTML DOM संदर्भ निर्देशिका:Style ऑब्जैक्ट
उदाहरण
उदाहरण 1
उपयोग करें <style>
एलिमेंट HTML दस्तावेज़ पर सरल शैली पट्टी लगाता है:
<html> <head> <style> h1 {color:red;} p {color:blue;} </style> </head> <body> <h1>यह शीर्षक है</h1> <p>यह एक पैराग्राफ है。</p> </body> </html>
उदाहरण 2
समान एलिमेंट के लिए अनेक शैली
<html> <head> <style> h1 {color:red;} p {color:blue;} </style> <style> h1 {color:green;} p {color:pink;} </style> </head> <body> <h1>यह शीर्षक है</h1> <p>यह एक पैराग्राफ है。</p> </body> </html>
सूचना और टिप्पणी
ध्यान दें:ब्राउज़र शैली पट्टी पढ़ता है तो, वह HTML दस्तावेज़ को शैली पट्टी में माहिती के अनुसार फॉर्मैट करता है। अगर एक ही चयनकर्ता (एलिमेंट) के लिए विभिन्न शैली पट्टियों में कुछ गुणों की परिभाषा की गई है, तो पिछली बार पढ़ी गई शैली पट्टी में की गई गुणों के मूल्यों का उपयोग किया जाएगा (ऊपरी उदाहरण देखें)!
सुझाव:बाहरी शैली सामग्री को लिंक करने के लिए इस्तेमाल करें <link> टैग。
सुझाव:साइटेबल की जानकारी के लिए हमारे CSS शिक्षा。
गुण
गुण | मूल्य | वर्णन |
---|---|---|
media | मीडिया क्वेरी | रेगिस्टर साइट का शैली उपयोग करने वाले मीडिया |
type | text/css | रेगिस्टर <style> टैग के मीडिया तह |
वैश्विक गुण
<style>
टैग इवेंट गुण का समर्थन करते हैं HTML में वैश्विक गुण。
इवेंट गुण
<style>
टैग इवेंट गुण का समर्थन करते हैं HTML में इवेंट गुण。
डिफ़ॉल्ट CSS सेटिंग
अधिकांश ब्राउज़र निम्नलिखित डिफ़ॉल्ट मूल्यों को दिखाएंगे <style>
एलीमेंट:
style { display: none; }
ब्राउज़र समर्थन
च्रोम | एज | फायरफॉक्स | सैफारी | ऑपेरा |
---|---|---|---|---|
च्रोम | एज | फायरफॉक्स | सैफारी | ऑपेरा |
सापोर्ट | सापोर्ट | सापोर्ट | सापोर्ट | सापोर्ट |