इस Tutorial में हम आपको CSS @ Rules Property in Hindi के बारे में पूरी जानकारी देंगे. Responsive Web Designing के लिए CSS @ Rules को पढना और समझना बहुत जरूरी हैं. इसलिए हमने @ Rules पर अलग से यह Tutorial तैयार किया हैं. अध्ययन की सुविधा के लिए हमने इस Tutorial को निम्न भागों में बांटा हैं.
CSS में Element को Stylish बनाने के लिए Style Rules Declare करने पडते हैं. कुछ CSS Rules साधरण कार्यों के लिए Declare किये जाते हैं और कुछ CSS Rules किसी कर्य विशेष के लिए Declare किये जाते हैं.
दूसरी सूची में CSS @ Rules को गिना जाता हैं. @ Rule एक Statement होता हैं जो CSS Behave करने के लिए निर्देश देता हैं. यह निर्देश बहुत सारी Conditions पर निर्भर करते हैं.
CSS @ Rule अंग्रेजी वर्णमाला में उपलब्ध @ At के चिन्ह से शुरु होता हैं. उसके बाद Identifier और अंत में Rule लिखा होता हैं. नीचे CSS @ Rules का General Syntax दिया जा रहा हैं.
@ Rules Property General Syntax
@Identifier Rules;
आप ऊपर देख सकते हैं कि @ Rule में मुख्यत: तीन भाग होते हैं.
@ चिन्ह – CSS @ Rule की शुरुआत @ के चिन्ह से होती हैं. शायद इसलिए ही इन Rules का नाम @ Rules है.
Identifier – यह एक Keyword होता हैं जो @ Rule को Define करता हैं. इसि से @ Rule को पहचाना जाता हैं. Identifier को @ के चिन्ह के पूछे बिना Space दिए लिखा जाता हैं.
Rule – यह @ Rule का Rule होता हैं जिसे CSS पर Apply किया जाता हैं. यह Rule @ Rule के हिसाब से अलग-अलग प्रकार से लिखा जाता है.
CSS @ Rules Case Sensitive होते हैं.
Different Type of @ Rules Properties
@charset
@import
@media
@font-face
@namespace
@page
@supports
@documents
@viewport
@keyframes
@counter-style
font-feature-values
कुछ महत्वपूर्ण @ Rules Properties
वैसे तो सभी @ Rules का अपना-अपना महत्व हैं. लेकिन फिर भी कुछ @ Rules को अन्य के मुकाबले ज्यादा इस्तेमाल किया जाता हैं. इसलिए हम उन्ही महत्वपूर्ण @ Rules के बारे में नीचे बता रहे हैं.
@charset Rule
इस @ Rule द्वारा Style Sheet में Character Encoding को Declare किया जाता हैं. @charset Rule किसी भी Style Sheet का पहला CSS Rule होता हैं. एक Style Sheet में केवल एक ही @charset Rule Declare किया जा सकता हैं यदि किसी style Sheet में एक से ज्यादा @charset Rule Declare किए गए है तो पहला Rule Apply होता हैं.
@charset Rule को इस प्रकार Declare किया जाता हैं.
@charset “charset rule”;
@font-face Rule
@font-face Rule का इस्तेमाल Blog में Downloadable Fonts को Use करने के लिए किया जाता हैं आमतौर पर जो Fonts Users के Device में Install होते हैं उन्ही Fonts में Content दिखाई देता हैं मगर @font-face Rule की सहायता से हम अपनी पसंद का फॉन्ट इस्तेमाल कर सकते हैं और इसी फॉन्ट में सभी Users को Content दिखा सकते हैं. इस प्रकिर्या में Users के डिवाईस में फॉन्ट नही होने पर भी हमारे द्वारा Declare Font में ही Content दिखाई देता हैं ऐसा @font-face Rule की वजह से होता हैं. इस Rule को Declare करने पर फॉन्ट Users के डिवाईस में अपने आप इंस्टॉल हो जाते हैं. @font-face Rule को इस प्रकार लिखा जाता हैं.
@font-face {font-properties};
@font-face Rule के Syntax साधारण CSS Rule की तरह ही Declare किया जाता हैं. जिसमे पहला शब्द @font-face तो किसी CSS Selector की तरह कार्य करता है और दूसरा शब्द font-properties बहुत ही महत्वपूर्ण हैं.
font-properties शब्द 20 से भी ज्यादा Font की अलग-अलग Properties को Represent करता हैं. जिसमें से font-family और src को Declare करना अनिवार्य होता हैं. बाकि Properties Optional होती हैं. Font की सभी Properties के बारे में CSS Text Property Tutorial और CSS Font Tutorial को पढकर ले सकते हैं.
@import Rule
@import Rule का इस्तेमाल एक Style Sheet में किसी दूसरी Style Sheet से Rules को Import यानि Download करने के लिए किया जाता हैं. इस प्रकार आप एक ही Style Sheet में कई Style Sheets Rules को Import कर सकते हैं.
@import Rule को इस प्रकार Declare किया जाता हैं.
@import url (media queries);
इस Syntax में तीन भाग होते हैं.
@import – यह तो CSS @ Rule ही होता हैं.
url – यहाँ उस Style Sheet का File Path लिखा जाता हैं, जिस Style Sheet को Import करना हैं.
media-queries – यहाँ Media Type और Media Conditions को लिखा जाता हैं. जैसे इस Style Sheet को Print Media के लिए Import किया जा रहा हैं तो यहाँ “print” लिखा जाएगा.
@media Rule
इस Rule का इस्तेमाल Style Rules को अलग-अलग Devices और Media Type के लिए Declare करने के लिए किया जाता हैं. मतलब हम Print, Screen के लिए अलग Style Rules Declare कर सकते हैं. और Desktop, Mobile, Tablets के लिए अलग Style Rule Declare कर सकते हैं.
@media एक बडा टॉपिक हैं इसलिए इसे यहाँ Cover नही किया जा सकता हैं. इसलिए इसके लिए हमने अलग से Tutorial बनाया हैं.
इस Tutorial में हमने आपको CSS @ Rules Property की पूरी जानकारी दी हैं. आपने विभिन्न प्रकार की @ Rules Properties के बारे में भी जाना हैं. इसके अलावा आपने कुछ महत्वपूर्ण @ Rules Properties को भी जाना है. हमे उम्मीद हैं कि यह Tutorial आपके लिए उपयोगी साबित होगा.
