Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> CSS

CSS से पेजिनेशन नियंत्रित करना

पेजिनेशन नियंत्रित करने के लिए page-break-before, page-break-after, और page-break-inside प्रॉपर्टीज का उपयोग करें।

page-break-before और page-break-after दोनों auto, always, avoid, left, and right कीवर्ड्स स्वीकार करते हैं।

कीवर्ड auto डिफ़ॉल्ट है; यह ब्राउज़र को आवश्यकतानुसार पेज ब्रेक जेनरेट करने देता है। कीवर्ड always एलिमेंट से पहले या बाद में पेज ब्रेक फोर्स करता है, जबकि avoid एलिमेंट के तुरंत पहले या बाद में पेज ब्रेक को दबा देता है। left and right कीवर्ड्स एक या दो पेज ब्रेक फोर्स करते हैं, ताकि एलिमेंट लेफ्ट-हैंड या राइट-हैंड पेज पर रेंडर हो।

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

उदाहरण

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

<style>
  <!--
    h1 {
      page-break-before: right;
    }
    h2 {
      page-break-after: avoid;
    }
  -->
</style>

व्याख्या: h1 (चैप्टर) हमेशा राइट पेज पर शुरू होगा। h2 (सेक्शन) के बाद पेज ब्रेक नहीं होगा।

  1. CSS और JavaScript से कमिंग सून पेज कैसे बनाएं? CSS और JavaScript से कमिंग सून पेज कैसे बनाएं?

    CSS और JavaScript से कमिंग सून पेज बनाने के लिए, कोड निम्नानुसार है -उदाहरण<!DOCTYPE html> <html> <style>    body {       height: 100vh;       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;       margin

  1. CSS से वेबसाइट के लिए अबाउट/अबाउट अस पेज कैसे बनाएं? CSS से वेबसाइट के लिए अबाउट/अबाउट अस पेज कैसे बनाएं?

    उदाहरण अबाउट पेज बनाने के लिए, निम्न कोड का उपयोग करें: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    html {       box-sizing: border-box;    }  

  1. CSS pointer-events प्रॉपर्टी के साथ माउस और टच इंटरैक्शन नियंत्रित करना CSS pointer-events प्रॉपर्टी के साथ माउस और टच इंटरैक्शन नियंत्रित करना

    परिचय CSS pointer-events प्रॉपर्टी का उपयोग करके, हम नियंत्रित कर सकते हैं कि कोई एलिमेंट माउस और टच इवेंट्स पर प्रतिक्रिया करता है या नहीं। यह ओवरले, डिसेबल्ड स्टेट्स, और जटिल लेयर्ड इंटरफेस के लिए उपयोगी है। सिंटैक्स pointer-events: auto | none; मान मान विवरण