एम्बेडेड विजेट की शैलियों को कैसे संरक्षित किया जाए?

Question

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

शामिल पृष्ठ वास्तव में एक टिप्पणी 'विजेट' है (अपनी स्वयं की .css फ़ाइल के साथ, लगभग 30 लाइनें, ज्यादा नहीं) और ऊंचाई और चौड़ाई लचीलापन होना चाहिए।

पीएचपीinclude अब तक सबसे अच्छा समाधान था, लेकिन मैं अपने बाल/अशक्त (जोड़ने/छोड़कर/शैलियों) फिट करने के लिए किसी भी संभावित मेजबान वेब पेज अपने सीएसएस फ़ाइल का समायोजन खो दिया है।

_{उदाहरण: मेजबान पेज img सीमाओं मैं उन्हें विजेट के style.css से शून्य पर है, H3 के लिए एक ही, P, और इतने पर के लिए शैलियों की है}
है।

कैसे आप मेजबान पेज शैलियों से प्रभावित होने से एक विजेट स्टाइलशीट, आइफ्रेम का उपयोग कर के बगल में रक्षा करेगा?

Answer 1

आप सीएसएस जानते हैं एक क्लाइंट-साइड बात है, यह PHP के बारे में नहीं जानता है और सर्वर पर पृष्ठ कैसे उत्पन्न हुआ है।

आप अंतिम जिसके परिणामस्वरूप HTML पर ध्यान केंद्रित करने और टैग और वर्गों और आईडी को फिर से परिभाषित को अपने वांछित शैली नियमों सही तत्वों को लागू करने के लिए मिला है।

आप एक अद्वितीय ID या वर्ग के साथ एक div में वह हिस्सा आसपास के द्वारा सीएसएस नियमों के दायरे को सीमित करने और अपने CSS चयनकर्ताओं में इसका इस्तेमाल करते हैं तो वे कहते हैं कि div के बाहर तत्वों पर लागू नहीं होता कर सकते हैं।

या आप आप मजबूत नियमों का उपयोग करने के लिए अपने अन्य तत्वों के लिए शामिल किए गए लोगों को ओवरराइड करने के लिए है ऐसा नहीं कर सकते हैं। जो थोड़ा गन्दा होगा, लेकिन आप कई तकनीकों का उपयोग करके तत्व पर लागू शैलियों को ओवरराइड कर सकते हैं! महत्वपूर्ण या अधिक चयनकर्ता भाग हैं।

उदाहरण के लिए, नीचे दिए गए नमूनों की दोनों में, दूसरा नियम पहले एक के ऊपर लिख देगा:

#comments .link { color: red; } /* Included page rule */ 
#header .link { color: blue !important; } 

या

#comments .link { color: red; } /* Included page rule */ 
#header div a.link { color: blue; } 

Answer 2

आईडी के साथ एक div में अपने विजेट कोड को देखने का प्रयास करें। फिर उस चयनकर्ता के साथ विजेट में उपयोग किए गए प्रत्येक सीएसएस चयनकर्ता को उपसर्ग करें।

पूर्व।

<div id="widget"><p class="nav">hello</p></div> 

बजाय

,

.nav{ 
// styles 
} 

कर

#widget.nav{ 
// styles 
} 

Answer 3

आप अपने शामिल कोड पर एक मिनी सीएसएस रीसेट लागू करने के लिए चाहते हो सकता है। एक विशिष्ट आईडी में अपने कोड के चारों ओर है, तो जैसे:

<div id="widget"> 
    <!--your code here--> 
</div> 

अब, यह अंदर सब कुछ करने के लिए रीसेट लागू एरिक मेयर की तरह एक बुनियादी सीएसएस रीसेट का उपयोग कर, यहाँ उपलब्ध है: http://meyerweb.com/eric/tools/css/reset/

अब, अपने खुद के सीएसएस लागू । लगभग सभी बाहरी सीएसएस मिटा दिए जाएंगे, और आपका आवेदन लागू होगा।

div {/*rules*/}; 
p {/*rules*/}; 

और इतने पर:

Answer 4

अगर मैं सही ढंग से समझ, अपनी शामिल पेज जैसे कुछ सीएसएस नियम हैं।

आप सबसे सामान्य लोगों से अपने CSS चयनकर्ताओं का बदलना चाहिए सबसे खास लोगों को (उन्हें इस क्रम में उपयोग करें: id, class, child-selector) से (div सभी पेज में divs का चयन करता है) अपने नियम केवल करने के लिए लागू करने के लिए आपको आपके शामिल तत्व।

उदाहरण के लिए, मान लें कि आपका शामिल पेज एक div में लपेटा जाता है, PHP कोड होगा:

<div id="my_page"> 
    <?php include "myPage.php"; ?> 
</div> 

उसके बाद पृष्ठ आईडी के साथ तत्व के बच्चों के लिए केवल उल्लेख करना चाहिए के लिए अपने सभी नियम my_page:

के बजाय

div {/*rules*/}; 

आप होगा

#my_page div {/*rules*/}; 

Answer 5

सीएसएस शैलियाँ इस तरह प्राथमिकता देते हैं:

1. ब्राउज़र डिफ़ॉल्ट
2. बाहरी शैली पत्रक
3. आंतरिक शैली पत्रक (सिर अनुभाग में)
4. इनलाइन शैली (एक HTML तत्व के अंदर)

कितना सीएसएस आप लागू करने की आवश्यकता के आधार पर आप "सिर" टैग पर यह रिट सकता है।
आशा है कि सुझाव मदद करता है।