Skip to main content

सीएसएस के साथ IFrames कैसे स्टाइल करें

Integrating AMP into PWA (GDD India '17) (जून 2026)

Integrating AMP into PWA (GDD India '17) (जून 2026)
Anonim

जब आप अपने एचटीएमएल में एक तत्व एम्बेड करते हैं, तो आपके पास सीएसएस शैलियों को जोड़ने के दो अवसर होते हैं:

  • आप शैली बना सकते हैं

    IFRAME अपने आप।

  • आप अंदर के पेज को स्टाइल कर सकते हैं

    IFRAME (खास शर्तों के अन्तर्गत)।

IFRAME तत्व को स्टाइल करने के लिए सीएसएस का उपयोग करना

आपके आईफ्रेम को स्टाइल करते समय पहली बात आपको विचार करनी चाहिए

IFRAME

  • अपने आप। जबकि अधिकांश ब्राउज़रों में बहुत सी अतिरिक्त शैलियों के बिना iframes शामिल हैं, फिर भी उन्हें लगातार बनाए रखने के लिए कुछ शैलियों को जोड़ने का एक अच्छा विचार है। यहां कुछ सीएसएस शैलियों हैं जो मैं हमेशा अपने आईफ्रेम पर शामिल करता हूं:

    मार्जिन: 0;

  • पैडिंग: 0;

  • सीमा: कोई नहीं;

  • चौड़ाई: मूल्य ;

  • ऊंचाई: मूल्य ;

उसके साथ

चौड़ाई

तथा

ऊंचाई

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

बाढ़

स्क्रॉल बार को हटाने के लिए संपत्ति, लेकिन यह विश्वसनीय नहीं है। तो यदि आप स्क्रॉल बार को हटाना या बदलना चाहते हैं, तो आपको इसका उपयोग करना चाहिए

स्क्रॉल

आपके आईफ्रेम पर भी विशेषता है। का उपयोग करने के लिए

स्क्रॉल

विशेषता, इसे किसी भी अन्य विशेषता की तरह जोड़ें और फिर तीन मानों में से एक चुनें:

हाँ

,

नहीं

, या

ऑटो

हाँ

ब्राउज़र को हमेशा स्क्रॉल बार शामिल करने के लिए कहता है, भले ही उनकी आवश्यकता न हो।

नहीं

सभी स्क्रॉल बार को हटाने की आवश्यकता है या नहीं।

ऑटो

डिफ़ॉल्ट है और स्क्रॉल बार शामिल हैं जब उनकी आवश्यकता होती है और जब वे नहीं होते हैं तो उन्हें हटा दें। यहां स्क्रॉलिंग को बंद करना है

स्क्रॉलविशेषता: स्क्रॉल = "नहीं">
यह एक आईफ्रेम है।

एचटीएमएल 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);}

इफ्रेम सामग्री स्टाइलिंग

किसी आईफ्रेम की सामग्री को स्टाइल करना किसी अन्य वेब पेज को स्टाइल करना है। परन्तु आप पृष्ठ को संपादित करने के लिए उपयोग होना चाहिए । यदि आप पृष्ठ को संपादित नहीं कर सकते हैं (उदाहरण के लिए, यह किसी अन्य साइट पर है)।

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