सीएसएस - समावेश

शैलियों को अपने HTML दस्तावेज़ के साथ जोड़ने के चार तरीके हैं। आमतौर पर इस्तेमाल किए जाने वाले तरीके इनलाइन सीएसएस और एक्सटर्नल सीएसएस हैं।

एंबेडेड सीएसएस - <शैली> तत्व

आप <CSS> तत्व का उपयोग करके अपने CSS नियमों को एक HTML दस्तावेज़ में रख सकते हैं। यह टैग <head> ... </ head> टैग्स के अंदर रखा गया है। इस सिंटैक्स का उपयोग करके परिभाषित नियमों को दस्तावेज़ में उपलब्ध सभी तत्वों पर लागू किया जाएगा। यहाँ सामान्य वाक्यविन्यास है -

<!DOCTYPE html>
<html>
   <head>
      <style type = "text/css" media = "all">
         body {
            background-color: linen;
         }
         h1 {
            color: maroon;
            margin-left: 40px;
         }
      </style>
   </head>   
   <body>
      <h1>This is a heading</h1>
      <p>This is a paragraph.</p>
   </body>
</html>

यह निम्नलिखित परिणाम का उत्पादन करेगा -

गुण

<शैली> तत्वों से जुड़े गुण हैं -

गुण	मूल्य	विवरण
प्रकार	text / css	शैली पत्रक भाषा को सामग्री-प्रकार (MIME प्रकार) के रूप में निर्दिष्ट करता है। यह आवश्यक विशेषता है।
मीडिया	स्क्रीन tty टीवी प्रक्षेपण हाथ में प्रिंट ब्रेल कर्ण-संबंधी सब	वह उपकरण निर्दिष्ट करता है जिस पर दस्तावेज़ प्रदर्शित किया जाएगा। डिफ़ॉल्ट मान सभी है । यह एक वैकल्पिक विशेषता है।

इनलाइन सीएसएस - शैली विशेषता

आप शैली नियमों को परिभाषित करने के लिए किसी भी HTML तत्व की शैली विशेषता का उपयोग कर सकते हैं । ये नियम उस तत्व पर ही लागू होंगे। यहाँ सामान्य वाक्यविन्यास है -

<element style = "...style rules....">

गुण

गुण	मूल्य	विवरण
अंदाज	शैली के नियम	शैली विशेषता का मूल्य अर्धविराम (;) द्वारा अलग किए गए शैली घोषणाओं का एक संयोजन है।

उदाहरण

उपरोक्त सिंटैक्स पर आधारित इनलाइन CSS का उदाहरण निम्नलिखित है -

<html>
   <head>
   </head>

   <body>
      <h1 style = "color:#36C;"> 
         This is inline CSS 
      </h1>
   </body>
</html>

यह निम्नलिखित परिणाम का उत्पादन करेगा -

बाहरी सीएसएस - <लिंक> तत्व

आपके HTML दस्तावेज़ में बाहरी स्टाइलशीट फ़ाइल को शामिल करने के लिए <लिंक> तत्व का उपयोग किया जा सकता है।

एक बाहरी शैली शीट एक अलग पाठ फ़ाइल है .cssविस्तार। आप इस पाठ फ़ाइल के भीतर सभी शैली नियमों को परिभाषित करते हैं और फिर आप इस फ़ाइल को <लिंक> तत्व का उपयोग करके किसी भी HTML दस्तावेज़ में शामिल कर सकते हैं।

यहाँ बाह्य सीएसएस फ़ाइल सहित सामान्य वाक्यविन्यास है -

<head>
   <link type = "text/css" href = "..." media = "..." />
</head>

गुण

<शैली> तत्वों से जुड़े गुण हैं -

गुण	मूल्य	विवरण
प्रकार	पाठ सीएसएस	शैली पत्रक भाषा को सामग्री-प्रकार (MIME प्रकार) के रूप में निर्दिष्ट करता है। यह विशेषता आवश्यक है।
href	यूआरएल	शैली नियम के साथ स्टाइल शीट फ़ाइल निर्दिष्ट करता है। यह विशेषता एक आवश्यक है।
मीडिया	स्क्रीन tty टीवी प्रक्षेपण हाथ में प्रिंट ब्रेल कर्ण-संबंधी सब	वह उपकरण निर्दिष्ट करता है जिस पर दस्तावेज़ प्रदर्शित किया जाएगा। डिफ़ॉल्ट मान सभी है । यह वैकल्पिक विशेषता है।

उदाहरण

एक साधारण स्टाइल शीट फ़ाइल पर विचार करें, जिसका नाम मिस्टाइल है । निम्नलिखित नियम हैं -

h1, h2, h3 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

अब आप इस फाइल को शामिल कर सकते हैं mystyle.css किसी भी HTML प्रलेख के रूप में इस प्रकार में -

<head>
   <link type = "text/css" href = "mystyle.css" media = " all" />
</head>

आयातित सीएसएस - @ आयात नियम

@import का उपयोग बाहरी स्टाइलशीट को <लिंक> तत्व के समान तरीके से आयात करने के लिए किया जाता है। यहाँ @ नियम नियम का सामान्य वाक्य विन्यास है।

<head>
   @import "URL";
</head>

यहाँ URL शैली पत्रक फ़ाइल का URL है जिसमें शैली नियम हैं। आप एक और वाक्यविन्यास का उपयोग कर सकते हैं -

<head>
   @import url("URL");
</head>

उदाहरण

निम्नलिखित उदाहरण आपको दिखा रहा है कि HTML दस्तावेज़ में स्टाइल शीट फ़ाइल कैसे आयात करें -

<head>
   @import "mystyle.css";
</head>

सीएसएस नियम ओवरराइडिंग

हमने HTML दस्तावेज़ में स्टाइल शीट नियमों को शामिल करने के चार तरीकों पर चर्चा की है। यहां किसी भी स्टाइल शीट नियम को ओवरराइड करने का नियम है।

कोई भी इनलाइन स्टाइल शीट सर्वोच्च प्राथमिकता लेती है। तो, यह किसी भी नियम को ओवरराइड करेगा <style> ... </ style> टैग या नियम किसी भी बाहरी स्टाइल शीट फ़ाइल में परिभाषित।
<Style> ... </ style> टैग में परिभाषित कोई भी नियम किसी भी बाहरी शैली शीट फ़ाइल में परिभाषित नियमों को ओवरराइड करेगा।
बाहरी शैली शीट फ़ाइल में परिभाषित कोई भी नियम सबसे कम प्राथमिकता लेता है, और इस फ़ाइल में परिभाषित नियम केवल तभी लागू होंगे जब दो से ऊपर के नियम लागू नहीं होते हैं।

पुराने ब्राउज़रों को संभालना

अभी भी कई पुराने ब्राउज़र हैं जो CSS का समर्थन नहीं करते हैं। इसलिए, हमें HTML दस्तावेज़ में अपने एंबेडेड सीएसएस को लिखते समय ध्यान रखना चाहिए। निम्नलिखित स्निपेट दिखाता है कि आप पुराने ब्राउज़र से CSS को छिपाने के लिए टिप्पणी टैग का उपयोग कैसे कर सकते हैं -

<style type = "text/css">
   <!--
      body, td {
         color: blue;
      }
   -->
</style>

सीएसएस टिप्पणियाँ

कई बार, आपको अपनी शैली पत्रक ब्लॉकों में अतिरिक्त टिप्पणियां डालने की आवश्यकता हो सकती है। इसलिए, स्टाइल शीट में किसी भी भाग पर टिप्पणी करना बहुत आसान है। आप अपनी टिप्पणियों को सरल रूप से /* के अंदर रख सकते हैं। यह स्टाइल शीट में एक टिप्पणी है ..... * /।

आप C / C ++ प्रोग्रामिंग भाषाओं में इसी तरह से मल्टी-लाइन ब्लॉक पर टिप्पणी करने के लिए / * .... * का उपयोग कर सकते हैं।

उदाहरण

<!DOCTYPE html>
<html>
   <head>
      <style>
         p {
            color: red;
            /* This is a single-line comment */
            text-align: center;
         }
         /* This is a multi-line comment */
      </style>
   </head>

   <body>
      <p>Hello World!</p>
   </body>
</html>

यह निम्नलिखित परिणाम का उत्पादन करेगा -