सीएसएस समावेशन समस्या - एचटीएमएल, सीएसएस

मेरे पास एक सीएसएस फाइलों के साथ एक जेएसपी पेज है।

इसमें, प्रत्येक सीएसएस में टेबल के लिए अलग-अलग परिभाषित शैलियों हैं।

समस्या यह है कि मुझे अलग-अलग तालिकाओं के लिए उन अलग-अलग शैलियों की आवश्यकता है और मैं उन्हें अलग करने में असमर्थ हूं और मेनू की सीएसएस शैलियों को नई सीएसएस शैली के साथ ओवरलैप किया जाता है।

मैं इस समस्या से कैसे बच सकता हूं; menu.jsp को दूसरे पृष्ठ में शामिल किया गया है। शैलियों को ओवरराइड करने से बचने का कोई तरीका है?

उत्तर:

उत्तर № 1 के लिए 7

अपने सीएसएस संरचना को एक बेहतर पदानुक्रम दें।

#container #sectionid .class{}

के बजाय

.class{}

एक उदाहरण यह होगा:

<h2>Page Title</h2>
<div id="container">
<div id="news">
<h2>News Section</h2>
<div class="month" id="january">
<h2>News Article 1</h2>
</div>
<div class="month" id="february">
<h2>News Article 2</h2>
</div>
</div>
</div>

h2 {color:red;} < This would set all <h2> tags to be red
#container h2 {color: red;} < This would set all <h2> tags inside the container div to red
#container #news h2 {color: red;} < This would set all <h2> tags inside the news div to red
#container #news .month h2 {color: red;} < This would set all <h2> tags inside month divs to red
#container #news .month #january h2 {color: red;} < This would only set the <h2> tag inside the january div to red.

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

h2 {font-size: 2em;}
#container #news .month #january h2 {color: red;}
#container #news .month #february h2 {color: blue;}

जवाब के लिए 2 № 2

यह कैस्केडिंग स्टाइल शीट के व्यवहार का हिस्सा है - आप कई नियम घोषित कर सकते हैं और वे क्रम में लागू होते हैं।

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


जवाब के लिए 2 № 3

अलग-अलग तत्वों के लिए शैलियों को अलग करने का सामान्य तरीका उनको उन मूल कंटेनरों में रखना है जिनके पास एक निश्चित वर्ग है।

इस तरह की एक HTML संरचना पर विचार करें:

<div class="area1">
<table ...... >
</div>

<div class="area2">
<table ...... >
</div>

आपका सीएसएस उन क्षेत्रों को लक्षित करेगा:

.area1 table { ... } /* Definitions for tables in area1 */
.area1 table td {  ... }

.area2 table {  ... }  /* Definitions for tables in area2 */
.area2 table td { ...  }

जवाब के लिए 2 № 4

जब आप एकाधिक सीएसएस लोड करते हैं, और आपके पास प्रत्येक में एक ही सीएसएस परिभाषित होता है, तो ओवरराइडिंग से बचने का कोई तरीका नहीं है।

आप प्रत्येक तालिका के लिए एक अलग आईडी / कक्षा को परिभाषित करना चाह सकते हैं।

एकमात्र अन्य समाधान है, अगर आप किसी भी तरह से कर सकते हैंपहचानें / निर्दिष्ट करें कि प्रति jsp के लिए केवल एक टेबल-शैली का उपयोग किया जाता है। तो आप केवल आवश्यक सीएसएस लोड करने के लिए jsp का उपयोग कर सकते हैं और अन्य को अनदेखा कर सकते हैं (या उन्हें एक अलग क्रम में लोड कर सकते हैं)


जवाब के लिए 0 № 5

या तो बस उन सीएसएस फ़ाइलों को शामिल न करें या तालिका को एक अद्वितीय आईडी या क्लासनाम दें ताकि आप इसे सीएसएस में लगा सकें।

यदि आप विशेष रूप से एक अनूठी तालिका को संभालना चाहते हैं, तो इसका उपयोग करें id:

<table id="mySpecialTable">
...
</table>

इस आईडी पर शुरू होने वाले सीएसएस नियम के साथ #:

#mySpecialTable {
border: 2px solid red;
}

या यदि आप "कई तालिकाओं के बीच शैली साझा करना चाहते हैं, तो इसका उपयोग करें class:

<table class="mySpecialTable">
...
</table>

इस कक्षा नाम से शुरू होने वाले सीएसएस नियम के साथ .:

.mySpecialTable {
border: 2px solid red;
}

यह भी देखें:


संबंधित सवाल
सबसे लोकप्रिय