सीएसएस - कक्षा वर्गों का विस्तार

Question

मैं सीएसएस के लिए काफी नया हूं और अब तक अपना रास्ता ढूंढ रहा हूं। मैं इन बटनों को छाया और सामान के साथ लिंक बना रहा हूं। अब साइट पर ऐसे कई बटन आवश्यक हैं - बटन के बारे में सब कुछ समान है - कुछ गुणों को छोड़कर चौड़ाई और फ़ॉन्ट आकार की तरह बदलते हैं।

अब प्रत्येक कोड के लिए एक ही कोड की प्रतिलिपि बनाने के बजाय - बटन को विस्तारित करने और केवल उन गुणों को जोड़ने का एक तरीका है जो बदलते हैं।

दो बटन के उदाहरण - सीएसएस

.ask-button-display { 
background: #8BAF3B; 
border-radius: 4px; 
display: block; 
letter-spacing: 0.5px; 
position: relative; 
border-color: #293829; 
border-width: 2px 1px; 
border-style: solid; 
text-align:center; 
color: #FFF; 
width:350px; 
font-size: 20px; 
font-weight: bold; 
padding:10px; 
} 


.ask-button-submit { 
background: #8BAF3B; 
border-radius: 4px; 
display: block; 
letter-spacing: 0.5px; 
position: relative; 
border-color: #293829; 
border-width: 2px 1px; 
border-style: solid; 
text-align:center; 
color: #FFF; 
font-weight: bold; 
width:75px; 
font-size: 12px; 
padding: 1px; 
} 

और यह कैसे मैं वर्तमान में मेरे html में यह उपयोग कर रहा हूँ

<a href="/" id="ask-question-link" class="ask-button-display">Ask a Question</a> <a href="/" class="ask-button-submit" id="ask-button-submit">Submit</a> 

इसलिए मैं अगर वहाँ करने के लिए एक क्लीनर तरीका है सोच रहा हूँ है यह -

.button { 
/* PUT ALL THE COMMON PROPERTIES HERE */ 
} 

AND THEN SOMEHOW EXTEND IT LIKE 
.button #display { 
/* THE DIFFERENT PROPERTIES OF Display BUTTON */ 
} 

.button #ask { 
/* THE DIFFERENT PROPERTIES OF Ask BUTTON */ 
} 

लेकिन मुझे यकीन नहीं है कि यह कैसे करें। आपके इनपुट

Answer 1

आप एक तत्व को कई वर्गों में जोड़ सकते हैं, इसलिए एक .button वर्ग जो सब कुछ शामिल है, फिर एक .button-submit वर्ग, जो चीजों को जोड़ता है।

उदाहरण के लिए:

.button { 
    padding: 10px; 
    margin: 10px; 
    background-color: red; 
} 

.button-submit { 
    background-color: green; 
}​ 

एक जीवित jsFiddle here

देखें आपके मामले में, निम्नलिखित काम करना चाहिए:

.button { 
    background: #8BAF3B; 
    border-radius: 4px; 
    display: block; 
    letter-spacing: 0.5px; 
    position: relative; 
    border-color: #293829; 
    border-width: 2px 1px; 
    border-style: solid; 
    text-align:center; 
    color: #FFF; 
    width:350px; 
    font-size: 20px; 
    font-weight: bold; 
    padding:10px; 
} 


.button-submit { 
    width:75px; 
    font-size: 12px; 
    padding: 1px; 
}​ 

एक जीवित jsFiddle here

Answer 2

.ask-button-display, 
.ask-button-submit { 
    /* COMMON RULES */ 
} 

.ask-button-display { 

} 

.ask-button-submit { 

} 

Answer 3

के लिए धन्यवाद आम भागों

.button { 
background: #8BAF3B; 
border-radius: 4px; 
display: block; 
letter-spacing: 0.5px; 
position: relative; 
border-color: #293829; 
border-width: 2px 1px; 
border-style: solid; 
text-align:center; 
color: #FFF; 
} 

अपने अन्य वर्गों नियम है कि सामान्य नहीं हैं रखें के लिए दोनों लिंक के लिए एक बटन वर्ग जोड़ें।

और अपने HTML होगा

<a href="/" id="ask-question-link" class="button ask-button-display">Ask a Question</a> 
<a href="/" class="button ask-button-submit" id="ask-button-submit">Submit</a> 

Answer 4

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

<a href="/" id="ask-question-link" class="button submit">Ask a Question</a> <a href="/" class="ask-button-submit" id="ask-button-submit">Submit</a> 

यह बटन लागू करेगा और आप कक्षाओं को सबमिट करेंगे, जबकि आप उन्हें कक्षाओं को अलग से लागू करने की अनुमति देते हैं।

की तर्ज पर अपने कोड उदाहरण संशोधित करें:

.master_button { 
/* PUT ALL THE COMMON PROPERTIES HERE */ 
} 
AND THEN SOMEHOW EXTEND IT LIKE 
.button_display { 
/* THE DIFFERENT PROPERTIES OF Display BUTTON */ 
} 
.button_ask { 
/* THE DIFFERENT PROPERTIES OF Ask BUTTON */ 
} 

और तरह लागू होते हैं:

<a href="/" id="ask-question-link" class="master_button button_ask">Ask a Question</a> 
<a href="/" class="master_button submit" id="ask-button-submit">Submit</a> 

Answer 5

आप सास में देखना चाहते हो सकता है देखते हैं। सास के साथ आप मूल रूप से अपनी सीएसएस फ़ाइल में चर बना सकते हैं और फिर उन्हें फिर से उपयोग कर सकते हैं।http://sass-lang.com/ निम्न उदाहरण सास आधिकारिक वेबसाइट से लिया गया है:

$blue: #3bbfce; 
$margin: 16px; 

.content-navigation { 
    border-color: $blue; 
    color: 
    darken($blue, 9%); 
} 

.border { 
    padding: $margin/2; 
    margin: $margin/2; 
    border-color: $blue; 
} 

Answer 6

आम दोहराने के बजाय जवाब मैं आप अजीब और whacky दुनिया में कुछ नया दिखाने जा रहा हूँ "तत्व के लिए एक बटन वर्ग जोड़ें" नई आयु सीएसएस, या बेहतर एससीएसएस के रूप में जाना जाता है!

स्टाइलशीट में कोड का पुन: उपयोग 'मिक्सिन' नामक किसी चीज़ के साथ प्राप्त किया जा सकता है। यह हमें '@include' विशेषता का उपयोग कर कुछ शैलियों का पुन: उपयोग करने की अनुमति देता है।

मुझे आपको एक उदाहरण दें।

@mixin button($button-color) { 
    background: #fff; 
    margin: 10px; 
    color: $color; 
} 

और फिर हम कहते हैं कि जब भी हम एक बटन है

#unique-button { 
    @include button(#333); 
    ...(additional styles) 
} 

यहाँ और अधिक पढ़ें: http://sass-lang.com/tutorial.html।

शब्द फैलाएं !!!

Answer 7

आप इस की कोशिश करना चाहते हो सकता है:

.button { 
    padding: 10px; 
    margin: 10px; 
    background-color: red; 
} 

.button.submit { 
    background-color: green; 
} 
.button.submit:hover { 
    background-color: #ffff00; 
} 

इस तरह आप शब्द दोहराने से बचें और इस तरह के तत्वों में कक्षाएं उपयोग करने में सक्षम हो जाएगा:

<a href="/" id="btnAsk" class="button">Ask a Question</a> 
<a href="/" id="btnSubmit" class="button submit">Submit</a> 

में उदाहरण देखें जेएसफ़िल्ड (http://goo.gl/6HwroM)