दिलचस्प पोस्ट
जावास्क्रिप्ट का उपयोग करते हुए * .CSV फ़ाइल से डेटा कैसे पढ़ा जाए? जावा में दिए गए वाक को उल्टा करें जब `PostAuthenticateRequest` निष्पादित हो जाता है? एक सरणी में व्युत्क्रम की गिनती सबसे आम एसक्यूएल विरोधी पैटर्न क्या हैं? MYSQL – ORDER BY & LIMIT जावास्क्रिप्ट का उपयोग करते हुए भारतीय स्वरूप में एक नंबर प्रदर्शित करना क्या जवाक को "अनचेक या असुरक्षित संचालन का उपयोग" चेतावनी जारी करने का कारण बनता है क्या कई पीडीएफ स्वचालित रूप से उत्पादन कर सकते हैं? क्या यह मोनोचौच जीसी में एक बग है? CMake के माध्यम से क्यूटी प्रोजेक्ट कार्यान्वित करना XPath परीक्षण अगर नोड मान संख्या है कैसे एक ऑटो वृद्धि संस्करण संख्या (दृश्य स्टूडियो) है? Google Maps v3 में दो बिंदुओं के बीच एक मार्ग ड्राइंग असंगत व्यवहार ग्रिडविव asp.net के साथ सॉर्टिंग और पेजिंग

CSS में '@' प्रतीक का उद्देश्य क्या है?

मैं बस इस प्रश्न के पार ठोकर खाई और मैंने देखा कि उपयोगकर्ता कुछ ऐसे संकेतों का उपयोग कर रहा है जो मैंने कभी नहीं देखा है:

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

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

वेब के समाधान से एकत्रित समाधान "CSS में '@' प्रतीक का उद्देश्य क्या है?"

@ 1 के सीएसएस 1 के दिनों के बाद से है, हालांकि यह तर्क है हाल ही में @media (सीएसएस 2, सीएसएस) और @font-face (सीएसएस) के निर्माण में तेजी से सामान्य हो रहा है। @ वाक्यविन्यास, हालांकि, जैसा कि मैंने उल्लेख किया है, वह नया नहीं है

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

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

 /* 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 मीडिया नियम , मीडिया प्रश्नों (पूर्व में केवल मीडिया प्रकार ) के साथ संयोजन में, कौन सी शैलियों को लागू किया जाता है और कौन से मीडिया को पृष्ठ पर प्रदर्शित किया जा रहा है, इस पर आधारित नहीं है। मेरे कोड उदाहरण में, केवल एक दस्तावेज़ को छपाते समय सभी पाठ चाहिए एक सफेद (कागज) पृष्ठभूमि के खिलाफ काले रंग में सेट करें आप प्रिंट मीडिया, मोबाइल डिवाइसेस आदि के लिए और इसके लिए स्टाइल पेज को अलग-अलग फ़िल्टर करने के लिए मीडिया क्वेशर्स का उपयोग कर सकते हैं।

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

  • सशर्त नियम
  • कीफ़्रेम एनीमेशन
  • पृष्ठांकित मीडिया

(यह सूची संपूर्ण से बहुत दूर है)

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

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

@आयात
@पृष्ठ
@media
@फॉन्ट फ़ेस
@ अक्षरसेट
@namespace

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

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

 @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 तक स्क्रीन को संबोधित करेगा; दूसरा 1440 पीएक्स से बड़े स्क्रीन को संबोधित करेगा

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

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

प्रोबॉर्ड्स सीएसएस स्टाइल इन्हें वैरिएबल के रूप में भी उपयोग करता है

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

 @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; } 

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