tutorial - types of css




क्या एक सीएसएस वर्ग एक या अधिक कक्षाओं का उत्तराधिकारी हो सकता है? (19)

मैं इतने लंबे समय तक एक वेब प्रोग्रामर होने के लिए गूंगा महसूस करता हूं और इस सवाल का जवाब नहीं जानता, मुझे उम्मीद है कि यह संभव है और मुझे जो जवाब लगता है उसके बजाय मुझे नहीं पता था (जो कि यह संभव नहीं है) ।

मेरा सवाल यह है कि क्या एक सीएसएस वर्ग बनाना संभव है जो किसी अन्य सीएसएस वर्ग (या एक से अधिक) से "विरासत" प्राप्त करता है।

उदाहरण के लिए, कहें कि हमारे पास था:

.something { display:inline }
.else      { background:red }

मैं ऐसा कुछ करना चाहता हूं:

.composite 
{
   .something;
   .else
}

जहां ".composite" कक्षा दोनों इनलाइन प्रदर्शित करेगी और एक लाल पृष्ठभूमि होगी


अपने सामान्य गुणों को एक साथ रखें और विशिष्ट (या ओवरराइड) गुणों को फिर से असाइन करें।

/*  ------------------------------------------------------------------------------ */   
/*  Headings */ 
/*  ------------------------------------------------------------------------------ */   
h1, h2, h3, h4
{
    font-family         : myfind-bold;
    color               : #4C4C4C;
    display:inline-block;
    width:900px;
    text-align:left;
    background-image: linear-gradient(0,   #F4F4F4, #FEFEFE);/* IE6 & IE7 */
}

h1  
{
    font-size           : 300%;
    padding             : 45px 40px 45px 0px;
}

h2
{
    font-size           : 200%;
    padding             : 30px 25px 30px 0px;
}

आप इस तरह से विरासत की तरह व्यवहार प्राप्त कर सकते हैं:

.p,.c1,.c2{...}//parent styles
.c1{...}//child 1 styles
.c2{...}//child 2 styles

http://jsfiddle.net/qj76455e/1/ देखें

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


आप एक एकल डीओएम तत्व, उदाहरण के लिए कई कक्षाएं जोड़ सकते हैं

<div class="firstClass secondClass thirdclass fourthclass"></div>

विरासत सीएसएस मानक का हिस्सा नहीं है।


उन लोगों के लिए जो उल्लिखित (उत्कृष्ट) पदों से संतुष्ट नहीं हैं, आप एक परिवर्तनीय (PHP या जो भी) बनाने के लिए अपने प्रोग्रामिंग कौशल का उपयोग कर सकते हैं और इसे एकाधिक वर्ग नामों को स्टोर कर सकते हैं।

यह सबसे अच्छा हैक मैं साथ आ सकता है।

<style>
.red { color: red; }
.bold { font-weight: bold; }
</style>

<? define('DANGERTEXT','red bold'); ?>

फिर उस वैश्विक तत्व को उस तत्व के लिए लागू करें जो आप कक्षा के नामों की बजाय चाहते हैं

<span class="<?=DANGERTEXT?>"> Le Champion est Ici </span>

एसएएसएस भी है, जिसे आप http://sass-lang.com/ पर पा सकते हैं। एक @extend टैग, साथ ही मिश्रण-प्रकार प्रकार प्रणाली भी है। (माणिक)

यह कम करने के लिए एक प्रतियोगी की तरह है।


कम और सास सीएसएस प्री-प्रोसेसर हैं जो मूल्यवान तरीकों से सीएसएस भाषा का विस्तार करते हैं। वे जो भी सुधार करते हैं उनमें से केवल एक ही विकल्प है जिसे आप ढूंढ रहे हैं। कम के साथ कुछ बहुत अच्छे जवाब हैं और मैं सास समाधान जोड़ दूंगा।

सास ने विकल्प बढ़ाया है जो एक वर्ग को किसी अन्य व्यक्ति को पूरी तरह विस्तारित करने की अनुमति देता है। विस्तार के बारे में अधिक जानकारी आप इस लेख में पढ़ सकते हैं


जैसा कि अन्य ने कहा है, आप एक तत्व में कई कक्षाएं जोड़ सकते हैं।

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


दरअसल जो आप पूछ रहे हैं वह मौजूद है - हालांकि यह ऐड-ऑन मॉड्यूल के रूप में किया जाता है। उदाहरण के लिए .NET में बेहतर सीएसएस पर यह प्रश्न देखें।

इन ऐड-ऑन के बारे में एक विचार प्राप्त करने के लिए कम से कम उपयोग करने पर लार्सनल का जवाब देखें


दुर्भाग्य से, सीएसएस 'विरासत' प्रदान नहीं करता है जिस तरह से प्रोग्रामिंग भाषाएं सी ++, सी # या जावा करते हैं। आप एक सीएसएस कक्षा घोषित नहीं कर सकते हैं और फिर इसे किसी अन्य सीएसएस वर्ग के साथ बढ़ा सकते हैं।

हालांकि, आप अपने मार्कअप में एक टैग से अधिक कक्षा में आवेदन कर सकते हैं ... इस मामले में नियमों का एक परिष्कृत सेट है जो निर्धारित करता है कि ब्राउज़र द्वारा कौन सी वास्तविक शैलियों को लागू किया जाएगा।

<span class="styleA styleB"> ... </span>

सीएसएस उन सभी शैलियों की तलाश करेगा जिन्हें आपके मार्कअप के आधार पर लागू किया जा सकता है, और उन एकाधिक नियमों से सीएसएस शैलियों को एक साथ जोड़ सकते हैं।

आम तौर पर, शैलियों को विलय कर दिया जाता है, लेकिन जब संघर्ष उत्पन्न होते हैं, तो बाद में घोषित शैली आम तौर पर जीत जाएगी (जब तक कि महत्वपूर्ण विशेषता शैलियों में से किसी एक पर निर्दिष्ट नहीं होती है, जिस स्थिति में जीत जाती है)। साथ ही, एचटीएमएल तत्व पर सीधे लागू शैलियों सीएसएस वर्ग शैलियों पर प्राथमिकता लेते हैं।


नहीं, आप कुछ ऐसा नहीं कर सकते हैं

.composite 
{
   .something;
   .else
}

यह ओओ भावना में कोई "वर्ग" नाम नहीं है। कुछ और .else सिर्फ चयनकर्ता कुछ और नहीं हैं।

लेकिन आप या तो तत्व पर दो कक्षाएं निर्दिष्ट कर सकते हैं

<div class="something else">...</div>

या आप विरासत के दूसरे रूप में देख सकते हैं

.foo {
  background-color: white;
  color: black;
}

.bar {
  background-color: inherit;
  color: inherit;
  font-weight: normal;
}
<div class="foo">
  <p class="bar">Hello, world</p>
</div>

जहां अनुच्छेद पृष्ठभूमि रंग और रंग संलग्न div में सेटिंग्स से विरासत में हैं, जो .foo स्टाइल है। आपको सटीक W3C विनिर्देश की जांच करनी पड़ सकती है। inherit वैसे भी अधिकांश संपत्तियों के लिए डिफ़ॉल्ट है लेकिन सभी के लिए नहीं।


मुझे एहसास है कि यह सवाल अब बहुत पुराना है, लेकिन यहां नहीं चला है!

यदि इरादा एक वर्ग को जोड़ना है जो मूल वर्ग के रूप में कई वर्गों के गुणों का तात्पर्य है, तो मैं जावास्क्रिप्ट / jQuery का उपयोग करने की अनुशंसा करता हूं (jQuery वास्तव में आवश्यक नहीं है लेकिन निश्चित रूप से उपयोगी है)

उदाहरण के लिए, आपके पास .umbrellaClass जो .baseClass1 और .baseClass2 से "विरासत" है, तो आप कुछ जावास्क्रिप्ट तैयार कर सकते हैं जो तैयार हो जाएं।

$(".umbrellaClass").addClass("baseClass1");
$(".umbrellaClass").addClass("baseClass2");

अब .umbrellaClass सभी तत्वों में दोनों के सभी गुण .baseClass.baseClass एस। ध्यान दें, .umbrellaClass विरासत की तरह, .umbrellaClass अपनी संपत्ति हो सकती है या नहीं हो सकती है।

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

सीएसएस को बेकार मूल विरासत नहीं है, हालांकि।


मैं इस समस्या में भाग गया और एक वर्ग की तरह लगने के लिए एक JQuery समाधान का उपयोग कर समाप्त हुआ, अन्य वर्गों का उत्तराधिकारी हो सकता है।

<script>
    $(function(){
            $(".composite").addClass("something else");
        });
</script>

यह वर्ग "समग्र" वर्ग के सभी तत्व पाएगा और तत्वों को "कुछ" और "अन्य" वर्ग जोड़ देगा। तो कुछ <div class="composite">...</div> जैसे कुछ खत्म हो जाएगा:
<div class="composite something else">...</div>


यदि आप php के माध्यम से अपनी .css फ़ाइलों को प्रीप्रोसेस करते हैं तो आप जो चाहते हैं उसे प्राप्त कर सकते हैं। ...

$something='color:red;'
$else='display:inline;';
echo '.something {'. $something .'}';
echo '.else {'. $something .'}';
echo '.somethingelse {'. $something  .$else '}';

...


यदि आप कम से कम एक शक्तिशाली पाठ प्रीप्रोसेसर चाहते हैं, तो पीपी विज़ार्ड देखें:

http://dennisbareis.com/ppwizard.htm

चेतावनी वेबसाइट वास्तव में घृणास्पद है और एक छोटा सीखने की वक्र है, लेकिन यह मैक्रोज़ के माध्यम से सीएसएस और एचटीएमएल कोड दोनों के निर्माण के लिए एकदम सही है। मैंने कभी नहीं समझा है कि अधिक वेब कोडर इसका उपयोग क्यों नहीं करते हैं।


सबसे अच्छा आप यह कर सकते हैं

सीएसएस

.car {
  font-weight: bold;
}
.benz {
  background-color: blue;
}
.toyota {
  background-color: white;
}

एचटीएमएल

<div class="car benz">
  <p>I'm bold and blue.</p>
</div>
<div class="car toyota">
  <p>I'm bold and white.</p>
</div>

सीएसएस फ़ाइल में:

p.Title 
{
  font-family: Arial;
  font-size: 16px;
}

p.SubTitle p.Title
{
   font-size: 12px;
}

सीएसएस वास्तव में वह नहीं करता जो आप पूछ रहे हैं। यदि आप उस समग्र विचार के साथ नियम लिखना चाहते हैं, तो आप compass को देखना चाहेंगे। यह एक स्टाइलशीट ढांचा है जो पहले से उल्लिखित कम के समान दिखता है।

यह आपको मिश्रित और वह अच्छा व्यवसाय करने देता है।


हाँ, लेकिन बिल्कुल उस वाक्यविन्यास के साथ नहीं।

.composite,
.something { display:inline }

.composite,
.else      { background:red }

सही समय : मैं इस प्रश्न से अपने ईमेल पर गया, LESS , रूबी लाइब्रेरी के बारे में एक लेख खोजने के लिए जो अन्य चीजों के साथ यह करता है:

चूंकि super footer तरह दिखता है , लेकिन एक अलग फ़ॉन्ट के साथ, मैं इन घोषणाओं को शामिल करने के लिए कहने के लिए कम वर्ग की समावेशन तकनीक (वे इसे एक मिश्रण कहते हैं) का उपयोग करेंगे:

#super {
  #footer;
  font-family: cursive;
}




css