पृष्ठ का CSS मुद्रित संस्करण। मैं प्रिंट शैलियों के बारे में पूरी तरह से भूल गया।

आज आपको डिज़ाइन युक्तियों की एक श्रृंखला से एक नोट मिलेगा। और डिज़ाइन ग्राफिक और इंटरफ़ेस डिज़ाइन नहीं है। मुझे लगता है कि आप में से कई लोग कम से कम एक बार सीधे ब्राउज़र से साइट का पेज प्रिंट कर लेते हैं। अनुक्रम आमतौर पर यह है: Ctrl + P दबाएं, एक मिनट प्रतीक्षा करें, फिर प्रिंटर में पेपर डालने का अनुमान लगाएं, Ctrl + P फिर से दबाएं, आश्चर्य करें कि इतने सारे बैनर, काउंटर और मुख्य मेनू को प्रिंट करना क्यों संभव था। मुझे जो कुछ चाहिए था, वह था एक नक्शा और संपर्क।

कुछ डिज़ाइनर इस समस्या को निम्न तरीके से हल करते हैं: प्रत्येक पृष्ठ के लिए, मुद्रण के लिए एक अलग संस्करण बनाया जाता है। सबसे अधिक बार, यह एक दस्तावेज है जिसमें बैनर, मेनू और बाकी अतिरिक्त पृष्ठ तत्व सम्मिलित नहीं हैं।

एक अलग संस्करण क्यों बनाते हैं

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

इसके अलावा, उपयोगकर्ताओं के स्क्रीन के अलग-अलग रिज़ॉल्यूशन हमें यह जानने की अनुमति नहीं देंगे कि यह या उस तत्व को कैसे प्रिंट किया जाएगा। इसलिए, मैं सभी अनावश्यक हटाने की सलाह दूंगा और सुनिश्चित करूंगा कि सभी प्रिंटआउट समान होंगे।

कैसे निर्दिष्ट करें कि क्या प्रिंट करें?

आमतौर पर, कक्षाओं और ऑब्जेक्ट पहचानकर्ताओं के लिए धन्यवाद, हम पृष्ठ के लगभग किसी भी तत्व को छिपा सकते हैं। बहुत अधिक छिपाने के लिए नहीं, मैं हेडर को नेविगेशन, साइट लोगो, साइडबार (यदि वहाँ एक है) और पाद लेख (पृष्ठ के नीचे) के साथ छिपाने की सलाह देगा।

इस प्रकार, प्रेस सामग्री क्षेत्र में जो है उसे छोड़ देगा। उन सभी तत्वों के लिए, जिन्हें आप प्रिंट करते समय छिपाना चाहते हैं, अपनी खुद की कक्षा असाइन करें, उदाहरण के लिए "नो-प्रिंट"।

हम यह भी संकेत कर सकते हैं कि बैनर के साथ फ़ोल्डर में छवियों को प्रिंट करने के लिए नहीं भेजा जाना चाहिए। यह एक मुखौटा का उपयोग करके किया जाता है। इसके लिए आपको CSS में निर्दिष्ट करने की आवश्यकता है:

img (प्रदर्शन: कोई नहीं महत्वपूर्ण;)

इस कोड के साथ हम उन सभी बैनरों को छिपा देंगे जो पेज पर कहीं भी दिखाई देंगे। उसी तरह अन्य तत्वों को अदृश्य बनाना आवश्यक है।

नो-प्रिंट (प्रदर्शन: कोई नहीं! महत्वपूर्ण;)

व्यावहारिक अनुप्रयोग

फ़ाइल बनाने के लिए print.css इसे प्रिंट करने के लिए भेजने के दौरान ही संसाधित किया गया था, आपको इसे निर्दिष्ट करने की आवश्यकता है इस तरह से:

इस पेज को प्रिंट करें

कई साल पहले मैं इस तरह के एक समारोह के अस्तित्व के बारे में जानने के लिए सुखद आश्चर्यचकित था। यह सुविधाजनक और काफी सरल है, इसलिए मैं आपको इसका उपयोग करने की सलाह देता हूं।

आइए देखें कि "प्रिंट पेज" बटन कैसे बनाया जाए, साथ ही साथ वेबसाइट पर "प्रिंट संस्करण" कैसे बनाया / संपादित किया जाए, जिसमें वर्डप्रेस प्लगइन्स का उपयोग करना शामिल है।

नीचे दिए गए लेख के लिए स्रोत डाउनलोड करें

"पेज प्रिंट करें" बटन कैसे बनाएं:

आप निम्नलिखित कोड का उपयोग कर सकते हैं:

प्रिंट आउट लें

वर्डप्रेस वेबसाइटों के लिए - इस बटन को बनाने के लिए - आपको "रिकॉर्ड / पृष्ठ संपादक" पर जाने की आवश्यकता है - "टेक्स्ट" टैब खोलें और उपरोक्त कोड को सही स्थान पर पेस्ट करें।

और शैली फ़ाइल में - style.css, इस लिंक के लिए निम्नलिखित शैलियों को पंजीकृत करें:

नतीजतन, आपको इतना अच्छा बटन मिलता है:

साइट के लिए "प्रिंट संस्करण" कैसे बनाएं / संपादित करें:

वर्डप्रेस "प्रिंट संस्करण" के लिए अधिकांश थीम "@मीडिया प्रिंट" नियम का उपयोग करके बनाई गई हैं।

"साइट के प्रिंट संस्करण" को संपादित करने के लिए आपको वर्डप्रेस कंट्रोल पैनल पर जाने की आवश्यकता है, बाएं मेनू में उपस्थिति आइटम और उसके संपादक आइटम का चयन करें और हम वर्तमान साइट विषय की स्टाइलशीट फ़ाइल - style.css खोल देंगे।

यदि आप मानक ट्वेंटी फिफ्टीन विषय लेते हैं (आप कोई अन्य ले सकते हैं: ट्वेंटी चौदह, ट्वेंटी तेरह, ट्वेंटी ट्वेल्व - आप सभी को wordpress.org/themes/search/twenty/ से मुफ्त में डाउनलोड कर सकते हैं), तो @मीडिया प्रिंट नियम स्थित है शैलियों की कोड फ़ाइल के अंत में और निम्नानुसार शुरू होता है:

@मीडिया प्रिंट (बॉडी (पृष्ठभूमि: कोई नहीं! महत्वपूर्ण; / * उपयोगकर्ता एजेंटों के बाद से ब्रूट बल) सभी अलग-अलग प्रिंट करते हैं। * / फ़ॉन्ट-आकार: 11.25pt;)। दूसरा-टॉगल, .navigation, .page- लिंक, .edit- लिंक। , # उत्तर-शीर्षक, .comment-form, .comment-edit-link, .comment-list .reply a, बटन, input, textarea, select, .idecolumn form, .widecolumn .mu_nister फार्म (प्रदर्शन: कोई नहीं;)। ..

यहां भागों "प्रदर्शन" संपत्ति का उपयोग मूल्य "कोई नहीं" के साथ करते हैं - जो आपको मुद्रण के लिए अनावश्यक तत्वों को छिपाने की अनुमति देता है।

इसके अलावा, मुद्रण के लिए साइट पृष्ठभूमि को हटा दिया गया है - पृष्ठभूमि: कोई नहीं और अक्सर फोंट बदलते हैं।

दूसरा तरीका - "साइट का प्रिंट संस्करण" बनाएं - यह एक अतिरिक्त शैली फ़ाइल बनाने के लिए है - उदाहरण के लिए, print.css।

साइट के लिए Print.css फ़ाइल तक पहुँचने के लिए, आपको मेटा टैग में निम्नलिखित कोड लिखना होगा:

/print.css "प्रकार =" पाठ / सीएसएस "मीडिया =" प्रिंट "/\u003e

मेटा टैग HTML और XMTL भाषाओं के वैकल्पिक टैग हैं जो साइट विज़िटर के लिए अभिप्रेत नहीं हैं। वे वेब पेज के बारे में सेवा की जानकारी और ब्राउज़रों और खोज इंजन के लिए एक संरचित तरीके से वर्णन करते हैं। मेटा टैग्स को "हेड" / "हेड" टैग (पेज हैडर) के अंदर रखा जाता है।

वर्डप्रेस में मेटा टैग को आमतौर पर हेडर.फैप फाइल में रखा जाता है - इसे खोलने के लिए, आपको एडमिन एरिया में जाना होगा, लेफ्ट मेन्यू में अपीयरेंस आइटम, उसके एडिटर आइटम को चुनना होगा और टेम्प्लेट की लिस्ट में फाइल हेडर को चुनना होगा।

वर्डप्रेस प्लगइन्स "प्रिंट बटन" बनाने के लिए और
"साइट का मुद्रित संस्करण":

1. WP- प्रिंट
WP- प्रिंट प्लगइन विवरण:
अंतिम अद्यतन: 2015-4-21
सक्रिय डाउनलोड की संख्या: 40,000+
प्लगइन साइट: "wordpress.org/plugins/wp-print/screenshots/"

2. Print Friendly और PDF Button
Print Friendly और PDF Button plugin के बारे में:
अंतिम अद्यतन: 2015-6-9
सक्रिय डाउनलोड की संख्या: 60,000+
प्लगइन साइट: "wordpress.org/plugins/printfriendly/"

सीएसएस: प्रिंट!

सीएसएस। प्रिंट करने जा रहे हैं

वे आपको पहले से ही हैं: लिंक जो कहते हैं कि "मुद्रण योग्य संस्करण" या ऐसा कुछ। हर बार जब आप इन लिंक पर क्लिक करते हैं, तो आपको एक विशेष दस्तावेज मिलता है जिसमें सभी समान जानकारी होती है, लेकिन तत्वों की एक अलग व्यवस्था और, संभवतः, एक अलग मार्कअप।

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

समाधान - प्रिंट स्टाइल शीट

लेकिन अब हमारे पास डरने की कोई बात नहीं है, अब दस्तावेज़ का एक मुद्रित संस्करण बनाने के लिए हमें केवल एक अच्छी तरह से संरचित दस्तावेज़ और मुद्रण के लिए एक स्टाइल शीट की आवश्यकता है!

आज, आप मार्कअप को छूने के बिना स्टाइल शीट का उपयोग करके मुद्रण के लिए किसी भी (एक्स) एचटीएमएल दस्तावेज़ को ले सकते हैं और इसे तैयार कर सकते हैं। और अब एक दस्तावेज़ के दो संस्करणों के निर्माण और सिंक्रनाइज़ेशन के साथ समस्याएं हैं - एक स्क्रीन के लिए और दूसरा प्रिंटिंग के लिए। और सबसे अच्छी बात: इसे आसान बनाएं। (मीडिया-उन्मुख शैली पत्रक बनाने के मूल सिद्धांतों के बारे में अधिक जानकारी के लिए, वेबसाइट meweweb.com पर "अलग प्रिंट करें" लेख देखें।)

आइए देखें कि साइट "ए लिस्ट डिफरेंस" ने ब्राउज़रों की त्रुटियों को दरकिनार करते हुए मुद्रण के लिए एक शैली शीट कैसे प्राप्त की है, और अंत में पृष्ठ के प्रिंटआउट के रूप में सुधार हुआ है।

हम अस्थायी तत्वों के साथ त्रुटि के आसपास जाते हैं

जैसा कि आप "ए लिस्ट के अलावा" वेबसाइट पर "ज्ञात कीड़े" पृष्ठ पर या बुगज़िला प्रविष्टि पृष्ठ # 104040 पर पढ़ सकते हैं, गेको परिवार के ब्राउज़र, जैसे नेटस्केप 6.x या मोज़िला, लंबे समय से दूषित तत्वों को प्रिंट करने में समस्या है। )। यदि फ़्लोटिंग तत्व मुद्रित पृष्ठ से आगे निकल गया है, तो शेष भाग अगले पृष्ठ पर प्रदर्शित हुए बिना, पूरी तरह से गायब हो जाता है।

यदि आपकी साइट "A सूची से अलग" के समान है, अर्थात इसमें लेख एक बड़े फ्लोटिंग ब्लॉक में हैं, इसका मतलब है कि पाठकों को लेख का केवल पहला पन्ना ही मिलेगा, जब वह प्रिंट होगा।

समाधान, जैसा कि कोई उम्मीद करेगा, छपाई से पहले पाठ के साथ ब्लॉक की "फ्लोटिंग" संपत्ति को रद्द करना है। संक्षेप में, शैली का नियम "फ्लोट: कोई नहीं" सभी अस्थायी तत्वों के लिए निर्धारित है। ऐसा करने से, आप सभी फ़्लोटिंग तत्वों को उनके सामान्य रूप में वापस कर देंगे, और दस्तावेज़ को अपेक्षित रूप से मुद्रित किया जाएगा - पृष्ठ के अंत तक पृष्ठ।

तो, यह वही है जो मैंने एएलए के लिए ज़ेल्डमैन के लिए प्रस्तावित किया था, और जैसे ही उसने किया, सील के साथ समस्या गायब हो गई। ब्राउज़रों के गेको परिवार में, यह त्रुटि अभी भी तय नहीं है (लेखन के समय), लेकिन यह अभी भी आसानी से ऊपर प्रस्तावित विधि द्वारा दरकिनार किया जा सकता है।

रास्ते में

नीचे "मुद्रित" शैली की शीट है, जिसके साथ "ए लिस्ट अलग" ने प्रिंटिंग फ़्लोटिंग तत्वों की समस्या को हल किया:

#menu (
प्रदर्शन: कोई नहीं;
}

# श्रावक, # महाद्वीप (
चौड़ाई: ऑटो;
सीमा: 0;
मार्जिन: 0 5%;
गद्दी: 0;
फ्लोट: कोई नहीं!
}

जैसा कि मैंने देखा, समस्या यह थी कि स्क्रीन के लिए डिज़ाइन की गई बहुत सी शैलियाँ मुद्रण प्रक्रिया में गिर गईं।

यदि आप टैग की सामग्री को देखते हैं ALA वेबसाइट पर नए लेख, हम पाते हैं (भरने की मोटी में) निम्नलिखित पंक्तियाँ:

टाइप = "टेक्स्ट / सीएसएस"
मीडिया = "प्रिंट" href = "print.css" /\u003e

हमारे पास एक स्टाइल शीट फ़ाइल है, Print.css, प्रिंट डिवाइस "प्रिंट" के लिए उपयोग की विशेषता "मीडिया" के मूल्य द्वारा निर्दिष्ट की गई थी। Nucss2.css स्टाइल शीट फ़ाइल, जिसे नेविगेटर 4.x से छिपाने के लिए @import निर्माण का उपयोग करके आयात किया जाता है, जब पृष्ठ किसी आउटपुट डिवाइस (मीडिया विशेषता = "सभी") पर प्रदर्शित होता है। यह एक डिस्प्ले, प्रिंटर, प्रोजेक्टर, स्पीच सिंथेसाइज़र आदि हो सकता है। विचलन के बाद, हम पृष्ठ की पृष्ठभूमि के रंग के लिए शैली पत्रक के मुद्रण के लिए निर्देश लिख सकते हैं और पिक्सेल में फोंट निर्दिष्ट कर सकते हैं।

क्या यह बड़ा दुर्भाग्य होगा? नहीं, लेकिन अधिकांश ब्राउज़र पृष्ठ पृष्ठभूमि को डिफ़ॉल्ट रूप से प्रिंट नहीं करते हैं, और पिक्सेल में निर्दिष्ट फ़ॉन्ट आकार, ऑन-स्क्रीन डिस्प्ले के लिए उपयुक्त हैं, मुद्रण के लिए इतने उपयोगी नहीं हैं।

इसलिए, हमें मुद्रण के लिए अपनी शैली शीट में थोड़ा सुधार करें और इसके घटकों के लेआउट के साथ कई अन्य समस्याओं को हल करें।

सफेद करने वाली पृष्ठभूमि

राइट साइड मेनू के तत्वों के लिए, कई रंगों का उपयोग किया जाता है। लेकिन जब से हम मुद्रण करते समय मेनू छिपाते हैं, हमें कुछ भी बदलना नहीं होगा। यह हमें संभावित सिरदर्द से तुरंत बचाता है।

चूंकि प्रिंटर सफेद रंग में प्रिंट नहीं करते हैं, इसलिए हम पृष्ठ की पृष्ठभूमि को सफेद बना देंगे। आपको उन सभी पृष्ठभूमि चित्रों को भी हटाने की आवश्यकता है जो स्क्रीन पर पृष्ठ प्रदर्शित करने के लिए उपयोग किए गए थे।

यदि हम मदद के लिए पृष्ठभूमि की संपत्ति कहते हैं, तो हम एक झपट्टा में दोनों समस्याओं को हल करेंगे। समाधान को अधिक लचीला बनाने के लिए, आइए "शरीर" तत्व के लिए एक सफेद पृष्ठभूमि सेट करें, और आवरण और सामग्री तत्वों को एक पारदर्शी पृष्ठभूमि दें (और इस प्रकार सफेद रंग "शरीर" उनके माध्यम से दिखाई देगा):

शरीर (
पृष्ठभूमि: सफेद;
}

#menu (
प्रदर्शन: कोई नहीं;
}

# श्रावक, # महाद्वीप (
चौड़ाई: ऑटो;
मार्जिन: 0 5%;
गद्दी: 0;
सीमा: 0;
फ्लोट: कोई नहीं!
रंग: काला;
पृष्ठभूमि: पारदर्शी;
}

अग्रभूमि रंग (फ़ॉन्ट रंग) सेट करना बिल्कुल आवश्यक नहीं था, लेकिन इसके बारे में नहीं भूलना बेहतर है। तो, अब हमारे पास पारदर्शी पृष्ठभूमि के साथ दो गैर-अस्थायी तत्व (#wrapper, # महाद्वीप) और एक पृष्ठ है जिसमें एक सफेद पृष्ठभूमि है।

आप इस बारे में चिंतित हो सकते हैं कि नेविगेटर 4.x "पारदर्शी" मूल्य के साथ कैसे व्यवहार करता है, लेकिन नाक के ऊपर: NN4.x केवल स्टाइल शीट पर ध्यान आकर्षित करता है जिसमें "स्क्रीन" के लिए "मीडिया" विशेषता सेट है। @पोर्ट के निर्देश के अनुसार, हमारी प्रिंट करने योग्य शैली की चादरें हमेशा अंधे आंखों वाले नेविगेटर 4 से छिपी होती हैं। इसलिए, चिंता की कोई बात नहीं है।

फ़ॉन्ट आकार मुद्रित करने के लिए

समग्र शैली पत्रक फ़ॉन्ट आकार 11 पिक्सेल पर सेट करता है। छपाई करते समय बहुत बुरा विकल्प। फ़ॉन्ट परिवार ही - जॉर्जिया पहले, और फिर सेरिफ़ - मुद्रण के लिए महान है, क्योंकि सेरिफ़ फोंट आमतौर पर कागज पर बेहतर दिखते हैं। आपको केवल फ़ॉन्ट आकार बदलने की आवश्यकता है। यहाँ यह है:

शरीर (
पृष्ठभूमि: सफेद;
फ़ॉन्ट-आकार: 12pt;
}

"रुको!", आप को माफ करने की संभावना है। "एक विधर्मी! हर कोई जानता है - अंक बुरे हैं! टॉड फार्नर ने ऐसा कहा!"

खैर, हां, उन्होंने ऐसा कहा, और पूरी तरह से सही था - आप स्क्रीन के लिए अंक में फ़ॉन्ट का आकार निर्धारित नहीं कर सकते। छपाई करते समय, पैराग्राफ का उपयोग कई दशकों पहले जैसा ही अर्थ रखता है। चूंकि हम मुद्रण के लिए एक स्टाइल शीट तैयार कर रहे हैं, तो 12 बिंदुओं के "शरीर" के लिए फ़ॉन्ट का आकार निर्धारित करना सही और स्वाभाविक होगा।

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

पुस्तक के पत्र के किनारे पर लिखै हुई टीका-टिप्पणी

मूल जेनेरिक स्टाइल शीट "सामग्री" ब्लॉक के लिए 15% सही गद्दी सेट करती है। सीमाओं ने पहले ही हमें 10% दिया है, इसलिए हमें एक और 5% जोड़ने की आवश्यकता है। यह करना काफी आसान है:

div # सामग्री (
मार्जिन-वाम: 10%;
}

समाधान के एक और प्रकार में, किसी को केवल मार्जिन (मार्जिन) छोड़ा जा सकता है और बाएं इंडेंट (पैडिंग) में 5% जोड़ा जा सकता है। चूंकि "सामग्री" ब्लॉक में कोई दृश्यमान पृष्ठभूमि नहीं है, इसलिए हमें समान परिणाम मिलेगा।

दुर्भाग्य से, कुछ ब्राउज़रों के पास पर्याप्त पैडिंग के साथ समस्याएं हैं, इसलिए पृष्ठ के चारों ओर बढ़ते तत्व बॉर्डर (मार्जिन) का उपयोग करना बेहतर है।

एक मुश्किल सवाल था - हाइपरलिंक के साथ क्या करना है? जाहिर है, मुद्रण में वे मॉनिटर पर उतने उपयोगी नहीं हो सकते हैं, लेकिन मूल रूप से उन्होंने जो उल्लेख किया है, उसकी कुंजी देना अक्सर महत्वपूर्ण होता है। तो, यह वही है जो मैंने आविष्कार किया था:

a: लिंक, a: विज़िट किया गया (
रंग: # 520;
पृष्ठभूमि: पारदर्शी;
फ़ॉन्ट-वजन: बोल्ड;
पाठ-सजावट: रेखांकित करना;
}

एक ब्राउज़र में जो CSS2 के विनिर्देश का पूरी तरह से समर्थन करता है, हम उनके बाद लिंक के URL प्रदर्शित कर सकते हैं, जिससे उन लोगों के लिए सेवा हो सकती है जिनके पास प्रिंटआउट और ब्राउज़र हैं। नीचे एक नियम है जो केवल "सामग्री" ब्लॉक पर लागू होता है, और इस प्रकार अन्य लिंक के URL मुद्रित नहीं होते हैं:

# कॉन्टेंट: लिंक: के बाद, # कॉन्टेंट ए: दौरा: के बाद (
सामग्री: "(" attr (href) ")";
फ़ॉन्ट-आकार: 90%;
}

इसे गेको ब्राउज़रों पर आज़माएं - मोज़िला या नेटस्केप 6.x. प्रत्येक लिंक के बाद प्रिंटआउट पर आपको कोष्ठक में इससे जुड़ा URL दिखाई देगा।

उन ब्राउज़र में जो इस शैली के नियम को नहीं समझते हैं, कोई अवांछनीय प्रभाव नहीं होगा - लिंक अभी भी गहरे लाल, रेखांकित और बोल्ड होंगे। लिंक के पाठ के बाद संबंधित URL प्रदर्शित नहीं होंगे, बस।

कृपया ध्यान दें कि कोष्ठक के पहले और बाद के रिक्त स्थान स्टाइल नियम का हिस्सा हैं - रिक्त स्थान के बारे में मत भूलना, क्योंकि उन्हें दस्तावेज़ में शामिल किया जाना चाहिए।

इस नए नियम के साथ एक सौंदर्य समस्या है। तथ्य यह है कि यह वास्तव में दस्तावेज़ में href विशेषता के मान को सम्मिलित करने का निर्देश देता है।

साइट "ए लिस्ट शिफ्ट" से किसी भी पृष्ठ के कोड को देखते हुए, हम जल्दी से नोटिस करेंगे कि फॉर्म के कई तथाकथित "रिश्तेदार लिंक" / मुद्दे / 144 हैं। उन्हें उस दस्तावेज़ में डाला जाएगा जिस रूप में वे हैं, लेकिन मैं चाहूंगा कि ये पूर्ण URL थे।

ऐसे मामलों में, CSS3 मदद कर सकता है। कोई भी विशेषता चयनकर्ता, जो ^ = ऑपरेटर का उपयोग करता है, अपने विशेषता मानों की शुरुआत के आधार पर तत्वों का चयन करता है। इस प्रकार, हम किसी भी href विशेषता का चयन कर सकते हैं, जो स्लैश से शुरू होती है, और मौजूदा विशेषता मान को बदलने वाले टेक्स्ट को सम्मिलित करती है।

# कंटेंट: a (के बाद)
सामग्री: "(http://www.alistapart.com" attr (href) ")";
}

यह नियम सभी प्रकार के मानों "/ मुद्दों / 144 /" को "http://www.alistapart.com/issues/144/" में रूपांतरित करता है। यह नियम उन संबंधित URL की सहायता नहीं कर सकता है जो स्लैश से शुरू नहीं होते हैं, लेकिन सौभाग्य से, ALA इस प्रकार के लिंक का उपयोग नहीं करता है।

चेतावनी! महत्वपूर्ण! जैसा कि उल्लेख किया गया है, फॉर्म का चयनकर्ता ^ = CSS3 विनिर्देशन चयनकर्ताओं को संदर्भित करता है। W3 CSS कंसोलिडेटेटर Validator केवल CSS1 और CSS2 विनिर्देशों के अनुपालन के लिए परीक्षण कर सकता है। CSS3 चयनकर्ता को समझने के बिना, सत्यापनकर्ता एक त्रुटि की रिपोर्ट करेगा भले ही चयनकर्ता विनिर्देश की सिफारिशों के साथ संघर्ष न करें।

हम पृष्ठ के शीर्ष को सजाते हैं

स्टाइल शीट के अंतिम संस्करण को फिर से देखते हुए, मैंने पाया कि मैं वास्तव में पेज हेडर की तरह नहीं हूं। बिंदु न केवल टोपी में था, बल्कि साइट के नाम के बहुत "अंडरस्कोरिंग" में था। यह निश्चित रूप से रेखांकित होता है जहां हेडर चित्र समाप्त होता है। यह अचानक मेरे साथ हुआ कि इस पृष्ठ की पूरी चौड़ाई को रेखांकित करना अच्छा होगा।

सामग्री ब्लॉक के लिए मैंने जो पहला चरण बनाया है, वह चित्र में रेखांकित की गई शैली के साथ एक ऊपरी सीमा है: एक गहरी लाल रेखा एक पिक्सेल मोटी। चूंकि मैं एक दृश्यमान ऊपरी सीमा बनाने जा रहा था, इसलिए सीमा और पाठ के बीच कुछ इंडेंटेशन सम्मिलित करना अच्छा होगा।

div # सामग्री (
मार्जिन-वाम: 10%;
गद्दी-शीर्ष: 1em;
सीमा-शीर्ष: 1px ठोस # 930;
}

इस प्रकार, लेख शीर्षक चित्र के ठीक नीचे एक रेखा खींची जाएगी। हेडर चित्र स्वयं में पोस्ट किया गया है

तत्व, इसलिए हम इस तत्व की निचली सीमा का उपयोग शेष पृष्ठ तत्वों को खींचने के लिए करते हैं।

div # मस्तूल (
मार्जिन-बॉटम: -8px;
}

div # मस्तूल img (
ऊर्ध्वाधर-संरेखित करें: नीचे;
}

इन सरल नियमों के लिए धन्यवाद, "सामग्री" तत्व की ऊपरी सीमा तस्वीर में अंडरलाइन के साथ गठबंधन की गई है। यह सीमा अनिवार्य रूप से छवि के शीर्ष पर प्रदर्शित होती है, लेकिन चूंकि रंग समान हैं, इसलिए वे एक-दूसरे को भेदना मुश्किल (और असंभव भी) हैं। यहां तक कि अगर किसी कारण के लिए ब्राउज़र सामग्री ब्लॉक की सीमा पर चित्र लगाने का निर्णय लेता है, तो भ्रम बना रहेगा।

हेडर छवि के लिए पृष्ठभूमि रंग के रूप में, इसे पारदर्शी बनाने का कोई तरीका नहीं है। ठीक है, सिवाय इसके कि आप सीधे छवि में एक पारदर्शी पिक्सेल सेट कर सकते हैं। पूरे हेडर ब्लॉक की पृष्ठभूमि के लिए एक ही रंग चुनना संभव होगा, लेकिन इस तरह के हल्के रंग के लिए यह बहुत अधिक होगा।

और क्या?

यही सब हमने फिर से डिजाइन करने के लिए किया, लेकिन यह सब नहीं है जो किया जा सकता है।

उदाहरण के लिए, आप टाइपिंग करते समय उन्हें बेहतर दिखने के लिए रंगों के साथ खेल सकते हैं; आप प्रतिशत के बजाय अंक (या चोटियाँ, या इंच) का उपयोग करके पाठ फ़ील्ड भी सही कर सकते हैं। डिजाइन के लिए प्रिंट की दुनिया में उतनी ही जगह है, जितनी स्क्रीन पर है।

एक और क्षेत्र जिसे हमने गहराई से नहीं देखा है वह है फॉन्ट साइज़ में बदलाव। कई वर्ग (उदाहरण के लिए, "सुपरफ़ाइन") सामान्य शैली शीट में निर्दिष्ट पिक्सेल फ़ॉन्ट आकारों का उपयोग करते हैं। उनके प्रिंट आकारों को बदलना उतना ही सरल है जितना हमने शरीर के लिए किया था। दस्तावेज़: बस तत्व के लिए एक नियम लिखें और फ़ॉन्ट-आकार की संपत्ति के लिए एक नया मान सेट करें।

उदाहरण के लिए, हम .superfine (फ़ॉन्ट-आकार: 9pt;) ... या कोई अन्य उपयुक्त मान लिख सकते हैं। अन्य तत्व जैसे पाद या टैग हैं।

जो इस तरह के काम से लाभान्वित हो सकते हैं, और वे स्टाइल शीट साइट "ए लिस्ट अलग" के भविष्य के संस्करणों में अच्छी तरह से दिखाई दे सकते हैं।

अंतिम परिणाम

यहां सभी परिवर्तनों के बाद मुद्रित संस्करण के लिए स्टाइल शीट का अंतिम संस्करण दिया गया है:

शरीर (
पृष्ठभूमि: सफेद;
फ़ॉन्ट-आकार: 12pt;
}
#menu (
प्रदर्शन: कोई नहीं;
}
# श्रावक, # महाद्वीप (
चौड़ाई: ऑटो;
मार्जिन: 0 5%;
गद्दी: 0;
सीमा: 0;
फ्लोट: कोई नहीं!
रंग: काला;
पृष्ठभूमि: पारदर्शी कोई नहीं;
}
div # सामग्री (
मार्जिन-वाम: 10%;
गद्दी-शीर्ष: 1em;
सीमा-शीर्ष: 1px ठोस # 930;
}
div # मस्तूल (
मार्जिन-बॉटम: -8px;
}
div # मस्तूल img (
ऊर्ध्वाधर-संरेखित करें: नीचे;
}
a: लिंक, a: विज़िट किया गया (
रंग: # 520;
पृष्ठभूमि: पारदर्शी;
फ़ॉन्ट-वजन: बोल्ड;
पाठ-सजावट: रेखांकित करना;
}
# कॉन्टेंट: लिंक: के बाद, # कॉन्टेंट ए: दौरा: के बाद (
सामग्री: "(" attr (href) ")";
फ़ॉन्ट-आकार: 90%;
}
# कंटेंट: a (के बाद)
सामग्री: "(http://www.alistapart.com" attr (href) ")";
}

किसी दिए गए स्टाइल शीट की सादगी (कुछ मामलों में) की कच्ची होने के बावजूद, इसके उपयोग का प्रभाव किसी के लिए भी स्पष्ट होना चाहिए, जो स्क्रीन पर प्रदर्शित एक ही पृष्ठ के पेज प्रिंटआउट की तुलना करता है। इस तरह के उपयोगी और शानदार बदलाव सरल से उदात्त तक लगभग किसी भी डिजाइन के लिए संभव हैं, और ये मीडिया-उन्मुख शैली लेखकों को दस्तावेज़ के मुद्रित संस्करण के साथ एक अलग पृष्ठ बनाने से बचाती है।

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

निर्णय
आप मुद्रण के लिए एक विशेष स्टाइल शीट बना सकते हैं, उदाहरण के लिए:

प्रिंट stylesheet.html

"Http://www.w3.org/1999/xhtml"lang = "en-us"\u003e स्टाइल शीट प्रिंट करें

XOOPS क्या है?

XOOPS - यह एक गतिशील OO (ऑब्जेक्ट ओरिएंटेड) है pHP पर आधारित एक ओपन सोर्स पोर्टल स्क्रिप्ट। XOOPS विभिन्न प्रकार के डेटाबेस का समर्थन करता है, XOOPS एक आदर्श उपकरण है। आंतरिक वेब साइटों के छोटे, अत्यधिक गतिशील समुदायों को बनाने के लिए कंपनी पोर्टल्स, कॉर्पोरेट पोर्टल्स, वेब पब्लिशर्स और बहुत कुछ एक और।

तकनीकी आवश्यकताएँ:

WWW सर्वर ( अपाचे , IIS, रोक्सेन, आदि)
पीएचपी 5.2 या अधिक है
MySQL डेटाबेस 5.0 या उच्चतर

डाउनलोड XOOPS

main.css

body, html (मार्जिन: 0; गद्दी: 0;) #navigation (फ़ॉन्ट: 90% एरियल, हेल्वेटिका, सैंस-सेरिफ़; लेफ्ट: 0; स्थिति: निरपेक्ष; शीर्ष: 41 पीएक्स; चौड़ाई: 170 पीएक्स;) # दायित्व अल (सूची) -स्टाइल: कोई नहीं; मार्जिन: 0; पेडिंग: 0; बॉर्डर: कोई नहीं;) #navigation li (बॉर्डर-बॉटम: 1px सॉलिड # ED9F9F; मार्जिन: 0;) #navigation li a: लिंक, #navigation li a: visit ( प्रदर्शन: ब्लॉक; गद्दी: 5px 5px 5px 0. 5em; बॉर्डर-लेफ्ट: 12px सॉलिड # 711515; बॉर्डर-राईट: 1px सॉलिड # 711515; कलर: #FFFFFF; बैकग्राउंड-कलर: # b51032; टेक्स्ट-डेकोरेशन: कोई नहीं;) #navigation li a: hover (color: #FFFFFF; बैकग्राउंड-कलर: # 711515;) #content (मार्जिन-लेफ्ट: 190px; मार्जिन-राइट: 10px;) #banner (हाइट: 40px; बैकग्राउंड-कलर: # 711515; बॉर्डर-बॉटम: 1px सॉलिड # ED9F9F; टेक्स्ट-अलाइन: राइट; पेडिंग-राईट: 20 पोस्ट; मार्जिन-टॉप: 0;) # स्बनेर उल (मार्जिन: 0; पैडिंग: 0;) # लैबनर ली (प्रदर्शन: इनलाइन) # लिबास: ए, लिंक, # नबंर a: दौरा किया (फ़ॉन्ट: 80% एरियल, हेल्वेटिका, सैंस-सेरिफ़; रंग: # फाफ; पृष्ठभूमि-रंग: पारदर्शी; ) # कॉन्टेंट पी, # कॉन्टेंट ली (फ़ॉन्ट: 80% / 1। 6 एरियल, हेल्वेटिका, एस-सेरिफ़;) # कॉन्टेंट पी (मार्जिन-लेफ्ट: 1। 5 मी;) # कॉन्टेंट एच 1, # एलेंट एच 2 (फॉन्ट: 140 % जॉर्जिया, "टाइम्स न्यू रोमन", टाइम्स, सेरिफ़; # कॉन्टेंट एच 2 (फ़ॉन्ट: 120% जॉर्जिया, "टाइम्स न्यू रोमन", टाइम्स, सेरिफ़; पैडिंग-बॉटम: 3 पीएक्स;)

print.css

शरीर, HTML (मार्जिन: 0; गद्दी: 0;) #navigation (प्रदर्शन: कोई नहीं;) # महाद्वीप (मार्जिन-बाएं: 20pt; मार्जिन-राइट: 30pt;) #banner (प्रदर्शन: कोई नहीं;) # महाद्वीप पी, # सामग्री ली (फ़ॉन्ट: 12pt / 20pt "टाइम्स न्यू रोमन", टाइम्स, सेरिफ़;) # कॉन्टेंट पी (मार्जिन-लेफ्ट: 20 टीपी) # कॉन्टेंट एच 1, # कॉन्टेंट एच 2 (फ़ॉन्ट: 16 टीप जॉर्जिया, टाइम्स न्यू रोमन ", टाइम्स , सेरिफ़; कलर: # 4b4b4b; बैकग्राउंड-कलर: ट्रांसपेरेंट;) # कंटेंट h2 (फॉन्ट: 14pt जॉर्जिया, "टाइम्स न्यू रोमन", टाइम्स, सेरिफ़; पेडिंग-बॉटम: 2pt; बॉर्डर-बॉटम: 1pt डॉटेड #CCCCCC;)

विचार-विमर्श
यदि आपके पास मुद्रण के लिए एक अलग शैली की शीट है, तो यह आगंतुकों के लिए आपकी साइट के साथ काम करने के लिए अधिक सुविधाजनक होगा, खासकर यदि आप बहुत सारे ग्राफिक्स का उपयोग करते हैं। एक दस्तावेज़ को प्रिंट करना जिसमें कई छवियां शामिल हैं, स्याही की मात्रा और पुराने प्रिंटर पर प्रिंट करने के समय के हिसाब से महंगा हो सकता है। इसके अलावा, कुछ साइटें खराब चुनी हुई रंगों या दस्तावेज़ संरचना की विशेषताओं के कारण कागज पर अच्छी नहीं लगती हैं। पर अंजीर। 8.2 एक पृष्ठ सीएसएस का उपयोग करके बनाए गए दो स्तंभों से मिलकर दिखाया गया है, किनारे पर एक नेविगेशन बार और सीएमएसOOPS के विवरण वाले एक मुख्य क्षेत्र के साथ।

अंजीर। 8.2। ब्राउज़र में दो कॉलम वाले पृष्ठ को देखें ()

अंजीर में। चित्रा 8.3 प्रिंट पूर्वावलोकन मोड में एक ही पृष्ठ दिखाता है।
ये चित्र आपको स्क्रीन और डिस्प्ले पर डिस्प्ले के बीच स्पष्ट अंतर को स्पष्ट रूप से देखने की अनुमति देते हैं। ए 4 पेपर की एक मानक शीट की एक सीमित चौड़ाई होती है, इसलिए यदि मेनू को उस पर रखा जाता है, तो नुस्खा को प्रिंट करने के लिए केवल आधा शीट चौड़ाई रह जाएगी।

अंजीर। 8.3। प्रिंट पूर्वावलोकन में एक पृष्ठ देखें

इसके परिणामस्वरूप कई पन्नों पर लंबे व्यंजनों को मुद्रित किया जा सकता है।
आमतौर पर, साइटों में उन पृष्ठों का एक प्रिंट संस्करण होता है, जो डेवलपर्स के अनुसार, उपयोगकर्ता प्रिंट करना चाह सकता है। हालांकि, इस दृष्टिकोण के उपयोग से दस्तावेज़ के कई संस्करणों को बनाए रखने की आवश्यकता होती है। इसके अलावा, उपयोगकर्ता को संबंधित ब्राउज़र बटन का उपयोग करने के बजाय पृष्ठ पर ही प्रिंट बटन ढूंढना होगा। सीएसएस का उपयोग करते समय, पृष्ठ को मुद्रण के लिए शैली पत्रक में निर्दिष्ट नियमों के अनुसार प्रदर्शित किया जाएगा, चाहे वह किसी भी बटन का हो, जिसे उपयोगकर्ता पृष्ठ पर या ब्राउज़र में क्लिक करता है।
मुद्रण के लिए एक स्टाइल शीट बनाने की प्रक्रिया पर विचार करें और इसे दस्तावेज़ में अधिक विस्तार से लिंक करें।

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

मुद्रण के लिए शैली नियम बनाना
एक नए नाम के तहत मौजूदा स्टाइल शीट को सहेजने के बाद, आप इसे पहले से लिखे नियमों को बदलकर एक नई तालिका के लिए आधार के रूप में ले सकते हैं। मेरे दस्तावेज़ में, नेविगेशन बार div तत्व के अंदर स्थित है; इसकी निम्नलिखित शैली नियम है:

#navigation (फ़ॉन्ट: 90% एरियल, हेल्वेटिका, सैंस-सेरिफ़; वाम: 0; स्थिति: निरपेक्ष; शीर्ष: 41 पीएक्स; चौड़ाई: 170 पीएक्स;)

चूंकि प्रिंट संस्करण में नेविगेशन पूरी तरह से बेकार है, इसलिए इसे छिपाना होगा। ऐसा करने के लिए, विवरण ब्लॉक की सामग्री को निर्दिष्ट प्रदर्शन के साथ एकल संपत्ति के साथ बदलें: कोई भी मूल्य नहीं:

#navigation (प्रदर्शन: कोई नहीं;)

अब आप उन सभी नियमों को हटा सकते हैं जो ब्लॉक नेविगेशन के अंदर स्थित तत्वों पर लागू होते हैं।
इसके अलावा, आप मुख्य सामग्री के साथ क्षेत्र का विस्तार कर सकते हैं ताकि यह पृष्ठ पर सभी खाली स्थान ले सके। शैली पत्रक में सामग्री तत्व पर एक अनुभाग खोजें:

# कंटेंट (मार्जिन-लेफ्ट: 190px; मार्जिन-राइट: 10px;)

आप बाहरी इंडेंट को बाईं ओर कम कर सकते हैं, क्योंकि अब आपको नेविगेशन बार को समायोजित करने के लिए अतिरिक्त स्थान आवंटित करने की आवश्यकता नहीं है। इसके अलावा, यह पिक्सल से माप की इकाइयों को बदलने के लिए (स्क्रीन पर प्रदर्शन के लिए) आइटम (प्रिंटिंग के लिए) पर चोट नहीं करता है, जिस पर हमने अनुभाग में विस्तार से चर्चा की "फ़ॉन्ट आकार सेट करने के लिए माप की इकाइयों का चयन: पिक्सल, अंक, चोटियों, या कुछ और" अध्याय 2:

# कंटेंट (मार्जिन-लेफ्ट: 20pt; मार्जिन राइट: 30pt;)

जब पूर्वावलोकन मोड में कोई दस्तावेज़ देखना, जैसा कि दिखाया गया है अंजीर। 8.4, या जब ब्राउज़र का उपयोग करते हुए मुद्रण करते हैं, तो हम देखेंगे कि नेविगेशन बार गायब हो गया है और मुख्य सामग्री के तहत अंतरिक्ष पृष्ठ पर अधिक कुशलता से उपयोग किया जाता है।

अंजीर में। 8.4 आप देख सकते हैं कि पृष्ठ के शीर्ष पर एक रेखा है।
यह बैनर के फ्रेम के नीचे है। बाद वाले के साथ, आप नेविगेशन बार के साथ भी ऐसा ही कर सकते हैं। सबसे पहले, आपको स्टाइल शीट में बैनर पर लागू नियम खोजने की आवश्यकता है:

# प्रकार (ऊंचाई: 40px; पृष्ठभूमि-रंग: # 711515; सीमा-निचला: 1px ठोस # EDFFF;);

अंजीर। 8.4। नेविगेशन बार को हटाने के बाद, पृष्ठ कागज पर बेहतर दिखाई देगा।

नेविगेशन फलक के साथ समानता से, हम बैनर के लिए प्रदर्शन संपत्ति को किसी के पास नहीं रखते हैं और निर्दिष्ट पहचानकर्ता के साथ तत्व के लिए शेष नियमों को हटा देते हैं।

# बब्बर (प्रदर्शन: कोई नहीं;)

अंत में, टेक्स्ट को फॉर्मेट करने के लिए नीचे आते हैं। आमतौर पर प्रिंट संस्करण में मैं रंग पाठ को काले या भूरे रंग में बदल देता हूं, जब तक कि पाठ, जो भी कारण से, रंग योजना को बरकरार रखना चाहिए। हम बिंदुओं में फ़ॉन्ट आकार निर्दिष्ट करते हैं ताकि यह विभिन्न प्रणालियों में स्थिर रहे।
इसके अलावा, मुद्रण के लिए अभिप्रेत पाठ, एक फ़ॉन्ट परिवार सेरिफ़ जारी करना बेहतर है - इसलिए इसे कागज पर बेहतर माना जाएगा।

निम्नलिखित संशोधित कोड है:

# कंटेंट पी, # कॉन्टेंट ली (फॉन्ट: 12pt / 20pt "टाइम्स न्यू रोमन", टाइम्स, सेरेमनी;) # कॉन्टेंट पी (मार्जिन-लेफ्ट: 20 टीपी;) # कॉन्टेंट एच 1, # कॉन्टेंट एच 2 (फॉन्ट): 16 सेफ्टी कलर; # 4b4b4b; पृष्ठभूमि-रंग: पारदर्शी;) # महाद्वीप h2 (फ़ॉन्ट: 14pt) जॉर्जिया, "टाइम्स न्यू रोमन", टाइम्स,सेरिफ़; गद्दी-तल: 2pt; बॉर्डर-बॉटम: 1pt dotted #CCCCCC; )

अब पृष्ठ और भी आसान लग रहा है, लेकिन पाठ पढ़ना बहुत आसान हो गया है। ।

परिषद
मुद्रण और सरल तालिकाओं के लिए स्टाइल शीट। CSS पर स्तरित दस्तावेज़ के लिए डिज़ाइन की गई छपाई के लिए एक स्टाइल शीट बनाना आसान है, लेकिन आप टेबल-आधारित लेआउट के लिए ऐसी स्टाइल शीट भी बना सकते हैं, जो सेल की चौड़ाई CSS का उपयोग करके सेट की गई थी, विशेष रूप से उपयोगी है। आप उन कोशिकाओं को भी छिपा सकते हैं जिनमें नेविगेशन पट्टी उसी तरह से है जैसे हमने उपरोक्त उदाहरण में div तत्व के साथ किया था।

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

CSS की महान विशेषताओं में से एक स्टाइल शीट बनाने की क्षमता है जो विभिन्न प्रकार के आउटपुट डिवाइसों को लक्षित करती है। हम स्क्रीन पर पृष्ठों को प्रदर्शित करने के लिए स्टाइल शीट बनाने के लिए उपयोग किए जाते हैं, लेकिन हम अभी भी अन्य डिस्प्ले टूल के बारे में सोचने के लिए उपयोग नहीं किए जाते हैं। और, "मुद्रण योग्य संस्करण" संदर्भ की पुष्टि के रूप में, हम एक दस्तावेज को केवल एक अन्य रूप में प्रस्तुत करने की प्रस्तुति के रूप में छापने के बारे में सोचते हैं। लेकिन अब हमारे पास डरने की कोई बात नहीं है, अब दस्तावेज़ का एक मुद्रित संस्करण बनाने के लिए हमें केवल एक अच्छी तरह से संरचित दस्तावेज़ और मुद्रण के लिए एक स्टाइल शीट की आवश्यकता है! आज, आप मार्कअप को छूने के बिना स्टाइल शीट का उपयोग करके मुद्रण के लिए किसी भी (एक्स) एचटीएमएल दस्तावेज़ को ले सकते हैं और इसे तैयार कर सकते हैं। और अब एक दस्तावेज़ के दो संस्करणों के निर्माण और सिंक्रनाइज़ेशन के साथ समस्याएं हैं - एक स्क्रीन के लिए और दूसरा प्रिंटिंग के लिए। और सबसे अच्छी बात: इसे आसान बनाएं।

हम अस्थायी तत्वों के साथ त्रुटि के आसपास जाते हैं

गेको परिवार के ब्राउज़र, जैसे कि नेटस्केप 6.x या मोज़िला, को लंबे समय तक चलने वाले तत्वों को टाइप करने में समस्या होती है। यदि फ़्लोटिंग तत्व मुद्रित पृष्ठ से आगे निकल गया है, तो शेष भाग अगले पृष्ठ पर प्रदर्शित हुए बिना, पूरी तरह से गायब हो जाता है। यदि आपकी साइट "A सूची से अलग" के समान है, अर्थात इसमें लेख एक बड़े फ्लोटिंग ब्लॉक में हैं, इसका मतलब है कि पाठकों को लेख का केवल पहला पन्ना ही मिलेगा, जब वह प्रिंट होगा। समाधान, जैसा कि कोई उम्मीद करेगा, छपाई से पहले पाठ के साथ ब्लॉक की "अस्थायी" संपत्ति को रद्द करना है। संक्षेप में, शैली का नियम "फ्लोट: कोई नहीं" सभी अस्थायी तत्वों के लिए निर्धारित है। ऐसा करने से, आप सभी फ़्लोटिंग तत्वों को उनके सामान्य रूप में वापस कर देंगे, और दस्तावेज़ को अपेक्षित रूप से मुद्रित किया जाएगा - पृष्ठ के अंत तक पृष्ठ। तो, यह वही है जो मैंने एएलए के लिए ज़ेल्डमैन के लिए प्रस्तावित किया था, और जैसे ही उसने किया, सील के साथ समस्या गायब हो गई। ब्राउज़रों के गेको परिवार में, यह त्रुटि अभी भी तय नहीं है (लेखन के समय), लेकिन यह अभी भी आसानी से ऊपर प्रस्तावित विधि द्वारा दरकिनार किया जा सकता है।

रास्ते में

नीचे "प्रिंटेड" स्टाइल शीट दी गई है, जिसके साथ "ए लिस्ट अलग" ने प्रिंटिंग फ़्लोटिंग तत्वों की समस्या को हल किया:

#menu (प्रदर्शन: कोई नहीं;) # शेपर, # कॉन्टेंट (चौड़ाई: ऑटो; बॉर्डर: 0; मार्जिन; 0 5%; पैडिंग: 0; फ्लोट: कोई नहीं; महत्वपूर्ण;)

अच्छी शुरुआत। स्टाइल शीट पूरी तरह से सही मेनू को हटा देती है ताकि यह मुद्रित न हो, और लेख की सामग्री के लिए सीमाएं और संकेत सेट करता है ताकि किसी भी पृष्ठ पर पाठ समान रूप से प्रिंट क्षेत्र के एक किनारे से दूसरे तक फैला हो। जैसा कि मैंने देखा, समस्या यह थी कि स्क्रीन के लिए डिज़ाइन की गई बहुत सी शैलियाँ मुद्रण प्रक्रिया में गिर गईं। यदि आप टैग की सामग्री को देखते हैं ALA वेबसाइट पर नए लेख, हम पाते हैं (भरने की मोटी में) निम्नलिखित पंक्तियाँ:

हमारे पास एक स्टाइल शीट फ़ाइल है, Print.css, मुद्रण डिवाइस "प्रिंट" के लिए उपयोग "विशेषता" के मूल्य द्वारा निर्दिष्ट किया गया था। Nucss2.css स्टाइल शीट फ़ाइल, जिसे नेविगेटर 4.x से छिपाने के लिए @import निर्माण का उपयोग करके आयात किया जाता है, जब पृष्ठ किसी आउटपुट डिवाइस (मीडिया विशेषता = "सभी") पर प्रदर्शित होता है। यह एक डिस्प्ले, प्रिंटर, प्रोजेक्टर, स्पीच सिंथेसाइज़र आदि हो सकता है। विचलन के बाद, हम पृष्ठ की पृष्ठभूमि के रंग के लिए शैली पत्रक के मुद्रण के लिए निर्देश लिख सकते हैं और पिक्सेल में फोंट निर्दिष्ट कर सकते हैं। क्या यह बड़ा दुर्भाग्य होगा? नहीं, लेकिन अधिकांश ब्राउज़र पृष्ठ पृष्ठभूमि को डिफ़ॉल्ट रूप से प्रिंट नहीं करते हैं, और पिक्सेल में निर्दिष्ट फ़ॉन्ट आकार, ऑन-स्क्रीन डिस्प्ले के लिए उपयुक्त हैं, मुद्रण के लिए इतने उपयोगी नहीं हैं। इसलिए, हमें मुद्रण के लिए अपनी शैली शीट में थोड़ा सुधार करें और इसके घटकों के लेआउट के साथ कई अन्य समस्याओं को हल करें।

सफेद करने वाली पृष्ठभूमि

राइट साइड मेनू के तत्वों के लिए, कई रंगों का उपयोग किया जाता है। लेकिन जब से हम मुद्रण करते समय मेनू छिपाते हैं, हमें कुछ भी बदलना नहीं होगा। यह हमें संभावित सिरदर्द से तुरंत बचाता है। चूंकि प्रिंटर सफेद रंग में प्रिंट नहीं करते हैं, इसलिए हम पृष्ठ की पृष्ठभूमि को सफेद बना देंगे। आपको उन सभी पृष्ठभूमि चित्रों को भी हटाने की आवश्यकता है जो स्क्रीन पर पृष्ठ प्रदर्शित करने के लिए उपयोग किए गए थे। यदि हम मदद के लिए पृष्ठभूमि की संपत्ति कहते हैं, तो हम एक झपट्टा में दोनों समस्याओं को हल करेंगे। निर्णय को अधिक लचीला बनाने के लिए, आइए "शरीर" तत्व के लिए एक सफेद पृष्ठभूमि सेट करें, और "आवरण" और "सामग्री" तत्वों को एक पारदर्शी पृष्ठभूमि दें (और इस प्रकार "शरीर" सफेद रंग उनके माध्यम से दिखाई देगा):

शरीर (पृष्ठभूमि: सफेद;) # मेनू (प्रदर्शन: कोई नहीं;) # शेपर, # कॉन्टेंट (चौड़ाई: ऑटो; मार्जिन: 0 5%; पैडिंग: 0; बॉर्डर: 0; फ्लोट: कोई नहीं; महत्वपूर्ण; रंग: काला; पृष्ठभूमि : पारदर्शी;)

अग्रभूमि रंग (फ़ॉन्ट रंग) सेट करना बिल्कुल आवश्यक नहीं था, लेकिन इसके बारे में नहीं भूलना बेहतर है। तो, अब हमारे पास पारदर्शी पृष्ठभूमि के साथ दो "गैर-अस्थायी" तत्व (#wrapper, #content) और एक पृष्ठ है जिसमें एक सफेद पृष्ठभूमि है। आप इस बारे में चिंतित हो सकते हैं कि नेविगेटर 4.x "पारदर्शी" के मान से कैसे निपटता है, लेकिन नाक के ऊपर: NN4.x केवल उन स्टाइल शीट पर ध्यान देता है जिनके पास "मीडिया" विशेषता "स्क्रीन" पर सेट है। @पोर्ट के निर्देश के अनुसार, हमारी प्रिंट करने योग्य शैली की चादरें हमेशा अंधे आंखों वाले नेविगेटर 4 से छिपी होती हैं। इसलिए, चिंता की कोई बात नहीं है।

फ़ॉन्ट आकार मुद्रित करने के लिए

शरीर (पृष्ठभूमि: सफेद; फ़ॉन्ट का आकार: 12pt;)

"रुको!" - "मेरे अंक बुरे हैं!" ठीक है, हाँ, उन्होंने ऐसा कहा, और पूरी तरह से सही था - आप अंक के लिए स्क्रीन के लिए फ़ॉन्ट आकार निर्धारित नहीं कर सकते। छपाई करते समय, पैराग्राफ का उपयोग कई दशकों पहले जैसा ही अर्थ रखता है। चूंकि हम मुद्रण के लिए एक स्टाइल शीट तैयार कर रहे हैं, तो 12 बिंदुओं के "बॉडी" के लिए फ़ॉन्ट का आकार निर्धारित करना सही और स्वाभाविक होगा। बेशक, आप अपनी पसंद के अनुसार किसी भी आकार को सेट कर सकते हैं, लेकिन 12 बिंदु वाला फ़ॉन्ट सबसे अधिक उपयोग किया जाता है। और चूंकि सामान्य शैली की शीट में पृष्ठ के अन्य सभी तत्वों के आकार शरीर के तत्व के आकार के सापेक्ष हैं, इसलिए हमारा काम समाप्त हो गया है।

पुस्तक के पत्र के किनारे पर लिखै हुई टीका-टिप्पणी

मौजूदा शैली के नियमों ने रैप और सामग्री तत्वों के बाएं और दाएं मार्जिन को 5% के आकार में सेट किया है। इसका मतलब यह है कि लेख के दोनों किनारों पर एक "खाली स्थान" होगा, और प्रत्येक "खाली स्थान" प्रिंट क्षेत्र की चौड़ाई का 10% होगा। यह इस तथ्य का परिणाम है कि लेख "सामग्री" के पाठ के साथ ब्लॉक आवरण लपेटने वाले ब्लॉक के अंदर स्थित है, और उनमें से प्रत्येक के बाईं और दाईं ओर 5% के क्षेत्र हैं। मूल कॉमन स्टाइल शीट "कंटेंट" ब्लॉक के लिए 15% सही इंडेंटेशन (पैडिंग) सेट करता है। सीमाओं ने पहले ही हमें 10% दिया है, इसलिए हमें एक और 5% जोड़ने की आवश्यकता है। यह करना काफी आसान है:

div # सामग्री (मार्जिन-वाम: 10%;)

समाधान के एक और प्रकार में, किसी को केवल मार्जिन (मार्जिन) छोड़ा जा सकता है और बाएं इंडेंट (पैडिंग) में 5% जोड़ा जा सकता है। चूंकि "सामग्री" ब्लॉक में कोई दृश्य पृष्ठभूमि नहीं है, इसलिए हमें समान परिणाम मिलेगा। दुर्भाग्य से, कुछ ब्राउज़रों के पास पर्याप्त पैडिंग के साथ समस्याएं हैं, इसलिए पृष्ठ के चारों ओर बढ़ते तत्व बॉर्डर (मार्जिन) का उपयोग करना बेहतर है।

लिंक जब मुद्रण

a: लिंक, a: विज़िट किया गया (रंग: # 520; पृष्ठभूमि: पारदर्शी, फ़ॉन्ट-भार: बोल्ड; टेक्स्ट-डेकोरेशन: अंडरलाइन);

यह लिंक को एक रंग देता है जो काले और सफेद मुद्रण के साथ काले रंग के करीब होने के लिए पर्याप्त गहरा है, जबकि एक ही समय में रंग मुद्रण के साथ गहरे लाल रंग में रहता है। बोल्ड और रेखांकित करना सुनिश्चित करता है कि लिंक मुद्रित पाठ में हाइलाइट किया जाएगा। एक ब्राउज़र में जो CSS2 के विनिर्देश का पूरी तरह से समर्थन करता है, हम उनके बाद लिंक के URL प्रदर्शित कर सकते हैं, जिससे उन लोगों के लिए सेवा हो सकती है जिनके पास प्रिंटआउट और ब्राउज़र हैं। नीचे एक नियम है जो केवल "सामग्री" ब्लॉक पर लागू होता है, और इस प्रकार अन्य लिंक के URL मुद्रित नहीं होते हैं:

# कंटेंट ए: लिंक: के बाद, # कॉन्टेंट ए: विजिट किया गया: के बाद (कंटेंट: "(" एटर (href) ""); फॉन्ट-साइज: 90%;)

इसे गेको ब्राउज़रों पर आज़माएं - मोज़िला या नेटस्केप 6.x. प्रत्येक लिंक के बाद प्रिंटआउट पर आपको कोष्ठक में इससे जुड़ा URL दिखाई देगा। उन ब्राउज़र में जो इस शैली के नियम को नहीं समझते हैं, कोई अवांछनीय प्रभाव नहीं होगा - लिंक अभी भी गहरे लाल, रेखांकित और बोल्ड होंगे। लिंक के पाठ के बाद संबंधित URL प्रदर्शित नहीं होंगे, बस। कृपया ध्यान दें कि कोष्ठक के पहले और बाद के रिक्त स्थान स्टाइल नियम का हिस्सा हैं - रिक्त स्थान के बारे में मत भूलना, क्योंकि उन्हें दस्तावेज़ में शामिल किया जाना चाहिए। इस नए नियम के साथ एक सौंदर्य समस्या है। तथ्य यह है कि यह वास्तव में दस्तावेज़ में href विशेषता के मान को सम्मिलित करने का निर्देश देता है। "A List Apart" साइट से किसी भी पेज के कोड को देखते हुए, हम जल्दी से नोटिस करेंगे कि फॉर्म के कई तथाकथित "रिश्तेदार लिंक" / मुद्दे / 144 हैं। उन्हें उस दस्तावेज़ में डाला जाएगा जिस रूप में वे हैं, लेकिन मैं चाहूंगा कि ये पूर्ण URL थे। ऐसे मामलों में, CSS3 मदद कर सकता है। कोई भी विशेषता चयनकर्ता, जो ^ = ऑपरेटर का उपयोग करता है, अपने विशेषता मानों की शुरुआत के आधार पर तत्वों का चयन करता है। इस प्रकार, हम किसी भी href विशेषता का चयन कर सकते हैं, जो स्लैश से शुरू होती है, और मौजूदा विशेषता मान को बदलने वाले टेक्स्ट को सम्मिलित करती है।

# कंटेंट a: आफ्टर (कंटेंट: "(//www.alistapart.com" अटर (href) ")";);

यह नियम "/ मुद्दों / 144 /" प्रकार के सभी मूल्यों को "//www.alistapart.com/issues/144/" में परिवर्तित करता है। यह नियम उन संबंधित URL की सहायता नहीं कर सकता है जो स्लैश से शुरू नहीं होते हैं, लेकिन सौभाग्य से, ALA इस प्रकार के लिंक का उपयोग नहीं करता है। चेतावनी! महत्वपूर्ण! जैसा कि उल्लेख किया गया है, फॉर्म का चयनकर्ता ^ = CSS3 विनिर्देशन चयनकर्ताओं को संदर्भित करता है। W3 CSS कंसोलिडेटेटर Validator केवल CSS1 और CSS2 विनिर्देशों के अनुपालन के लिए परीक्षण कर सकता है। CSS3 चयनकर्ता को समझने के बिना, सत्यापनकर्ता एक त्रुटि की रिपोर्ट करेगा भले ही चयनकर्ता विनिर्देश की सिफारिशों के साथ संघर्ष न करें।

हम पृष्ठ के शीर्ष को सजाते हैं

स्टाइल शीट के अंतिम संस्करण को फिर से देखते हुए, मैंने पाया कि मैं वास्तव में पृष्ठ के "हेडर" की तरह नहीं था। यह बिंदु न केवल टोपी में था, बल्कि साइट के नाम के "रेखांकित" में था। यह निश्चित रूप से रेखांकित होता है जहां हेडर चित्र समाप्त होता है। यह अचानक मेरे साथ हुआ कि इस पृष्ठ की पूरी चौड़ाई को रेखांकित करना अच्छा होगा। सामग्री ब्लॉक के लिए मैंने जो पहला चरण बनाया है, वह चित्र में रेखांकित की गई शैली के साथ एक ऊपरी सीमा है: एक गहरी लाल रेखा एक पिक्सेल मोटी। चूंकि मैं एक दृश्यमान ऊपरी सीमा बनाने जा रहा था, इसलिए सीमा और पाठ के बीच कुछ इंडेंटेशन सम्मिलित करना अच्छा होगा।

div # कंटेंट (मार्जिन-लेफ्ट: 10%; पेडिंग-टॉप: 1em; बॉर्डर-टॉप: 1px सॉलिड # 930;)

div # मस्तूल (मार्जिन-बॉटम: -8px;) डिव # मस्त img (वर्टिकल-अलाइन: बॉटम;)

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

और क्या?

यही सब हमने फिर से डिजाइन करने के लिए किया, लेकिन यह सब नहीं है जो किया जा सकता है। उदाहरण के लिए, आप टाइपिंग करते समय उन्हें बेहतर दिखने के लिए रंगों के साथ खेल सकते हैं; आप प्रतिशत के बजाय अंक (या चोटियाँ, या इंच) का उपयोग करके पाठ फ़ील्ड को भी सही कर सकते हैं। डिजाइन के लिए प्रिंट की दुनिया में उतनी ही जगह है, जितनी स्क्रीन पर है। एक और क्षेत्र जिसे हमने गहराई से नहीं देखा है वह है फॉन्ट साइज़ में बदलाव। कई वर्ग (उदाहरण के लिए, "सुपरफ़ाइन") सामान्य शैली शीट में निर्दिष्ट पिक्सेल फ़ॉन्ट आकार का उपयोग करते हैं। उनके प्रिंट आकारों को बदलना उतना ही सरल है जितना हमने शरीर के लिए किया था। दस्तावेज़: बस तत्व के लिए एक नियम लिखें और फ़ॉन्ट-आकार की संपत्ति के लिए एक नया मान सेट करें। उदाहरण के लिए, हम .superfine (फ़ॉन्ट-आकार: 9pt;) ... या कोई अन्य उपयुक्त मान लिख सकते हैं। अन्य तत्व जैसे पाद या टैग हैं।

जो समान कार्य से लाभान्वित हो सकते हैं।

अंतिम परिणाम

शरीर (पृष्ठभूमि: सफ़ेद; फ़ॉन्ट-आकार: 12pt;) # मेनू (प्रदर्शन: कोई नहीं;) # श्रावक, # महाद्वीप (चौड़ाई: ऑटो; मार्जिन: 0 5%; गद्दी: 0; सीमा: 0; नाव; कोई नहीं; महत्वपूर्ण; ; रंग: काला; पृष्ठभूमि: पारदर्शी कोई नहीं;) div # सामग्री (मार्जिन-वाम: 10%; गद्दी-शीर्ष: 1em; सीमा-शीर्ष: 1px ठोस # 930;) div # मस्तूल (मार्जिन-नीचे: -8px); div # मस्तूल img (वर्टिकल-एलाइन: बॉटम;) a: लिंक, a: विज़िट किया गया (कलर: # 520; बैकग्राउंड: ट्रांसपेरेंट; फॉन्ट-वेट: बोल्ड; टेक्स्ट-डेकोरेशन: अंडरलाइन;) #content a: लिंक: after। # कंटेंट a: विज़िट किया गया: के बाद (सामग्री: "(" attr (href) ")"; फ़ॉन्ट-आकार: 90%;) # कंटेंट a: के बाद (सामग्री: "(//www.ististapart.com) attr (href) ) ")";)