यह समझना कि IFrames वेबसाइट डिज़ाइन में कैसे काम करते हैं
जब आप अपने एचटीएमएल में एक तत्व एम्बेड करते हैं, तो आपके पास सीएसएस शैलियों को जोड़ने के दो अवसर होते हैं:
- आप IFRAME को स्वयं शैलीबद्ध कर सकते हैं।
- आप IFRAME (कुछ स्थितियों के तहत) के अंदर पृष्ठ को शैलीबद्ध कर सकते हैं।
IFRAME तत्व को स्टाइल करने के लिए सीएसएस का उपयोग करना
आपके आईफ्रेम को स्टाइल करते समय पहली बात यह है कि IFRAME स्वयं ही है। जबकि अधिकांश ब्राउज़रों में बहुत सी अतिरिक्त शैलियों के बिना iframes शामिल हैं, फिर भी उन्हें लगातार बनाए रखने के लिए कुछ शैलियों को जोड़ने का एक अच्छा विचार है।
यहां कुछ सीएसएस शैलियों हैं जो मैं हमेशा अपने आईफ्रेम पर शामिल करता हूं:
- मार्जिन: 0;
- पैडिंग: 0;
- सीमा: कोई नहीं;
- चौड़ाई: मूल्य ;
- ऊंचाई: मूल्य ;
मेरे दस्तावेज़ में फिट आकार के लिए सेट चौड़ाई और ऊंचाई के साथ। यहां कोई फ्रेम नहीं है जिसमें कोई शैली नहीं है और केवल मूलभूत स्टाइल के साथ एक है। जैसा कि आप देख सकते हैं, ये शैलियों ज्यादातर आईफ्रेम के चारों ओर सीमा को हटाते हैं, लेकिन वे यह भी सुनिश्चित करते हैं कि सभी ब्राउज़र उसी मार्जिन, पैडिंग और आयामों के साथ आईफ़्रेम प्रदर्शित करते हैं।
एचटीएमएल 5 अनुशंसा करता है कि आप स्क्रॉल बार को हटाने के लिए ओवरफ्लो प्रॉपर्टी का उपयोग करें, लेकिन यह विश्वसनीय नहीं है। इसलिए यदि आप स्क्रॉल बार को हटाना या बदलना चाहते हैं, तो आपको अपने आईफ्रेम पर स्क्रॉलिंग विशेषता का भी उपयोग करना चाहिए। स्क्रॉलिंग विशेषता का उपयोग करने के लिए, इसे किसी भी अन्य विशेषता की तरह जोड़ें और फिर तीन मानों में से एक चुनें: हाँ, नहीं, या ऑटो। हां ब्राउज़र को हमेशा स्क्रॉल बार शामिल करने के लिए कहता है, भले ही उनकी आवश्यकता न हो। सभी स्क्रॉल बार को हटाने की आवश्यकता नहीं है या नहीं।
ऑटो डिफ़ॉल्ट है और जब स्क्रॉल बार की आवश्यकता होती है तो उन्हें शामिल किया जाता है और जब वे नहीं होते हैं तो उन्हें हटा देता है।
स्क्रॉलिंग विशेषता के साथ स्क्रॉलिंग को बंद करने का तरीका यहां बताया गया है:
स्क्रॉलिंग = "नहीं" >
यह एक आईफ्रेम है।
एचटीएमएल 5 में स्क्रॉलिंग बंद करने के लिए आपको अतिप्रवाह संपत्ति का उपयोग करना होगा। लेकिन जैसा कि आप इन उदाहरणों में देख सकते हैं, यह अभी तक सभी ब्राउज़रों में भरोसेमंद काम नहीं करता है।
यहां बताया गया है कि आप अतिप्रवाह संपत्ति के साथ हर समय स्क्रॉलिंग कैसे चालू करेंगे:
शैली = "अतिप्रवाह: स्क्रॉल;" >
यह एक आईफ्रेम है।
ओवरफ्लो संपत्ति के साथ पूरी तरह से स्क्रॉलिंग को बंद करने का कोई तरीका नहीं है ।
कई डिज़ाइनर चाहते हैं कि उनके आइफ्रेम उस पृष्ठ की पृष्ठभूमि के साथ मिश्रित हों, जिससे पाठकों को पता न हो कि iframes भी वहां हैं। लेकिन आप उन्हें बाहर खड़े करने के लिए शैलियों को भी जोड़ सकते हैं। सीमाओं को समायोजित करना ताकि आईफ्रेम अधिक आसानी से दिखाया जा सके। सीमाओं की शैली के लिए बस सीमा शैली संपत्ति (या इसके संबंधित सीमा-शीर्ष, सीमा-दाएं, सीमा-बाएं, और सीमा-नीचे गुण) का उपयोग करें:
iframe {
सीमा-शीर्ष: # सी 00 1 पीएक्स बिंदीदार;
सीमा-दाएं: # सी 00 2 पीएक्स बिंदीदार;
सीमा-बाएं: # सी 00 2 पीएक्स बिंदीदार;
सीमा-तल: # सी 00 4 पीएक्स बिंदीदार;
}
लेकिन आपको अपनी शैलियों के लिए स्क्रॉलिंग और सीमाओं से नहीं रोकना चाहिए। आप अपने आईफ्रेम पर कई अन्य सीएसएस शैलियों को लागू कर सकते हैं। यह उदाहरण आईफ़्रेम को छाया, गोलाकार कोनों देने के लिए CSS3 शैलियों का उपयोग करता है, और इसे 20 डिग्री घुमाता है।
iframe {
मार्जिन टॉप: 20 पीएक्स;
मार्जिन-तल: 30 पीएक्स;
-मोज़-सीमा-त्रिज्या: 12 पीएक्स;
-वेबिट-सीमा-त्रिज्या: 12 पीएक्स;
सीमा-त्रिज्या: 12 पीएक्स;
-मोज़-बॉक्स-छाया: 4 पीएक्स 4 पीएक्स 14 पीएक्स # 000;
-वेबिट-बॉक्स-छाया: 4 पीएक्स 4 पीएक्स 14 पीएक्स # 000;
बॉक्स-छाया: 4 पीएक्स 4 पीएक्स 14 पीएक्स # 000;
-moz-परिणत: बारी बारी से (20deg);
-webkit-परिणत: घुमाएँ (20deg);
-ओ-परिणत: घुमाएँ (20deg);
एमएस-परिणत: बारी बारी से (20deg);
फिल्टर: ProgID: DXImageTransform.Microsoft.BasicImage (रोटेशन = .2);
}
इफ्रेम सामग्री स्टाइलिंग
किसी आईफ्रेम की सामग्री को स्टाइल करना किसी अन्य वेब पेज को स्टाइल करना है। लेकिन, आपके पास पृष्ठ को संपादित करने की पहुंच होनी चाहिए । यदि आप पृष्ठ को संपादित नहीं कर सकते हैं (उदाहरण के लिए, यह किसी अन्य साइट पर है)।
यदि आप पृष्ठ को संपादित कर सकते हैं, तो आप दस्तावेज़ में एक बाहरी स्टाइल शीट या स्टाइल जोड़ सकते हैं जैसे कि आप अपनी साइट पर किसी भी अन्य वेब पेज को स्टाइल करेंगे।