सीएसएस को कैसे जोड़ें
- पिछला पृष्ठ सीएसएस चयनकर्ता
- अगला पृष्ठ सीएसएस टिप्पणी
जब ब्राउज़र साइटस्टाइल शीट पढ़ता है, तो वह साइटस्टाइल शीट में उपलब्ध सूचनाओं के अनुसार एचटीएमएल दस्तावेज़ को फ़ॉर्मैट करता है。
सीएसएस का तीन तरीके से उपयोग
साइटस्टाइल शीट जोड़ने के तीन तरीके हैं:
- एक्सटर्नल सीएसएस
- margin-left: 20px;
- <p>This is a paragraph.</p>
एक्सटर्नल सीएसएस
एक्सटर्नल साइटस्टाइल शीट का उपयोग करके, आपको केवल एक फ़ाइल को संपादित करने के बाद पूरे वेबसाइट की अपेक्षा बदलनी होगी!
हर एचटीएमएल पृष्ठ को हेड भाग के <link> एलिमेंट में एक्सटर्नल साइटस्टाइल शीट के संदर्भ को शामिल करना चाहिए。
उदाहरण
एक्सटर्नल साइटस्टाइल एचटीएमएल पृष्ठ के <head> भाग के <link> एलिमेंट में परिभाषित किया जाता है:
इनलाइन स्टाइल एक संबंधित एलिमेंट के "style" एट्रिब्यूट में परिभाषित की जाती है: <!DOCTYPE html> <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <html> margin-left: 40px; <h1>This is a heading</h1> <p style="color:red;">This is a paragraph.</p> </body>
外部样式表可以在任何文本编辑器中编写，并且必须以 .css 扩展名保存。
बाहरी स्टाइल शीट को किसी भी टेक्स्ट एडिटर में लिखा जा सकता है और उसे .css एक्सटेंशन से सहेजना चाहिए।
बाहरी .css फ़ाइल को कोई HTML टैग नहीं शामिल करना चाहिए。
"mystyle.css" ऐसा है:
आंतरिक स्टाइल HTML पृष्ठ के <head> भाग के भीतर <style> एलिमेंट में परिभाषित की जाती है:
"mystyle.css"
}
h1 {
color: navy;
）。सही लिखना है:
}
background-color: lightblue;ध्यान दें: कृपया एट्रिब्यूट मान और इकाई के बीच जगह न लगाएं (उदाहरण के लिएmargin-left: 20 px;）。सही लिखना है:
margin-left: 20px;
आंतरिक CSS
यदि एक HTML पृष्ठ कोई एकल स्टाइल है, तो आंतरिक स्टाइल शीट का उपयोग कर सकते हैं。
उदाहरण
आंतरिक स्टाइल head भाग के <style> एलिमेंट में परिभाषित की जाती है。
इनलाइन स्टाइल एक संबंधित एलिमेंट के "style" एट्रिब्यूट में परिभाषित की जाती है:
<!DOCTYPE html>
<head>
<style>
आंतरिक स्टाइल HTML पृष्ठ के <head> भाग के भीतर <style> एलिमेंट में परिभाषित की जाती है:
body {
}
h1 {
background-color: linen;
color: maroon;
}
</style>
</head>
<html>
margin-left: 40px;
<h1>This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
<p>This is a paragraph.</p>
इनलाइन CSS
इनलाइन स्टाइल (जिसे भी इनलाइन स्टाइल कहा जाता है) को एक एलिमेंट के लिए अनूठा स्टाइल लागू करने के लिए उपयोग किया जाता है。
उदाहरण
यदि इनलाइन स्टाइल का उपयोग करना है, तो संबंधित एलिमेंट में style एट्रिब्यूट जोड़ें. style एट्रिब्यूट को कोई CSS एट्रिब्यूट शामिल किया जा सकता है。
इनलाइन स्टाइल एक संबंधित एलिमेंट के "style" एट्रिब्यूट में परिभाषित की जाती है: <!DOCTYPE html> <html> <body> <h1 style="color:blue;text-align:center;">This is a heading</h1> <p style="color:red;">This is a paragraph.</p> </body>
</html>सूचना:
इनलाइन स्टाइल ने स्टाइल शीट के कई लाभ खो दिए है (सामग्री और प्रस्तुतीकरण को मिलाकर रखा है). कृपया इस तरीके का सावधानी से उपयोग करें。
अनेक स्टाइल शीट
यदि अलग-अलग स्टाइल शीटों में एक ही चयनक एलिमेंट के लिए कुछ गुण निर्धारित किए गए हैं, तो अंतिम पढ़ी स्टाइल शीट के मान का उपयोग किया जाएगा。बाहरी स्टाइल शीटजिसे <h1> एलिमेंट के लिए नीचे के स्टाइल निर्धारित किए गए हैं:
h1 {
color: navy;
}
तो, इसके बादआंतरिक स्टाइल शीटतो <h1> एलिमेंट के लिए नीचे के स्टाइल निर्धारित किए गए हैं:
h1 {
color: orange;
}
उदाहरण
यदि आंतरिक स्टाइल बाहरी स्टाइल शीट से जुड़ा हैबाद मेंडिफाइन किया है, तो <h1> एलिमेंट नीली रंग का होगा:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
उदाहरण
यदि बाहरी स्टाइल शीट से जुड़ा हैपहलेअंतर्निहित स्टाइल निर्दिष्ट किया गया है, तो <h1> एलिमेंट गहरे नीला होगा:
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
स्तर श्रेणी
जब किसी HTML एलिमेंट के लिए कई स्टाइल निर्दिष्ट किए गए हों, तो कौन सा स्टाइल इस्तेमाल किया जाएगा?
पृष्ठ में सभी स्टाइल निम्नलिखित नियम के अनुसार 'स्तरबद्ध' होगी, जिसमें 'वर्चुअल' स्टाइल तालिका के नए 'स्तर' के रूप में होगी, जिसमें प्रथम प्राथमिकता सबसे उच्च है:
- इंटरलाइन स्टाइल (HTML एलिमेंट में)
- बाहरी और अंतर्गत स्टाइल तालिका (head भाग में)
- ब्राउज़र डिफ़ॉल्ट स्टाइल
इसलिए, इंटरलाइन स्टाइल सबसे उच्च प्राथमिकता रखती है और इसके बाहरी और अंतर्गत स्टाइल और ब्राउज़र डिफ़ॉल्ट स्टाइल को ओवरले करती है。
- पिछला पृष्ठ सीएसएस चयनकर्ता
- अगला पृष्ठ सीएसएस टिप्पणी
