मेरा सीएसएस बूटस्ट्रैप सीएसएस

Question

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

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

मैं इस प्राथमिकता क्रम में मेरी सीएसएसएस करना चाहते हैं:

• MyApp
• GWT
• बूटस्ट्रैप

मैं बिना मेरे * .gwt.xml में उन्हें ऑर्डर करने की कोशिश की सफलता:

<stylesheet src="css/gwt-bootstrap.css" /> 
<stylesheet src="css/bootstrap.min.css" /> 
<stylesheet src="gwt/clean/clean.css" /> 
<stylesheet src="MyApp.css" /> 

क्या क्या मैं कर सकता हूँ?

Answer 1

शैलियों का उपयोग कर की प्राथमिकता अधिक से प्रेरित है HTML में शामिल करने पर केवल एक आदेश की तुलना में जटिल एल्गोरिदम। सीएसएस शैली को सबसे विशिष्ट चयन नियम के साथ चुना जाता है, जहां इनलाइन नियमों को बाहरी रूप से संलग्न किया जाता है, फिर आईडी द्वारा चयन किया जाता है, फिर वर्ग और टैग नाम के साथ अंत चयन में। उदाहरण के लिए, पैरा <p id="xyz" class="xyz"> नियमों के आदेश की स्वतंत्र रूप से लाल हो जाएगा:

.xyz { 
    color: blue; 
} 
#xyz { 
    color: red; 
} 

अगर वहाँ, एक ही चयन प्रकार के साथ दो नियम संख्या मामला नहीं है। तो, चयन .xyz .abc "मजबूत" है तो .qwerty।

दो नियमों प्रत्येक श्रेणी में संख्या की दृष्टि से बराबर चयन है, तो, बहुत अंत क्रम में ध्यान में रखा जाता है ...

तुम भी !important निर्देश के साथ एक अलग आदेश मजबूर कर सकते हैं।

Read more इसके बारे में "सीएसएस विशिष्टता" कीवर्ड के साथ।

Answer 2

शैलियों के काम को ओवरराइड करने का तरीका आखिरी एक भारित जीत है।

तो आप इस तरह के और अधिक स्टाइलशीट क्रम कुछ ऑर्डर करने के लिए चाहते हैं तो आप तो बूटस्ट्रैप सीएसएस ओवरराइड करने के लिए GWT-बूटस्ट्रैप से शैलियों उम्मीद कर रहे हैं:

<stylesheet src="css/bootstrap.min.css" /> 
<stylesheet src="gwt/clean/clean.css" /> 
<stylesheet src="css/gwt-bootstrap.css" /> 
<stylesheet src="MyApp.css" />