CSS में इनहेरिटेंस
यह लेख CSS में इनहेरिटेंस को समझाता है।
आप प्रतिनिधि इनहेरिटेड और गैर-इनहेरिटेड गुणों को देख सकते हैं।
YouTube Video
प्रीव्यू के लिए HTML
css-inheritance.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Inheritance</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-inheritance.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Inheritance</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header><h2>CSS Inheritance</h2></header>
19 <article>
20 <h3>Example of Inheritance</h3>
21 <section>
22 <p>
23 Example of P Element.<br>
24 <span>Example of Span Element</span>
25 </p>
26 </section>
27 <div>
28 Example of Div Element
29 </div>
30 <ul>
31 <li>List Item 1</li>
32 <li>List Item 2</li>
33 <li>List Item 3</li>
34 </ul>
35 </article>
36 <article>
37 <h3>all</h3>
38 <section>
39 <h4>Initial</h4>
40 <div class="all-initial">This is an initial element</div>
41 </section>
42 <section>
43 <h4>Inherit</h4>
44 <div class="parent-inherit">
45 <div class="all-inherit">This is an inherited element</div>
46 </div>
47 </section>
48 <section>
49 <h4>Unset All</h4>
50 <div class="parent-unset">
51 <div class="all-unset">This is an unset element</div>
52 </div>
53 </section>
54 <section>
55 <h4>all and !important</h4>
56 <div class="important-style">
57 <div class="all-with-important">
58 This is an initial element with !important
59 </div>
60 </div>
61 </section>
62 </article>
63 </main>
64</body>
65</html>CSS में इनहेरिटेंस
CSS में, कुछ गुण स्वचालित रूप से पैरेंट तत्वों से चाइल्ड तत्वों में विरासत में प्राप्त होते हैं। यह एक उपयोगी तंत्र है क्योंकि एक बार जब आप एक विशिष्ट गुण सेट करते हैं, तो चाइल्ड तत्वों में भी वही शैली होगी, जिससे इसे बार-बार सेट करने की आवश्यकता नहीं होगी। हालांकि, सभी गुण विरासत में प्राप्त नहीं होते हैं; कुछ गुण विरासत में प्राप्त होते हैं जबकि अन्य नहीं होते। उदाहरण के लिए, color और font-family विरासत में प्राप्त होते हैं, लेकिन बॉक्स मॉडल गुण जैसे margin और padding नहीं होते।
इनहेरिटेड प्रॉपर्टीज
विरासत में प्राप्त होने योग्य गुण मुख्य रूप से वे होते हैं जो पाठ और फोंट से संबंधित होते हैं।
सामान्यतः इनहेरिटेड प्रॉपर्टीज
color: टेक्स्ट रंग
1body {
2 color: black;
3}- इस मामले में,
bodyके भीतर सभी चाइल्ड तत्वों का पाठ रंग काला होगा।
font-family: फॉन्ट परिवार
1body {
2 font-family: "Times New Roman", cursive;
3}- सभी चाइल्ड तत्व
Arialफोंट का उपयोग करते हैं।
font-size: टेक्स्ट आकार
1body {
2 font-size: 16px;
3}bodyके भीतर सभी पाठ का आकार डिफ़ॉल्ट रूप से16pxहोगा।
line-height: लाइन रिक्ति
1p {
2 line-height: 1.5;
3}<p>तत्व के भीतर का पाठ 1.5 गुना लाइन ऊँचाई के साथ दिखाया जाएगा, जो इसके चाइल्ड तत्वों को भी प्रभावित करेगा।
text-align: टेक्स्ट संरेखण
1div {
2 text-align: center;
3}divतत्व के भीतर का पाठ और इनलाइन तत्व केंद्रित दिखाए जाते हैं।
visibility: तत्व दृश्यता
1div {
2 visibility: hidden;
3}visibilityएक गुण है जो एक तत्व की दृश्यता को नियंत्रित करता है। छुपाने पर सेट किए जाने पर, तत्व अदृश्य हो जाता है।- इस मामले में,
divके भीतर के बाल तत्व भी छिपे होंगे।
list-style: सूची शैली (<ul>और<ol>के लिए सूची मार्कर)
1ul {
2 list-style: square;
3}- इस मामले में, ul टैग के भीतर सूची आइटम वर्ग मार्करों के साथ प्रदर्शित होंगे।
उदाहरण:
गैर-इनहेरिटेड प्रॉपर्टीज
लेआउट और बॉक्स मॉडल से संबंधित गुण आमतौर पर विरासत में नहीं लिए जाते हैं। इन गुणों को प्रत्येक तत्व के लिए व्यक्तिगत रूप से सेट करने की आवश्यकता होती है।
सामान्य गैर-विरासत गुण
margin,padding: किसी तत्व के बाहरी और आंतरिक मार्जिन
1div {
2 margin: 10px;
3 padding: 20px;
4}- यहां तक कि अगर आप
divतत्व के लिए बाहरी या भीतरी मार्जिन सेट करते हैं, तो यह इसके बच्चे तत्वों को प्रभावित नहीं करता।
border: तत्व की सीमा (बॉर्डर)
1div {
2 border: 1px solid black;
3}- यहां तक कि अगर पैरेंट तत्व पर बॉर्डर सेट किया जाए, तो यह बच्चे तत्वों को प्रभावित नहीं करता।
width,height: तत्व की चौड़ाई और ऊंचाई
1div {
2 width: 100px;
3 height: 50px;
4}- पैरेंट तत्व की चौड़ाई और ऊंचाई स्वचालित रूप से बच्चे तत्वों को प्रभावित नहीं करती।
background: पृष्ठभूमि शैली
1body {
2 background-color: lightblue;
3}bodyपर सेट किया गया बैकग्राउंड रंग सीधे बच्चे तत्वों को प्रभावित नहीं करता। हालांकि, यदि किसी बच्चे तत्व में पारदर्शी बैकग्राउंड हो, तो पैरेंट तत्व का बैकग्राउंड रंग इसके माध्यम से दिखाई दे सकता है।
उदाहरण:
विरासत नियंत्रण
विरासत को inherit, initial, या unset कीवर्ड का उपयोग करके नियंत्रित किया जा सकता है।
- यदि आप इनहेरिटेंस सक्षम करना चाहते हैं: आप
inheritकीवर्ड का उपयोग करके स्पष्ट रूप से इनहेरिटेंस लागू कर सकते हैं।
1div {
2 color: inherit; /* Inherit the color from its parent element */
3}- यदि आप इनहेरिटेंस नहीं चाहते हैं: आप
initialयाunsetकीवर्ड्स का उपयोग करके गुण को उसकी आरंभिक मान पर रीसेट कर सकते हैं।
1p {
2 color: initial; /* Reset the color to its initial/default value */
3}उदाहरण:
all गुण
all एक ऐसी विशेषता है जो किसी तत्व के लिए, जिनमें इनहेरिटेंस योग्य गुण शामिल होते हैं, लगभग सभी CSS गुणों को एक साथ रीसेट कर सकती है। विशेष रूप से, आप एक तत्व के गुणों को सेट करने के लिए निम्नलिखित तीन कीवर्ड का उपयोग कर सकते हैं:।
initial: सभी गुणों को उनकी प्रारंभिक मान पर रीसेट करता है।inherit: सभी गुणों को पैरेंट तत्व से इनहेरिट करता है।unset: गुण को इनहेरिट करता है यदि वह इनहेरिटेंस योग्य है, अन्यथा इसे उसकी प्रारंभिक मान पर रीसेट करता है।
all बहुत उपयोगी है जब आप एक साथ कई गुणों को रीसेट या सेट करना चाहते हैं, बजाय इसके कि केवल विशिष्ट गुणों को अलग-अलग सेट करें।
आरंभिक मानों पर रीसेट करने का उदाहरण
1.all-initial {
2 all: initial;
3 background-color: lightskyblue;
4}-
जब आप किसी विशेष तत्व के लिए पहले से सेट सभी स्टाइल्स को रीसेट करना चाहते हैं और इसे उसकी प्रारंभिक स्थिति में वापस लाना चाहते हैं, तो इस प्रकार
all: initialका उपयोग करें। -
इस उदाहरण में,
.all-initialक्लास वाले<div>तत्व के सभी गुण ब्राउजर की डिफ़ॉल्ट प्रारंभिक मान पर रीसेट हो जाते हैं।
विरासत के उदाहरण
1.parent-inherit {
2 color: blue;
3 font-size: 20px;
4 border: 1px solid blue;
5}
6
7.all-inherit {
8 all: inherit;
9 background-color: lightskyblue;
10}all: inheritका उपयोग करने से सभी गुण पैरेंट तत्व से इनहेरिट होते हैं।- इस उदाहरण में,
.all-inheritक्लास वाले तत्व पैरेंट तत्व सेcolorऔरfont-sizeजैसे सभी गुण इनहेरिट करते हैं।
शर्तों के आधार पर प्रारंभिक मूल्य या विरासत निर्धारित करने का उदाहरण
1.parent-unset {
2 color: blue;
3}
4
5.all-unset {
6 font-weight: bold;
7}
8
9.all-unset {
10 all: unset;
11}all: unsetका उपयोग करने से यदि कोई गुण इनहेरिट हो सकता है तो वह इनहेरिट होता है; अन्यथा, वे अपनी प्रारंभिक मान पर रीसेट हो जाते हैं।- इस मामले में,
colorइनहेरिट होता है, जबकिfont-weightअपनी प्रारंभिक मान पर रीसेट हो जाता है, जो आमतौर परnormalहोता है।
विशिष्टता (प्राथमिकता) के साथ संबंध
1.all-with-important {
2 color: red !important;
3 background-color: lightskyblue;
4}
5
6.all-with-important {
7 all: initial;
8}-
allएक शक्तिशाली रीसेट तंत्र है, लेकिन यह CSS विशिष्टता से प्रभावित होता है। यदि किसी विशिष्ट तत्व में मजबूत स्टाइल विशिष्टताएं हैं, तोallगुण उन स्टाइल्स को ओवरराइड नहीं कर सकता है। उदाहरण के लिए,!importantके साथ निर्दिष्ट गुण प्रभावित नहीं किए जा सकते। -
इस उदाहरण में, भले ही आप
all: initialके साथ स्टाइल को रीसेट करने का प्रयास करें,color: red !importantनिर्दिष्टीकरण के कारणcolorगुण रीसेट नहीं होगा।
ब्लॉक-स्तरीय तत्व और इनलाइन तत्व
ब्लॉक-स्तरीय तत्व
- उदाहरण:
<div>,<p>,<h1>〜<h6>,<ul>,<li>,<section> - विशेषताएँ:
- वे हमेशा एक नई पंक्ति में प्रकट होते हैं और अपने पैरेंट तत्व की पूरी चौड़ाई तक फैल जाते हैं।
- चौड़ाई (
width) और ऊँचाई (height) को स्वतंत्र रूप से सेट किया जा सकता है। - मार्जिन (
margin) और पैडिंग (padding) सभी दिशाओं में सेट किए जा सकते हैं और यह सभी किनारों को प्रभावित करेंगे।
1div {
2 width: 80%; /* Set the width to 80% of its parent element's width */
3 padding: 20px; /* Add a padding of 20 pixels on all sides */
4 margin: 10px 0; /* Add a margin of 10 pixels top and bottom, 0 pixels left and right */
5}इनलाइन तत्व
- उदाहरण:
<span>,<a>,<strong>,<em>,<img>,<label> - विशेषताएँ:
- वे एक ही पंक्ति में अन्य इनलाइन तत्वों के साथ दिखाई देते हैं।
- चौड़ाई (
width) और ऊँचाई (height) को सीधे सेट नहीं किया जा सकता (जब तकdisplay: blockलागू न हो)। - ऊर्ध्वाधर रूप से मार्जिन (
margin) या पैडिंग (padding) सेट करने का प्रभाव सीमित होता है (क्षैतिज मार्जिन और पैडिंग प्रभावी होती हैं)।
1a {
2 padding: 5px; /* Padding for inline elements */
3 margin-right: 10px; /* Set margin to the right */
4 color: blue;
5}ब्लॉक-स्तरीय तत्वों और इनलाइन तत्वों के बीच का अंतर
-
चौड़ाई और ऊँचाई सेटिंग्स:
- ब्लॉक-स्तरीय तत्व: चौड़ाई और ऊँचाई सेट की जा सकती है।
- इनलाइन तत्व: आमतौर पर चौड़ाई और ऊँचाई सेट नहीं की जा सकती।
-
मार्जिन और पैडिंग:
- ब्लॉक-स्तरीय तत्व: मार्जिन और पैडिंग सभी किनारों पर लागू होती हैं।
- इनलाइन तत्व: ऊपर और नीचे मार्जिन और पैडिंग अप्रभावी होती हैं या उनका सीमित प्रभाव होता है।
-
लेआउट विधि:
- ब्लॉक-स्तरीय तत्व: स्वचालित रूप से नई पंक्ति में रखे जाते हैं।
- इनलाइन तत्व: अन्य इनलाइन तत्वों के साथ एक ही पंक्ति में संरेखित होते हैं।
जैसा कि आप देख सकते हैं, ब्लॉक-स्तरीय तत्वों और इनलाइन तत्वों पर CSS शैलियों के लागू होने में अंतर हैं। ब्लॉक-स्तरीय तत्वों में, चौड़ाई, ऊंचाई, मार्जिन और पैडिंग जैसे लेआउट-संबंधित CSS गुण निर्दिष्ट रूप में लागू होते हैं। दूसरी ओर, इनलाइन तत्वों के लिए, लेआउट से संबंधित CSS गुण जैसे चौड़ाई, ऊँचाई, मार्जिन, या पैडिंग सेट करना लागू नहीं हो सकता है या सीमित रूप से लागू हो सकता है।
ब्लॉक-स्तरीय और इनलाइन तत्वों की CSS हैंडलिंग
1span {
2 display: block; /* Display the span element as a block-level element */
3 width: 100px;
4 height: 50px;
5}हालाँकि, display प्रॉपर्टी को block या inline-block पर सेट करके, आप इनलाइन तत्वों के लिए चौड़ाई और ऊँचाई जैसी शैलियों को इस तरह समायोजित कर सकते हैं जैसे वे ब्लॉक तत्व हों।
आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।