CSS में '@' चिन्ह का उद्देश्य क्या है?

148

मैं सिर्फ इस सवाल पर अड़ा रहा और मैंने देखा कि उपयोगकर्ता ने कुछ नोटेशन का उपयोग किया है जो मैंने पहले कभी नहीं देखा है:

@font-face {
   /* CSS HERE */
}

तो क्या यह @प्रतीक CSS3 में कुछ नया है, या कुछ पुराना है जिसकी मैंने किसी तरह अनदेखी की है? क्या यह कुछ ऐसा है जहां आप एक आईडी का उपयोग करते हैं #, और एक वर्ग जिसका आप उपयोग करते हैं .? Google ने मुझे इससे संबंधित कोई अच्छा लेख नहीं दिया। @CSS में प्रतीक का उद्देश्य क्या है ?

css syntax symbols

— ह्रिस्टो
स्रोत

177

@@importCSS1 के दिनों के बाद से चारों ओर है, हालांकि यह हाल के दिनों @media(CSS2, CSS3) और @font-face(CSS3) के निर्माण में तेजी से सामान्य हो रहा है । @वाक्य रचना ही है, हालांकि, के रूप में मैं उल्लेख किया है, नहीं नया है।

इन सभी को CSS में नियमों के रूप में जाना जाता है । वे ब्राउज़र के लिए विशेष निर्देश हैं, नियमों और गुणों का उपयोग करते हुए वेब दस्तावेज़ों में (एक्स) HTML / XML तत्वों की स्टाइलिंग से सीधे संबंधित नहीं हैं, हालांकि वे इस बात को नियंत्रित करने में महत्वपूर्ण भूमिका निभाते हैं कि शैलियों को कैसे लागू किया जाता है।

कुछ कोड उदाहरण:

/* Import another stylesheet from within a stylesheet */
@import url(style2.css);

/* Apply this style only for printing */
@media print {
    body {
        color: #000;
        background: #fff;
    }
}

/* Embed a custom web font */
@font-face {
    font-family: 'DejaVu Sans';
    src: local('DejaVu Sans Regular'), url(/fonts/DejaVuSans.ttf);
}

@font-faceनियम आपके डिज़ाइन में उपयोग के लिए कस्टम फोंट को परिभाषित करते हैं जो हमेशा सभी कंप्यूटरों पर उपलब्ध नहीं होते हैं, इसलिए एक ब्राउज़र सर्वर से एक फ़ॉन्ट डाउनलोड करता है और उस कस्टम फ़ॉन्ट में पाठ सेट करता है जैसे कि उपयोगकर्ता के कंप्यूटर में फ़ॉन्ट था।
@mediaनियम , मीडिया क्वेश्चन (पूर्व में केवल मीडिया प्रकार ) के संयोजन में , यह नियंत्रित किया जाता है कि कौन-सी शैलियाँ लागू की गई हैं और यह इस बात पर आधारित नहीं है कि पृष्ठ किस मीडिया में प्रदर्शित किया जा रहा है। मेरे कोड उदाहरण में, केवल दस्तावेज़ को प्रिंट करते समय सभी पाठ सेट होने चाहिए एक सफेद (कागज) पृष्ठभूमि के खिलाफ काले रंग में। आप प्रिंट मीडिया, मोबाइल उपकरणों और इतने पर और उन लोगों के लिए शैली पृष्ठों को अलग करने के लिए मीडिया क्वेरी का उपयोग कर सकते हैं।

At-rules का चयनकर्ताओं से कोई संबंध नहीं है। उनके अलग-अलग स्वभाव के कारण, कई अलग-अलग मॉड्यूलों में अलग-अलग तरीके से अलग-अलग नियम निर्धारित किए जाते हैं। अधिक उदाहरणों में शामिल हैं:

(यह सूची संपूर्ण है)

आप MDN पर एक और गैर-विस्तृत सूची पा सकते हैं ।

— बोल्टकॉक
स्रोत

2

@मीडिया प्रिंट {/ * क्या आप वीडियो या ऑडियो फाइल प्रिंट करने की कोशिश कर रहे हैं ?? * /}

— kurdtpage

26

@ एक नियम को परिभाषित करने के लिए उपयोग किया जाता है।

@import
@page
@media
@ फॉन्ट-फेस
@charset
@namespace

उपरोक्त को at-rules कहा जाता है ।

— फ्रेंकी
स्रोत

2

"एक नियम को परिभाषित करें" से आपका क्या मतलब है?

— हिस्टो

1

सीएसएस नियमों में सीएसएस नियमों का एक गुच्छा संलग्न करता है और उन्हें कुछ विशिष्ट पर लागू करता है। ( htmldog.com/guides/cssadvanced/atrules )

— फ्रेंकी

7

@Media का एक उदाहरण जो इसे और स्पष्ट करने के लिए उपयोगी हो सकता है:

@media screen and (max-width: 1440px)
{
    span.sizedImage
    {
        height:135px;
        width: 174px;
    }
}    

@media screen and (min-width: 1441px)
{
    span.sizedImage
    {
        height:150px;
        width: 200px;
    }
}

यह स्क्रीन के आकार पर सशर्त रूप से स्क्रीन के आकार में भिन्न होगा, एक छोटी स्क्रीन पर एक छोटी छवि का उपयोग करके। पहला ब्लॉक स्क्रीन को 1440px चौड़ाई तक संबोधित करेगा; दूसरा स्क्रीन 1440px से बड़ा होगा।

यह टैब जैसी चीजों के साथ काम करता है जो फ्लोट ड्रॉप या छोटी स्क्रीन पर स्क्रॉल करती हैं; आप अक्सर छोटे स्क्रीन पर एक बिंदु आकार के टैब टैब के फ़ॉन्ट आकार को छोड़ सकते हैं और उन सभी को फिट कर सकते हैं।

— BobRodes
स्रोत

1

@ का उपयोग नियम विनिर्देश के रूप में किया जाता है। पसंद@font-face

— r3st0r3
स्रोत

1

ProBoards CSS शैली भी चर के रूप में इनका उपयोग करती है।

यहां उनके CSS पृष्ठों में से एक छोटा सा स्निपेट दिया गया है:

@wrapper_width: 980px;
@link_color: #c06806;
@link_font: 100% @default_forum_text_font_family;
@link_decoration: none;

#wrapper { width: @wrapper_width; margin: 0 auto; overflow-x: hidden; }
table { table-layout: fixed; }
a { cursor: pointer; color: @link_color; font: @link_font; text-decoration: @link_decoration; }

नोट: देशी नहीं, पहली टिप्पणी देखें।

— Tcll
स्रोत