 |
| HTML and CSS tutorial for beginners in Hindi |
हेलो फ्रेंड्स, KTL के HTML और CSS tutorial में फिर स्वागत है। आज हम लेसन ३८ सीखेंगे।
पिछले लेसन में हम ने देखा की CSS float property का उपयोग करके वेब पेज का layout बनाना सीखा।
आज हम CSS overflow property सीखेंगे।
CSS overflow property
हमने देखा हैं की CSS का उपयोग करके यह बता सकते हैं की एक element डिस्प्ले करने के लिए वेब पेज में कितनी जगह दी है। अगर उस element का content इस साइज से ज्यादा हो तो पूरा content डिस्प्ले नहीं हो सकता है। जब ऐसा होता है तब CSS overflow property यह बताती है की element के content को कैसा डिस्प्ले करे।हम हमारे स्क्रिप्ट में overflow property का उपयोग करेंगे। एक नयी Notepad फाइल ओपन कीजिये। उस में heading के लिए यह स्टाइल लिखिए।
<style>
.heading1 {
text-align: center;
color:red;
}
</style>
Overflow:visible
Paragraph के लिए यह स्टाइल लिखिए।.para1 {
background-color: rgb(200 200 200);
width: 35vw;
height: 9vw;
border: 0.5vw solid red;
overflow:visible;
}
इस में हमने paragraph डिस्प्ले करने के लिए height दी है 9vw और width दी है 35vw। अगर हमने दिया हुआ सारा टेक्स्ट इस साइज में नहीं बैठता है तो वह हमने दी हुई साइज के बहार overflow होगा और जो टेक्स्ट overflow हुआ है वह डिस्प्ले भी होता क्योंकि हमने overflow:visible दिया है।
Overflow:hidden
अब हम overflow: hidden देखते हैं। यहाँ एक ही फरक होता है। जो टेक्स्ट overflow होता है वह डिस्प्ले ही नहीं होता है। ऊपर दिए हुवे "para1" की स्टाइल को कॉपी कीजिये। नए स्टाइल को "para2" नाम दीजिये। इस में एक ही change कीजिये। overflow:visible की जगह overflow: hidden दीजिये।Body में पहले paragraph में कुछ भी change मत कीजिये।
दुसरे paragraph के लिए स्टाइल लिखिए। इस में दिया हुआ टेक्स्ट आप PDF फाइल से कॉपी कर सकते हैं।
<p class="para1">
इसी paragraph को कॉपी कीजिये और उसके लिए
<p class="para2">
दीजिये।
इस फाइल को "Lesson-38-1" और "Lesson-38-1.html" के नाम से save कीजिये।
 |
| आकृति ३८-१ CSS overflow property - visible and hidden |
HTML document पर डबल क्लिक कीजिये और आउटपुट देखिये।
 |
| आकृति ३८-२ CSS overflow property - visible and hidden |
इस में हम दोनों तरह के overflow देख सकते हैं - एक में overflow किया हुआ टेक्स्ट डिस्प्ले हुआ है और में वह डिस्प्ले नहीं हुआ है।
Overflow: scroll
अब हम overflow: scroll देखेंगे। Overflow: scroll देने से horizontal scrollbar और vertical scrollbar डिस्प्ले होते हैं और हम scroll कर सकते हैं।Overflow: auto
यह value देने से scrollbars अगर overflow हुआ तो ही डिस्प्ले होते, अगर overflow नहीं हुआ तो डिस्प्ले नहीं होते। इसे हम हमारे कोड में लिखेंगे। एक नयी Notepad फाइल ओपन कीजिये और इसमें lesson-38-1 का सारा कोड कॉपी कीजिये। style में para2 के लिए स्टाइल लिखिए वह डिलीट कीजिये। अब केवल para1 की स्टाइल है। इसमें overflow property में visible की जगह scroll लिखिए। Body में हमने para2 स्टाइल के लिए तीसरा paragraph लिखा है उसे डिलीट कीजिये। हमारा कोड ऐसा दिखेगा। |
| आकृति ३८-३ CSS overflow - scroll |
इस फाइल को "Lesson-38-2" और "Lesson-38-2.html" के नाम से save कीजिये। HTML document पर डबल क्लिक कीजिये और आउटपुट देखिये।
 |
| आकृति ३८-४ CSS overflow - scroll |
हमने element डिस्प्ले करने के लिए वेब पेज में जो height और width दी है उसे एक लाल बॉर्डर डिस्प्ले हुई है। हमारा दिया हुआ टेक्स्ट इस में overflow होता है इस लिए scroll bar आया है।
Overflow-x and overflow-y
याद रखिये: Overflow की सब प्रॉपर्टीज overflow-x देने से horizontally apply होती है। उदाहरण के लिएoverflow-x: scroll; या overflow-x: visible; या overflow-x: hidden;
ऐसे ही overflow-y देने से overflow की प्रॉपर्टीज vertically apply होती है।
Important Points:
१. CSS overflow property या बताती है की एक element का content overflow होने पर कैसे डिस्प्ले करे।२. इस में तीन प्रकार हैं - overflow visible: यह overflow होने पर भी डिस्प्ले करता है। Overflow hidden देने पर जो content overflow होता है वह डिस्प्ले नहीं करता है।
३. Overflow scroll वेब पेज में scroll bar डिस्प्ले करता है।
लेसन ३७ लेसन ३९
