Please support if you like my work by payment through upi: sinhamit@icici or payment by bank
account name: Amit Kumar Sinha,
account number: 2646728782
IFSC code: KKBK0005660
SWIFT: KKBKINBB
Applying CSS to HTML Elements in Category: एचटीएमएल by amit
🕙 Posted on 2023-04-07 at 18:35:09
HTML तत्वों पर CSS नियम लागू करना
आपने कई ब्लॉक स्तर (बॉक्स-प्रकार सहित) HTML तत्वों को देखा है, जिसमें <div> </div> और <p> </p> का अक्सर उपयोग किया जाता है। DIV तत्व कुछ भी नहीं है, लेकिन यह अपने बच्चों (children) का प्रतिनिधित्व करता है, जो कि इसके अंदर रखे गए सभी HTML तत्व हैं। आप <div style="display: inline;"> </div> को इनलाइन तत्व के रूप में भी उपयोग कर सकते हैं।
CSS नियम तीन अलग-अलग तरीकों से लिखे जा सकते हैं:
(1) इनलाइन CSS नियम एक विशिष्ट HTML तत्व के अंदर लिखे जा सकते हैं, और ये नियम केवल उस विशिष्ट HTML तत्व पर लागू होते हैं। यह एक HTML तत्व के अंदर style विशेषता के साथ लिखा जाता है, और इसका मान ठीक वैसा ही है जैसा कि 'चयनकर्ता' (या तो एम्बेडेड <style> </style> या बाहरी स्टाइलशीट में) के लिए { } कर्ली ब्रेसिज़ (curly braces) के अंदर लिखा गया है। इनलाइन CSS स्टाइल का एक उदाहरण ऊपर दिखाया गया है।
(2) बाहरी स्टाइलशीट : (.css एक्सटेंशन के साथ नई फाइल बनाएं, और इसे अपने वेब-पेज में लिंक करें) या तीसरे पक्ष द्वारा पहले से ही बनाई गई (बाहरी) स्टाइलशीट से लिंक करें। एक बाहरी स्टाइलशीट फ़ाइल को कई वेब पेजों से जोड़ा जा सकता है। एक बाहरी स्टाइलशीट .css फ़ाइल के अंदर लिखा गया एक नियम उस प्रकार के सभी HTML तत्व या उस प्रकार के सभी चयनकर्ताओं पर सभी वेब-पृष्ठों में लागू किया जाएगा, जहाँ यह बाहरी फ़ाइल लिंक किया गया है। आप पिछले पृष्ठ में पढ़ चुके हैं कि इस विधि से CSS नियम कैसे लिखे जाते हैं।
(3) एंबेडेड स्टाइल्स को प्रत्येक वेब-पेज में अलग से जोड़ा जाता है, और <style> </style> एलिमेंट के अंदर लिखा गया एक CSS नियम, केवल उस वेब-पेज में, उस प्रकार के सभी HTML एलिमेंट, या लक्षित 'चयनकर्ता' पर लागू होता है। आपने पिछले पृष्ठ में यह भी देखा है कि इस विधि से CSS नियम कैसे लिखा जाता है: h1 { color: Gold; }
स्पष्टीकरण:
जब एक ही HTML तत्व या एक ही 'चयनकर्ता' के लिए CSS नियम, को तीन अलग-अलग स्थानों पर लिखा जाता है, जैसा कि ऊपर बताया गया है, उस HTML तत्व या उस 'चयनकर्ता' पर कौन सा नियम लागू होगा ?
एक HTML फ़ाइल या एक CSS फ़ाइल वेब-ब्राउज़र द्वारा ऊपर से नीचे तक पढ़ी जाती है। इसलिए, <head> </head> तत्व में, यदि EMBEDDED Styles को पहले लिखा जाता है, और उसके बाद EXTERNAL Stylesheet को Link किया जाता है, तो बाहरी Stylesheet में लिखे गए नियमों को लागू किया जाएगा। इसी तरह, जब किसी चयनकर्ता के लिए कोई नियम CSS फ़ाइल के अंदर लिखा जाता है, और पिछले नियमों के बाद अलग-अलग नियम भी लिखे जाते हैं, तो अंतिम नियम (सबसे नीचे वाला) लागू होगा।
इसके अलावा, यदि इनलाइन style विशेषता को HTML तत्व में जोड़ा जाता है, तो इसे उपरोक्त सभी नियमों पर लागू किया जाएगा (चाहे वे नियम, बाहरी स्टाइलशीट फ़ाइल में लिखा या एम्बेडेड किया गया)। यहां तक कि जब एक HTML तत्व में style विशेषता के बाद एक class विशेषता या एक id विशेषता जोड़ी जाती है, तो style विशेषता के नियम लागू होंगे, इससे कोई फर्क नहीं पड़ता कि बाद में क्या जोड़ा गया है। उदाहरण नीचे दिखाया गया है।
एक CSS नियम की पहचान 'चयनकर्ता' द्वारा की जाती है (जब भी, इसके लिए CSS नियम बाहरी या एम्बेडेड शैलियों में लिखे जाते हैं)। 'चयनकर्ता' (i) एक HTML टैगनाम हो सकता है , (ii) एक क्लासनाम (कई HTML तत्वों पर लागू होता है), (iii) एक आईडीनाम (केवल एक विशिष्ट HTML तत्व पर लागू होता है), या (iv) (किसी विशेष HTML तत्व का ) एक विशेषता प्रकार , आदि।
एक HTML तत्व के अंदर एक क्लासनाम को निम्न तरीके से लिखा जा सकता है:
<h1 class="className"> </h1>
एक HTML तत्व के अंदर एक idName को निम्न तरीके से लिखा जा सकता है:
<h1 id="idName"> </h1>
अब, आप इन heading तत्व पर CSS नियम लागू कर सकते हैं, जिनके अंदर className और idName विशेषताएँ हैं। हालाँकि, जब आप उपरोक्त className और idName को बाहरी स्टाइलशीट (.css एक्सटेंशन वाली फ़ाइल) या एम्बेडेड CSS शैली (<style> </style> तत्व के अंदर) में लक्षित करना चाहते हैं, तो आपको निम्नलिखित उदाहरण के रूप में लिखना होगा:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>R.I.B.H.U. Academy</title>
<link href="../../root.css" rel="stylesheet" type="text/css" />
<!-- आप किसी बाहरी फ़ाइल में किसी भी HTML तत्व या 'चयनकर्ता' के लिए CSS नियम लिख सकते हैं। सापेक्ष पथ को समझने के लिए, पिछला पृष्ठ देखें । स्वयं प्रयास करें। -->
<style type="text/css">
/* === EMBEDDED CSS STYLES === */
h1 { color: khaki; }
/* 140 से अधिक रंग-नाम (color-names) हैं जिनका उपयोग CSS गुणों में किया जा सकता है। आपको इन रंग-नामों को मूल्यों के रूप में गलत वर्तनी नहीं लिखनी चाहिए। */
.heading { color: red; } /* एक className को . (डॉट) उपसर्ग (prefix) के साथ चुना जाता है */
#id_head { color: green; } /* एक idName को # उपसर्ग (prefix) (हैश Shift 3 कुंजी) के साथ चुना जाता है। */
</style>
</head>
<body>
<h1 style="color: blue;" id="id_head" class="heading">Exercise: Applying css rules to HTML element</h1>
<script type="text/javascript">
// जावास्क्रिप्ट एंबेडेड कोड स्क्रिप्ट तत्व के अंदर लिखे जाते हैं
</script>
</body>
</html>
Leave a Comment:
Amit Sinha March 2nd, 2023 at 9:30 PM
😃 😄 😁 😆 😅 😂 😉 😊 😇 😍 😘 😚 😋 😜 😝 😶 😏 😒 😌 😔 😪 😷 😵 😎 😲 😳 😨 😰 😥 😢 😭 😱 😖 😣 😞 😓 😩 😫 😤
Ribhu March 3rd, 2023 at 9:30 PM
🐵 🐒 🐶 🐩 🐺 🐱 🐯 🐅 🐆 🐴 🐎 🐮 🐂 🐃 🐄 🐷 🐖 🐗 🐽 🐏 🐑 🐐 🐪 🐫 🐘 🐭 🐁 🐀 🐹 🐰 🐇
