यदि आप कभी भी वेब से किसी होटल के लिए टिकट आरक्षण या दिशा-निर्देश मुद्रित करते हैं, तो आप शायद परिणामों से प्रभावित हैं। इसलिए, आप इस बात से अनजान हो सकते हैं कि मुद्रित दस्तावेज़ों को उसी तरह से स्टाइल किया जा सकता है, जिस पर वे कैस्केडिंग स्टाइल शीट्स (सीएसएस) का उपयोग कर ऑन-स्क्रीन कर सकते हैं।
चिंताओ का विभाजन
CSS का एक महत्वपूर्ण लाभ प्रस्तुति से सामग्री का पृथक्करण है। सबसे सरल शब्दों में, इसका मतलब बहुत पुराने जमाने की शैलीगत मार्कअप जैसे:
शीर्षक
हम शब्दार्थ मार्कअप का उपयोग करते हैं:
शीर्षक
न केवल यह बहुत क्लीनर है, इसका मतलब यह भी है कि हमारी प्रस्तुति हमारी सामग्री से अलग है। ब्राउज़र प्रस्तुत करते हैं एच 1 डिफ़ॉल्ट रूप से बड़े, बोल्ड टेक्स्ट के रूप में तत्व, लेकिन हम उस शैली को किसी भी समय एक स्टाइलशीट के साथ बदल सकते हैं:
h1 {फ़ॉन्ट-वजन: सामान्य; }
एक अलग फ़ाइल में उन शैली घोषणाओं को इकट्ठा करके, और हमारे HTML दस्तावेज़ से उस फ़ाइल को संदर्भित करके, हम अलगाव का और भी बेहतर उपयोग कर सकते हैं। शैली पत्रक का पुन: उपयोग किया जा सकता है, और हम उस दस्तावेज़ में प्रारूपण को अद्यतन करने के लिए किसी भी समय उस एकल फ़ाइल को बदल सकते हैं।
जिसमें एक प्रिंट स्टाइल शीट शामिल है
स्क्रीन स्टाइल शीट को शामिल करने के लिए इसी तरह से, हम प्रिंट के लिए एक स्टाइल शीट निर्दिष्ट कर सकते हैं। एक स्क्रीन स्टाइल शीट को आमतौर पर इस तरह शामिल किया जाता है:
हालाँकि, एक अतिरिक्त विशेषता, मीडिया, उस संदर्भ के आधार पर लक्ष्यीकरण की अनुमति देता है जिसमें दस्तावेज़ प्रदान किया गया है। डिफ़ॉल्ट रूप से, पिछला तत्व इसके बराबर है:
इसका मतलब है कि किसी भी माध्यम से दस्तावेज़ को प्रस्तुत करने के लिए स्टाइलशीट लागू की जाएगी। हालाँकि, मीडिया विशेषता प्रिंट और स्क्रीन के मान भी ले सकती है:
इस उदाहरण में, प्रिंट स्टाइलशीट का उपयोग केवल तब किया जाएगा जब दस्तावेज़ प्रिंट आउट हो। यह एक बहुत ही उपयोगी तंत्र है। हम सभी सामान्य स्टाइल (शायद फ़ॉन्ट परिवार या लाइन रिक्ति) को एक स्टाइलशीट में इकट्ठा कर सकते हैं जो सभी मीडिया पर लागू होता है, और व्यक्तिगत स्टाइलशीट में मीडिया-विशिष्ट स्वरूपण। फिर, यह चिंताओं के अलगाव का एक और उपयोग है।
कुछ उदाहरण शैली घोषणाएँ
एक साफ पृष्ठभूमि
आप निश्चित रूप से स्याही को रंगीन पृष्ठभूमि या पृष्ठभूमि छवि को प्रिंट नहीं करना चाहते हैं। इन मानों के लिए किसी भी चूक को रीसेट करने से शुरू करें जो आपके दस्तावेज़ में निर्धारित किए गए हों:
तन {
पृष्ठभूमि: सफेद;
रंग काला;
}
आप किसी भी पृष्ठभूमि चित्र को प्रिंट होने से रोकना चाहते हैं - ये सजावटी होने चाहिए और इसलिए, आपकी सामग्री का आवश्यक हिस्सा नहीं है:
* {
पृष्ठभूमि-छवि: कोई नहीं महत्वपूर्ण;
}
सम्बंधित: CSS में Background Image कैसे सेट करें
CSS webpages स्टाइल करने के लिए एक शक्तिशाली उपकरण है। बैकग्राउंड इमेज लगाना सीखना आप को बहुत सीएसएस बेसिक्स सिखाता है।
हाशिये पर नियंत्रण
प्रिंट के बारे में विचार करने के लिए एक और स्पष्ट बिंदु पृष्ठ मार्जिन है। जबकि सीएसएस मार्जिन साइज सेट करने का एक साधन प्रदान करता है, आपको यह ध्यान रखना चाहिए कि आपका ब्राउज़र और प्रिंटर मार्जिन सेटिंग्स को भी प्रभावित कर सकते हैं।
उदाहरण के लिए, Chrome के प्रिंट संवाद में, एक मार्जिन सेटिंग है जिसमें मान शामिल हैं कोई नहीं तथा रिवाज जो सीएसएस के माध्यम से निर्दिष्ट कुछ को ओवरराइड करेगा:
इस कारण से, यह सार्वजनिक वेबपृष्ठों पर पाठक के लिए मार्जिन निर्णय छोड़ने की सिफारिश की जाती है। हालांकि, व्यक्तिगत उपयोग के लिए, या डिफ़ॉल्ट लेआउट बनाने के लिए, सीएसएस के माध्यम से प्रिंट मार्जिन सेट करना उचित हो सकता है। @पृष्ठ नियम मार्जिन को सेट करने की अनुमति देता है, और निम्नानुसार उपयोग किया जाना चाहिए:
@पृष्ठ {
मार्जिन: 2 सेमी;
}
CSS में अधिक परिष्कृत प्रिंट लेआउट की क्षमता भी होती है, जैसे कि पृष्ठ विषम संख्या वाला (दाएं), सम-क्रमांकित (बाएं), या आवरण पृष्ठ के अनुसार मार्जिन भिन्न होता है।
दुर्भाग्य से, यह खराब रूप से समर्थित है - विशेष रूप से कवर पेज विकल्प- लेकिन इसका उपयोग न्यूनतम सीमा तक किया जा सकता है। निम्नलिखित शैलियों में शीर्ष से थोड़ा बड़े मार्जिन के साथ पृष्ठ और रीढ़ की तुलना में बाहरी पृष्ठ किनारे पर थोड़ा बड़ा मार्जिन होता है:
@पृष्ठ {
मार्जिन-वाम: 20 मिमी;
मार्जिन-राइट: 20 मिमी;
मार्जिन-टॉप: 40 मिमी;
मार्जिन-तल: 50 मिमी;
}
@ पृष्ठ: बाएं {
मार्जिन-वाम: 30 मिमी;
}
@ पेज: सही {
मार्जिन-राइट: 30 मिमी;
}
छिपाना अप्रासंगिक सामग्री
सभी सामग्री आपके दस्तावेज़ के प्रिंट संस्करण के लिए उपयुक्त नहीं होंगी। यदि आपके पृष्ठ में बैनर नेविगेशन, विज्ञापन, या साइडबार शामिल हैं, तो आप उन विवरणों को प्रिंट संस्करण में प्रदर्शित होने से रोकना चाहते हैं, उदाहरण के लिए:
# कॉन्टेंट्स, div.ad {प्रदर्शन: कोई नहीं; }
हाइपरलिंक स्पष्ट रूप से मुद्रित सामग्री में प्रासंगिक नहीं हैं, इसलिए आप शायद किसी भी शैली को हटाना चाहते हैं जो उन्हें आसपास के पाठ से अलग करती है:
{पाठ-सजावट: कोई नहीं; रंग: विरासत; }
हालाँकि, आप अभी भी पाठकों को मूल URL तक पहुँच प्राप्त करना चाहते हैं, और एक सीधा समाधान लिंक किए गए पृष्ठ के बाद स्वचालित रूप से उन्हें सम्मिलित करना है
[a href]: {के बाद
सामग्री: "(" attr (href) ")";
फ़ॉन्ट-आकार: 90%;
रंग: # 333;
}
यह सीएसएस निम्नलिखित जैसे परिणाम देता है:
[a href]: के बाद विशेष रूप से स्थिति के बाद लक्ष्य (:उपरांत) प्रत्येक लिंक तत्व (ए) जो वास्तव में एक URL है ([href]). सामग्री यहाँ घोषणा के मूल्य को सम्मिलित करता है href कोष्ठक के बीच विशेषता। ध्यान दें कि उत्पन्न सामग्री के प्रदर्शन को नियंत्रित करने के लिए अन्य शैली के नियम लागू किए जा सकते हैं।
पेज ब्रेक्स को संभालना
पेज की सामग्री को अलग-थलग छोड़ने, या बीच में अजीब तरह से तोड़ने से बचने के लिए, पेज-ब्रेक गुणों का उपयोग करें: पेज-अलग होने से पहले, पृष्ठ-विराम-पश्चात तथा पेज-अलग होने के अंदर. उदाहरण के लिए:
तालिका {पृष्ठ-विराम-अंदर: से बचें; }
यह कई पृष्ठों को फैलाने से तालिकाओं को बनाए रखने में मदद करना चाहिए, बशर्ते कोई भी एक पृष्ठ से अधिक लंबा न हो। इसी प्रकार:
h1, h2 {पृष्ठ-विराम से पहले: हमेशा; }
इसका मतलब है कि इस तरह के शीर्षक हमेशा एक नया पृष्ठ शुरू करते हैं। यदि आप तुरंत अपने पृष्ठ के h1 को h2 के साथ अनुसरण करते हैं तो यह समस्याएँ पैदा कर सकता है, हालाँकि, चूंकि h1 अपने आप ही एक पृष्ठ पर समाप्त हो जाएगा। इससे बचने के लिए, उदाहरण के लिए, उस विशिष्ट उदाहरण को लक्षित करने वाले चयनकर्ता का उपयोग करके पृष्ठ विराम को रद्द करें:
h1 + h2 {पृष्ठ-विराम से पहले: से बचें; }
प्रिंट शैलियाँ देखना
सभी मामलों में, आपके ब्राउज़र और ऑपरेटिंग सिस्टम को एक प्रिंट पूर्वावलोकन सुविधा प्रदान करनी चाहिए, अक्सर मानक प्रिंट संवाद के हिस्से के रूप में।
Chrome ब्राउज़र, डेवलपर टूल के माध्यम से आपकी प्रिंट शैलियों को जांचना और यहां तक कि डिबग करना आसान बनाता है, जैसा कि इस उदाहरण द्वारा प्रदर्शित किया गया है जो प्रिंट लाइट शीट के साथ CV दिखा रहा है। सबसे पहले, मुख्य मेनू खोलें और चुनें अधिक उपकरण इसके बाद द डेवलपर उपकरण विकल्प:
दिखाई देने वाले नए पैनल से, चयन करें मेन्यू, तब फिर अधिक उपकरण, के बाद प्रतिपादन:
फिर नीचे स्क्रॉल करें CSS मीडिया प्रकार का अनुकरण करें स्थापना। ड्रॉपडाउन आपको अपने दस्तावेज़ के प्रिंट और स्क्रीन दृश्यों के बीच टॉगल करने की अनुमति देता है:
प्रिंट स्टाइलशीट का अनुकरण करते समय, मानक शैलियाँ ब्राउज़र लाइव शैली के नियमों का निरीक्षण करने और उन्हें संशोधित करने के लिए उपलब्ध है। ध्यान रखें कि स्क्रीन पर प्रिंट आउटपुट का अनुकरण करना अभी भी 100% सटीक नहीं है। ब्राउज़र को कागज के आकार, और के बारे में कुछ भी नहीं पता है @पृष्ठ नियम का अनुकरण नहीं किया जा सकता।
एक पीडीएफ के लिए मुद्रण
आधुनिक ऑपरेटिंग सिस्टम की एक आसान विशेषता एक पीडीएफ फाइल को प्रिंट करने की क्षमता है। वास्तव में, आप जो कुछ भी प्रिंट कर सकते हैं, उसके बजाय, एक पीडीएफ फाइल को भेजा जा सकता है - कोई वास्तविक आश्चर्य नहीं क्योंकि पीडीएफ फाइल को एक मुद्रित दस्तावेज़ का प्रतिनिधित्व करना चाहिए, आखिरकार।
यह HTML को एक प्रिंट स्टाइलशीट के साथ संयोजन में बनाता है, एक उच्च-गुणवत्ता वाला दस्तावेज़ बनाने के लिए एक उत्कृष्ट साधन है जिसे अनुलग्नक के रूप में भेजा जा सकता है, साथ ही मुद्रित भी किया जा सकता है।
दस्तावेजों की एक किस्म प्रिंट करें
आप गुणवत्ता दस्तावेजों को बनाने के लिए एक प्रिंट स्टाइलशीट का उपयोग कर सकते हैं, जिसमें आपके सीवी से लेकर व्यंजनों या घटनाओं की घोषणा तक कुछ भी शामिल है। वेब पेज आमतौर पर बदसूरत दिखते हैं और मुद्रित होने पर अवांछित विवरण होते हैं, लेकिन बहुत कम संख्या में शैली में नाटकीय रूप से प्रिंट परिणामों में सुधार हो सकता है। पीडीएफ के रूप में अंतिम परिणामों को सहेजना आकर्षक, पेशेवर दस्तावेज़ बनाने का एक त्वरित तरीका है।
क्या आप कभी एक दिलचस्प लेख भर में आए हैं जिसे आप बाद में सहेजना चाहते थे? खैर, आप तीन आसान चरणों में एज के साथ पीडीएफ के रूप में बचा सकते हैं।
- प्रोग्रामिंग
- मुद्रण
- सीएसएस
बॉबी एक प्रौद्योगिकी उत्साही है जिसने अधिकांश दो दशकों के लिए सॉफ्टवेयर डेवलपर के रूप में काम किया है। वह गेमिंग के बारे में भावुक है, स्विच प्लेयर मैगज़ीन में समीक्षा संपादक के रूप में काम कर रहा है, और ऑनलाइन प्रकाशन और वेब विकास के सभी पहलुओं में डूबा हुआ है।
हमारे न्यूज़लेटर की सदस्यता लें
टेक टिप्स, समीक्षा, मुफ्त ईबुक और विशेष सौदों के लिए हमारे न्यूज़लेटर में शामिल हों!
एक और कदम…!
कृपया हमें आपके द्वारा भेजे गए ईमेल में अपने ईमेल पते की पुष्टि करें।
