कसरी सीएसएस संग आईफ्रेम स्टाइल

UndFanding how IFrames वेबसाइट डिजाइनमा काम गर्दछ

जब तपाइँ आफ्नो HTML मा एक तत्व इम्बेड गर्नुहुन्छ, तपाइँसँग सीएसएस शैलीहरू थप गर्न दुईवटा अवसरहरू छन्:

• तपाईं IFRAME आफ्नै शैली गर्न सक्नुहुन्छ।
• तपाईं पृष्ठ भित्र IFRAME (निश्चित परिस्थितिहरूमा) शैली गर्न सक्नुहुन्छ।

IFRAME तत्व को शैली मा सीएसएस को उपयोग गरेर

तपाईंको आईफ्रेम स्टाइल गर्दा तपाईलाई विचार गर्नु पर्ने पहिलो कुरा IFRAME नै हो। जबकि अधिकांश ब्राउजरहरूले धेरै अतिरिक्त शैलीहरू बिना आइडियाहरू समावेश गर्दछ, यो अझै पनि राम्रो शैली हो कि केही शैलियहरू तिनीहरूलाई उनीहरूको सहि राख्न राख्नको लागि।

यहाँ केही सीएसएस शैलीहरू छन् जुन म मेरो आइजरमा समावेश गर्दछु।

• मार्जिन: 0;
• padding: 0;
• किनारा: कुनै पनि होइन;
• चौडाई: मान ;
• उचाई: मूल्य ;

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

HTML5 ले स्क्रॉल बारहरू हटाउन ओभरफ्लो सम्पत्ति प्रयोग गर्ने सिफारिस गर्दछ, तर त्यो विश्वसनीय छैन। त्यसैले यदि तपाइँ स्क्रोल पट्टीहरू हटाउन वा परिवर्तन गर्न चाहनुहुन्छ भने, तपाईंले आफ्नो आइफ्रेममा स्क्रोलिङ विशेषता प्रयोग गर्नुपर्दछ। स्क्रोलिङ विशेषता प्रयोग गर्न, यसलाई कुनै अन्य विशेषताको रूपमा थप्नुहोस् र त्यसपछि तीन मानहरू मध्ये एक छान्नुहोस्: हो, होइन, वा स्वत:। हो, ब्राउजरलाई सधैँ स्क्रोल बार समावेश गर्नका लागि पनि भन्नु भए तापनि उनीहरूलाई आवश्यक पर्दैन। कुनै पनि स्क्रोल पट्टीहरू हटाउन भन्नुपर्दछ कि आवश्यक छ वा छैन।

स्वत पूर्वनिर्धारित हो र स्क्रॉल पट्टीहरू समावेश हुँदा तिनीहरू आवश्यक पर्दछ र तिनीहरूलाई हटाउँदा तिनीहरू हटाउँदछ।

यहाँ स्क्रोलिङ विशेषताको साथ स्क्रोलिङ कसरी बन्द गर्ने:

स्क्रोलिङ = "होइन" >
यो एक आईफ्रेम हो।

HTML5 मा स्क्रॉलिङ बन्द गर्नको लागि तपाईंले ओभरफ्लो सम्पत्ति प्रयोग गर्नुपर्दछ। तर तपाईंले यी उदाहरणहरूमा देख्न सक्नुहुने छ भने यसले अहिले सम्म सबै ब्राउजरहरूमा विश्वसनीय काम गर्दैन।

यहाँ छ कसरी तपाईं ओभरफ्लो सम्पत्तिको साथमा सबै समय स्क्रॉल गर्न सक्नुहुन्छ।

शैली = "ओभरफ्लो: स्क्रोल;" >
यो एक आईफ्रेम हो।

ओवरफ्लो सम्पत्तिको साथ स्क्रोलिङ बन्द गर्न कुनै तरिका छैन ।

धेरै डिजाईजरहरू उनीहरूको आइड्रेम पृष्ठको पृष्ठभूमिसँग मिश्रण गर्न चाहन्छन् जुन उनीहरू यसमा छन् कि पाठकहरूलाई थाहा छैन कि आइडियाहरू त्यहाँ छन्। तर तपाइँ शैलहरू पनि थप्न तिनीहरूलाई रोक्न सक्नुहुन्छ। किनाराहरू समायोजन गर्दै आइतरेमले देखाउँछ र अझ धेरै पढ्न सजिलो छ। किनारा शैली शैलीमा सीमा सीमा शैली गुण (वा यो सम्बन्धित सीमा-माथि, किनारा-दायाँ, किनारा-बायाँ, र बोर्डर-तल गुणहरू) प्रयोग गर्नुहोस्।

iframe {
सीमा-माथि: # c00 1px dotted;
सीमाना-दायाँ: # c00 2px dotted;
सीमा-बायाँ: # c00 2px dotted;
border-bottom: # c00 4px dotted;
}

तर तपाईं आफ्नो शैलीको लागि स्क्रोलिङ र सीमानाहरूसँग रोक्न हुँदैन। तपाईं आफ्नो आईफ्रेममा धेरै सीएसएस शैलीहरू लागू गर्न सक्नुहुन्छ। यो उदाहरण आइफ्रेम छायाँ, गोलाकार कोनेहरू, र यसलाई 20 डिग्री घुमाउनको लागि CSS3 शैलीहरू प्रयोग गर्दछ।

iframe {
मार्जिन-शीर्ष: 20px;
margin-bottom: 30px;

-Moz-border-radius: 12px;
-वेबिट-सीमा-त्रिज्या: 12px;
सीमा-रेडियस: 12px;

-मोड-बक्स-छाया: 4px 4px 14px # 000;
-बाइट-बक्स-छाया: 4px 4px 14px # 000;
बक्स-छाया: 4px 4px 14px # 000;

-मोज-परिवर्तन: घुमाउनुहोस् (20 डीडी);
वेबकिट-परिवर्तन: घुमाउनुहोस् (20 डीडी);
-ओ-परिवर्तन: घुमाउनुहोस् (20 डीडी);
-एमएम-परिवर्तन: घुमाउनुहोस् (20 डीडी);
फिल्टर: progid: DXImageTransform.Microsoft.BasicImage (घूर्णन = .2);
}

आइफ्रेम सामग्री स्टाइल गर्दै

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

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