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