परिचय
HTML style एट्रिब्यूट HTML दस्तावेज़ में एक एलिमेंट के लिए इंलाइन स्टाइल को परिभाषित करता है। यह एक ग्लोबल एट्रिब्यूट है, जिसका अर्थ है कि इसे किसी भी HTML एलिमेंट पर उपयोग किया जा सकता है। इंलाइन स्टाइल्स बाहरी या आंतरिक CSS को ओवरराइड करती हैं (उच्च विशिष्टता)।
सिंटैक्स
<tagname style="text"></tagname>
उदाहरण
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
font-family: Arial, sans-serif;
padding: 20px;
}
</style>
<body>
<h1>HTML style एट्रिब्यूट डेमो</h1>
<p>विषयों की सूची:</p>
<ol style="font-size:1.2rem;font-weight:bold;color:#333;">
<li>भौतिकी</li>
<li>रसायन विज्ञान</li>
<li>गणित</li>
<li>जीव विज्ञान</li>
<li>अर्थशास्त्र</li>
</ol>
<p style="color: #db133a; font-style: italic;">ऊपर दी गई सूची पर इंलाइन स्टाइल लागू है।</p>
</body>
</html>
आउटपुट
क्रमित सूची बोल्ड, बड़े फॉन्ट आकार (1.2rem) और गहरे रंग में दिखाई देगी। नीचे का पैराग्राफ लाल रंग और इटैलिक में होगा।
महत्वपूर्ण बिंदु
- CSS प्रॉपर्टीज सेमीकॉलन (;) से अलग की जाती हैं
- प्रॉपर्टी नाम और मान कोलन (:) से अलग किए जाते हैं
- कोट्स के अंदर पूरा स्टाइल स्ट्रिंग होता है
- इंलाइन स्टाइल्स की विशिष्टता सबसे अधिक होती है (केवल
!importantसे ओवरराइड हो सकती है) - रखरखाव के लिए, बाहरी CSS फ़ाइलें बेहतर हैं
कब उपयोग करें
- डायनामिक स्टाइलिंग (JavaScript से गणना किए गए मान)
- ईमेल टेम्पलेट्स (जहां बाहरी CSS समर्थित नहीं)
- त्वरित प्रोटोटाइपिंग/टेस्टिंग
- यूनिक, वन-टाइम स्टाइल्स
कब बचें
- बड़े प्रोजेक्ट्स में (रखरखाव कठिन)
- पुन: प्रयोज्य स्टाइल्स के लिए
- जब CSS क्लासेस/आईडी बेहतर काम करें
- कंटेंट और प्रेजेंटेशन को अलग रखने के लिए
JavaScript से इंलाइन स्टाइल मैनिपुलेशन
// सिंगल प्रॉपर्टी element.style.color = "red"; element.style.fontSize = "1.5rem"; // कैमलकेस // मल्टीपल प्रॉपर्टीज element.style.cssText = "color: red; font-size: 1.5rem; font-weight: bold;"; // मान प्राप्त करें const color = element.style.color; // केवल इंलाइन स्टाइल लौटाता है, कंप्यूटेड नहीं
ब्राउज़र समर्थन
सभी ब्राउज़रों में पूर्ण समर्थन।
