मेरा सीएसएस http://sillybean.net/css/seaglass.css पर स्थित है और मैं इस सीएसएस का उपयोग केवल HTML तालिका में से एक के लिए करना चाहता हूं, उसी पृष्ठ पर मेरे पास एकाधिक HTML टेबल हैं इसलिए मैं नहीं चाहता अन्य एचटीएमएल टेबल को प्रभावित करने के लिए। http://sillybean.net/css/seaglass.css पर कम संशोधन के साथ ऐसा करने का सबसे तेज़ तरीका क्या है?किसी अन्य HTML तालिका को प्रभावित किए बिना HTML तालिका के लिए सीएसएस का उपयोग करने का सबसे तेज़ तरीका
क्या आप उस तालिका में केवल एक कक्षा लागू कर सकते हैं जिसे आप प्रभावित करना चाहते हैं, फिर अपने सीएसएस में उस वर्ग का उपयोग करें?
अपने HTML में, आप रख सकते हैं:
<table class="mytable">
... CONTENT OF THE TABLE, AS NORMAL ...
</table>
और फिर, अपने सीएसएस करने के लिए वर्ग चयनकर्ता जोड़ें:
table.mytable { border-collapse: collapse; border: 1px solid #839E99;
background: #f1f8ee; font: .9em/1.2em Georgia, "Times New Roman", Times, serif; color: #033; }
.mytable caption { font-size: 1.3em; font-weight: bold; text-align: left; padding: 1em 4px; }
.mytable td,
.mytable th { padding: 3px 3px .75em 3px; line-height: 1.3em; }
.mytable th { background: #839E99; color: #fff; font-weight: bold; text-align: left; padding-right: .5em; vertical-align: top; }
.mytable thead th { background: #2C5755; text-align: center; }
.mytable .odd td { background: #DBE6DD; }
.mytable .odd th { background: #6E8D88; }
.mytable td a,
.mytable td a:link { color: #325C91; }
.mytable td a:visited { color: #466C8E; }
.mytable td a:hover,
.mytable td a:focus { color: #1E4C94; }
.mytable th a,
.mytable td a:active { color: #fff; }
.mytable tfoot th,
.mytable tfoot td { background: #2C5755; color: #fff; }
.mytable th + td { padding-left: .5em; }
तालिका जिस पर आप लागू करना चाहते हैं कक्षा नाम लागू करें सीएसएस आराम ठीक है ...
यह वही है जो आईडी और वर्ग विशेषताओं के लिए हैं। यदि आप मार्कअप (स्टाइलिंग माइस्पेस की तरह) नहीं बदल सकते हैं तो आपको एक तालिका को अधिक सटीक रूप से लक्षित करने के लिए चयनकर्ताओं का उपयोग करने की आवश्यकता है। चयनकर्ताओं की पसंद कुछ ऐसा है जो आपको स्वयं तय करने की आवश्यकता होगी।
अपने सीएसएस में एक आईडी या क्लास परिभाषित करें जो प्रश्न में तालिका को प्रभावित करेगा।
फिर, अपने एचटीएमएल कोड में, कहते हैं कि
<table id="theid"... />
या
<table class="theclass" ... />
सीएसएस आईडी लग रहा है
क्लासेस
तरह#theid
{
//attributes
}
.theclass
{
//attributes
}
मैं 'टेबल # theid' की सिफारिश करता हूं क्योंकि आईडी एक ही उपयोग के लिए हैं, जो मुझे लगता है कि सवाल का सबसे अच्छा जवाब है। –
यहाँ वर्ग चयनकर्ताओं और पहली तालिका शैली मिलेगी कि मार्कअप, लेकिन दूसरी नहीं कर रहे हैं:
<style>
table.special { border: 1px solid #839E99; ... }
table.special caption { font-size: 1.3em; ... }
...
</style>
<table class="special">...</table>
<table>...</table>
या आप इसी तरह से एक आईडी का भी उपयोग करेंगे: कभी कभी एक धार्मिक
<style>
#my-special-table { border: 1px solid #839E99; ... }
#my-special-table caption { font-size: 1.3em; ... }
...
</style>
<table id="my-special-table">...</table>
<table>...</table>
इन दो तरीकों का उपयोग करने के बारे में युद्ध टूट जाता है। या तो आपकी जरूरतों के लिए ठीक है। Spec के अनुसार, आप केवल अपने HTML में सबसे अधिक तत्व पर एक दी गई आईडी डाल सकते हैं (लेकिन अधिकांश ब्राउज़र आपको उस नियम को तोड़ने की अनुमति देते हैं)।
जबकि आपको उस तालिका में एक कक्षा जोड़नी चाहिए जिसे आप प्रभावित करना चाहते हैं, मान लीजिए कि आप केवल सीएसएस को संशोधित कर सकते हैं। उस स्थिति में आप selectors के साथ सुंदर फैंसी प्राप्त कर सकते हैं। लेकिन सभी browsers support उन्हें नहीं। आप देख सकते हैं कि CSS 2 selectors एन-वें बच्चे अवधारणा का समर्थन नहीं करते हैं। अन्यथा, एचटीएमएल आप था की तरह:
<html><head></head><body>
<table><tr><td>First</td></tr></table>
<table><tr><td>Second</td></tr></table>
<table><tr><td>Third</td></tr></table>
</body></html>
आप सीएसएस 2 चयनकर्ताओं के साथ पहली बार है, लेकिन दूसरा लक्ष्य बना सकते हैं और तीसरे केवल CSS3 के लोगों के साथ लक्षित किया जा सकता।
table:first-child td {background-color:red;} /* CSS2, pretty wide support */
table:nth-child(2) td {background-color:red;} /* CSS3, limited support */
एकाधिक टेबल और कक्षा
एचटीएमएल तालिका
<table id="tableId1">
--Table Content--
</table>
<table id="tableId2">
--Table Content--
</table>
<table class="tableClass1">
--Table Content--
</table>
<table class="tableClass2">
--Table Content--
</table>
सीएसएस स्क्रिप्ट
#tableId1, #tableId2
{
//attributes
}
.tableClass1, .tableClass2
{
//attributes
}
यदि आप एक वांछित तालिका जैसे स्टाइलिंग के लिए वर्ग द्वारा तालिका चुनें है तालिका:
<table class="tableOne"></table>
<table class="tableTwo"></table>
फिर सीएसएस में, आप कुछ इस तरह का उपयोग करेगा:
.classOne {
/* do your stuff here*/
}
.classTwo {
/* do your stuff here*/
}
वास्तव में, यह लगभग "नेमस्पेसिंग" अपने सीएसएस परिभाषाओं की तरह है। –
मैं अब तक एक सीएसएस विशेषज्ञ नहीं हूं - लेकिन मेरे परीक्षण के मुताबिक ऊपर दिए गए सीएसएस में कम से कम एक त्रुटि है: '.mytable td, th {/ * ... * /} 'केवल' td' (कोशिकाओं) को प्रभावित करता है जिसमें वर्ग 'mytable' है (तालिका वर्ग की वजह से) - ** लेकिन ** यह ** सभी तालिका शीर्षलेख ** 'th' को प्रभावित करता है। इम्हो सही वाक्यविन्यास होना चाहिए: '.mytable td, .mytable th {/ * ... * /}'। (क्रोम, फ़ायरफ़ॉक्स और आईई के मौजूदा संस्करणों में परीक्षण किया गया) –