2008-10-14 16 views
7

मेरे पास सीएसएस का केवल एक बुनियादी ज्ञान है, क्या एक शैली से दूसरी शैली में संपत्ति का उत्तराधिकारी होना संभव है। तो उदाहरण के लिए मैं अपने हाइपरलिंक टैग में अपने डिफ़ॉल्ट पैराग्रा टैग सेटिंग्स में निर्दिष्ट फ़ॉन्ट आकार का उत्तराधिकारी प्राप्त कर सकता हूं।इनहेरिट सीएसएस गुण

कारण मैं यह करना चाहता हूं कि यह कई शैलियों को बनाए रखना आसान बनाता है।

उत्तर

6

कभी आप लोग बहुत तरह से कम दो तत्वों के लिए आम शैलियों को परिभाषित कर सकते हैं: के रूप में आप चाहते हैं

p, a { 
    font-size: 1em; 
} 

और फिर का विस्तार अपनी व्यक्तिगत गुणों के साथ हर एक:

p { 
    color: red; 
} 

a { 
    font-weight: bold; 
} 

ध्यान रखें: स्टाइल शीट में बाद में परिभाषित स्टाइल आमतौर पर पहले परिभाषित गुणों को ओवरराइड करते हैं।

अतिरिक्त: आप पहले से ही नहीं है, तो मैं Firebug Firefox विस्तार हो रही है ताकि आप देख सकते हैं कि शैलियों अपने पृष्ठ पर कुछ तत्व प्राप्त कर रहे हैं और वे से लिए गए हैं जहां सलाह देते हैं।

+0

"स्टाइल शीट में बाद में परिभाषित स्टाइल हमेशा पहले परिभाषित गुणों को ओवरराइड करते हैं" यह बिल्कुल सही नहीं है। ऐसा तब होता है जब चयनकर्ताओं की समानता होती है। पी # आईडी हमेशा पी.क्लास को ओवरराइड करेगा - सीएसएस स्पेक में कैस्केड देखें। – Kornel

+0

@porneL - सुधार के लिए धन्यवाद, तय। मैं उदाहरण के मामले की मानसिकता में सोच रहा था। – leek

2

कोई सीएसएस शैलियों का उत्तराधिकारी करने का कोई तरीका नहीं है। लेकिन शैलियों को साझा करने के कई तरीके हैं। यहाँ कुछ उदाहरण हैं:

अपनी शैली में कई वर्गों

<p class="first all">Some text</p> 
<p class="all">More text</p> 
<p class="last all">Yet more text</p> 

p.all { font-weight: bold } 
p.first { color: red; } 
p.last { color: blue; } 

उपयोग अल्पविराम ऑपरेटर का उपयोग करना

<p class="first">Some text</p> 
<p class="middle">More text</p> 
<p class="last">Yet more text</p> 

p.first, p.middle, p.last { font-weight: bold } 
p.first { color: red; } 
p.last { color: blue; } 

कंटेनर तत्वों का उपयोग करते हुए

<div class="container"> 
    <p class="first">Some text</p> 
    <p class="middle">More text</p> 
    <p class="last">Yet more text</p> 
</div> 

div p { font-weight: bold } 
p.first { color: red; } 
p.last { color: blue; } 

इनमें से कोई भी बिल्कुल वही नहीं है जो आप खोज रहे हैं, लेकिन इन तकनीकों का उपयोग करने से आप सीएसएस डुप्लिकेशन को कम से कम रखने में मदद करेंगे।

यदि आप अपने सीएसएस को प्रीप्रोसेस करने के लिए सर्वर साइड कोड का उपयोग करने के इच्छुक हैं, तो आप जिस सीएसएस विरासत को ढूंढ रहे हैं उसे प्राप्त कर सकते हैं।

1

हां।

आपको समझना चाहिए कि सीएसएस में कैस्केड कैसे काम करता है, और यह भी समझता है कि विरासत कैसे काम करती है। कुछ शैलियों का उत्तराधिकारी (फ़ॉन्ट चेहरे की तरह) और कुछ शैलियों (सीमा की तरह) नहीं होंगे। हालांकि, आप डीओएम के अंदर अपने मूल तत्वों से प्राप्त करने के लिए शैलियों को भी बता सकते हैं।

यहां कुछ सहायता के बारे में ज्ञान नियमों को निर्दिष्ट किया गया है। This site about the CSS Specifity Wars मदद कर सकता है (नोट: यह साइट वर्तमान में नीचे है, लेकिन उम्मीद है कि यह जल्द ही वापस आ जाएगा)।

साथ ही, मुझे लगता है यह कभी कभी इस तरह शैलियों ओवरलोड मदद करता है:

h1, h2, h3, h4, h5 h6 { font-weight: normal; border: 1px solid #ff0; } 
h1 { font-size: 300%; } 
... etc ... 
0

सीएसएस अपने आप पैरेंट शैली से प्राप्त कर लेगा। उदाहरण के लिए, यदि आप अपने शरीर की शैली में कहते हैं कि सभी पाठ #EEE होना चाहिए और आपकी पृष्ठभूमि # 000 होनी चाहिए तो सभी पाठ, चाहे वह एक div या span में हो, हमेशा #EEE होगा।

CSS3 में वर्णित तरीके से विरासत जोड़ने के बारे में काफी कुछ बात हुई है, लेकिन यह कल्पना अभी तक बाहर नहीं है, इसलिए अभी हम खुद को दोहराते हुए अटक गए हैं।

0

"... क्या एक शैली से किसी अन्य शैली में संपत्ति का उत्तराधिकारी होना संभव है। इसलिए उदाहरण के लिए मैं अपने हाइपरलिंक टैग में अपने डिफ़ॉल्ट पैराग्रा टैग सेटिंग्स में निर्दिष्ट फ़ॉन्ट आकार का उत्तराधिकारी प्राप्त कर सकता हूं।"

लिंक टैग स्वचालित रूप से पैराग्राफ से फोंट का उपयोग करेंगे, अगर, और केवल अगर वे पैराग्राफ के भीतर हैं। वे किसी अनुच्छेद के बाहर हैं, तो (किसी सूची में कहते हैं) वे एक ही फ़ॉन्ट, आदि

उदाहरण के लिए इस सीएसएस का उपयोग नहीं होगा:

* { 
margin: 0 10px; 
padding:0; 
font-size: 1 em; 
} 
p, a { font-size: 75%; } 

लिंक और पैराग्राफ उत्पन्न होगा कि .75em पर आकार रहे हैं । लेकिन यह लगभग 5656 (.75 ​​* .75) पर पैराग्राफ के भीतर लिंक प्रदर्शित करेगा।

जोनाथन आर्केल द्वारा उद्धृत विशिष्टता संदर्भ के अतिरिक्त, मैं डब्ल्यू 3 स्कूल्स में CSS Tutorial की अनुशंसा करता हूं।

संबंधित मुद्दे