सीएसएस - @ नियम

इस अध्याय में निम्नलिखित महत्वपूर्ण @ नियम शामिल होंगे -

@import: नियम वर्तमान शैली शीट में एक और स्टाइल शीट आयात करता है।
@charset नियम इंगित करता है कि चरित्र सेट शैली शीट का उपयोग करता है।
@font-face नियम का उपयोग किसी दस्तावेज़ में उपयोग के लिए एक फ़ॉन्ट चेहरे का वर्णन करने के लिए किया जाता है।
!important नियम इंगित करता है कि उपयोगकर्ता द्वारा परिभाषित नियम को लेखक की शैली शीट पर वरीयता लेनी चाहिए।

NOTE - अन्य @ नियम हैं जिन्हें हम बाद के अध्यायों में शामिल करेंगे।

@ शासन नियम

@पोर्ट नियम आपको दूसरी शैली की शीट से शैलियों को आयात करने की अनुमति देता है। यह किसी भी नियम से पहले स्टाइल शीट की शुरुआत में दिखाई देना चाहिए, और इसका मूल्य एक URL है।

इसे दो में से किसी एक तरीके से लिखा जा सकता है -

<style type = "text/css">
   <!--
      @import "mystyle.css";
      or
      @import url("mystyle.css");
      .......other CSS rules .....
   -->
</style>

@पोर्ट नियम का महत्व यह है कि यह आपको अपनी शैली की चादरें एक मॉड्यूलर दृष्टिकोण के साथ विकसित करने की अनुमति देता है। आप विभिन्न स्टाइल शीट बना सकते हैं और फिर उन्हें जहाँ भी ज़रूरत हो, उन्हें शामिल कर सकते हैं।

The @charset नियम

यदि आप ASCII या ISO-8859-1 के अलावा किसी अन्य चरित्र सेट का उपयोग करके अपना दस्तावेज़ लिख रहे हैं, तो आप अपनी शैली शीट के शीर्ष पर @charset नियम सेट करना चाह सकते हैं ताकि यह इंगित किया जा सके कि शैली पत्रक किस वर्ण में लिखा गया है।

@ शीटसेट नियम को शैली पत्रक की शुरुआत में सही लिखा जाना चाहिए, भले ही इसके पहले कोई स्थान न हो। मान उद्धरणों में आयोजित किया जाता है और मानक चरित्र-सेटों में से एक होना चाहिए। उदाहरण के लिए -

<style type = "text/css">
   <!--
      @charset "iso-8859-1"
      .......other CSS rules .....
   -->
</style>

@ फंट-फेस रूल

@ फॉन्ट-फेस नियम का उपयोग किसी डॉक्यूमेंट में उपयोग के लिए फॉण्ट फेस का वर्णन करने के लिए किया जाता है। @ फ़ॉन्ट-फेस का उपयोग डाउनलोड के लिए फ़ॉन्ट के स्थान को परिभाषित करने के लिए भी किया जा सकता है, हालांकि यह कार्यान्वयन-विशिष्ट सीमाओं में चल सकता है।

सामान्य तौर पर, @ फॉन्ट-फेस बेहद जटिल होता है, और इसका उपयोग उन लोगों के लिए अनुशंसित नहीं किया जाता है, जो फॉन्ट मेट्रिक्स के विशेषज्ञ हैं।

यहाँ एक उदाहरण है -

<style type = "text/css">
   <!--
      @font-face {
         font-family: "Scarborough Light";
         src: url("http://www.font.site/s/scarbo-lt");
      }
      @font-face {
         font-family: Santiago;
         src: local ("Santiago"),
         url("http://www.font.site/s/santiago.tt")
         format("truetype");
         unicode-range: U+??,U+100-220;
         font-size: all;
         font-family: sans-serif;
      }
   -->
</style>

महत्वपूर्ण नियम

कैस्केडिंग स्टाइल शीट्स कैस्केड। इसका मतलब है कि शैलियों को उसी क्रम में लागू किया जाता है जैसे वे ब्राउज़र द्वारा पढ़े जाते हैं। पहली शैली लागू होती है और फिर दूसरी और इसी तरह।

महत्वपूर्ण नियम आपके सीएसएस कैस्केड बनाने का एक तरीका प्रदान करता है। इसमें हमेशा लागू होने वाले नियम भी शामिल होते हैं। एक महत्वपूर्ण संपत्ति वाले नियम को हमेशा लागू किया जाएगा, कोई फर्क नहीं पड़ता कि वह नियम सीएसएस दस्तावेज़ में कहां दिखाई देता है।

उदाहरण के लिए, निम्नलिखित शैली पत्रक में, पैराग्राफ पाठ काला होगा, भले ही पहले शैली की संपत्ति लाल हो:

<style type = "text/css">
   <!--
      p { color: #ff0000; }
      p { color: #000000; }
   -->
</style>

इसलिए, यदि आप यह सुनिश्चित करना चाहते हैं कि एक संपत्ति हमेशा लागू होती है, तो आप टैग में महत्वपूर्ण संपत्ति जोड़ देंगे। तो, पैरा टेक्स्ट को हमेशा लाल बनाने के लिए, आपको इसे इस प्रकार लिखना चाहिए -

<html>
   <head>
      <style type = "text/css">
         p { color: #ff0000 !important; }
         p { color: #000000; }
      </style>
   </head>

   <body>
      <p>Tutorialspoint.com</p>
   </body>
</html>

यहाँ आपने p {color: # ff0000! } अनिवार्य, अब यह नियम हमेशा लागू होगा यहां तक कि आपने एक और नियम p को परिभाषित किया है {color: # 000000; }

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