व्याख्यान 2: चयनकर्ता और गुण

इस व्याख्यान में, हम सीएसएस के निर्माण खंडों में गोता लगाएंगे: चयनकर्ता और गुण। ये आवश्यक अवधारणाएँ हैं जो आपको अपने वेबपेज पर विशिष्ट तत्वों को लक्षित करने और उन्हें प्रभावी ढंग से स्टाइल करने की अनुमति देती हैं।

सीएसएस चयनकर्ता क्या हैं?

सीएसएस चयनकर्ता ऐसे पैटर्न हैं जिनका उपयोग उन HTML तत्वों को चुनने के लिए किया जाता है जिन्हें आप स्टाइल करना चाहते हैं। विभिन्न प्रकार के चयनकर्ता आपको उनके टैग, वर्ग, आईडी, विशेषताओं और बहुत कुछ के आधार पर विभिन्न तत्वों पर शैलियाँ लागू करने की अनुमति देते हैं।

चयनकर्ताओं के प्रकार

1. तत्व (प्रकार) चयनकर्ता:

   • एक विशिष्ट प्रकार के सभी तत्वों को लक्षित करता है।
   • उदाहरण:

    p {
      color: green;
    }
   

   इससे सभी

   तत्वों का रंग हरा हो जाएगा।

2. वर्ग चयनकर्ता:

   • एक विशिष्ट वर्ग विशेषता वाले तत्वों को लक्षित करता है।
   • उदाहरण:

    .highlight {
      background-color: yellow;
    }
   

   आपके HTML में, class='highlight' वाले किसी भी तत्व की पृष्ठभूमि पीली होगी।
   

    
   This is highlighted text.
   

3. आईडी चयनकर्ता:

   • एक अद्वितीय आईडी विशेषता के साथ एक तत्व को लक्षित करता है।
   • उदाहरण:

    #header {
      font-size: 24px;
    }
   

   केवल id='header' वाले तत्व का फ़ॉन्ट आकार 24px होगा।
   

    
   Welcome to My Website
   

4. समूह चयनकर्ता:

   • एकाधिक चयनकर्ताओं पर एक ही शैली लागू करता है।
   • उदाहरण:

    h1, h2, h3 {
      color: blue;
    }
   

   यह नियम सभी

   ,

   , और

   तत्वों को नीला बना देगा।

5. वंशज चयनकर्ता:

   • उन तत्वों को लक्षित करता है जो अन्य तत्वों के अंदर (वंशज) हैं।
   • उदाहरण:

    div p {
      font-style: italic;
    }
   

   यह सभी

   तत्वों को

   के अंदर इटैलिकाइज़ कर देगा।
   

    
   
      
   This text is italicized because it's inside a div.
    
   

   सीएसएस गुणों को समझना

   सीएसएस गुण परिभाषित करते हैं कि आप चयनित तत्वों के किन पहलुओं को स्टाइल करना चाहते हैं। प्रत्येक संपत्ति के बाद एक मान आता है जो वांछित परिणाम निर्दिष्ट करता है।

   उदाहरण गुण:

   • रंग:

     • पाठ का रंग सेट करता है।
     • उदाहरण:

     h1 {
       color: red;
     }
     

   • पृष्ठभूमि का रंग:

     • पृष्ठभूमि का रंग सेट करता है।
     • उदाहरण:

     body {
       background-color: #f0f0f0;
     }
     

   • फ़ॉन्ट आकार:

     • टेक्स्ट का आकार सेट करता है।
     • उदाहरण:

     p {
       font-size: 16px;
     }
     

   • अंतर:

     • एक तत्व के बाहर स्थान सेट करता है।
     • उदाहरण:

     .box {
       margin: 20px;
     }
     

   • पैडिंग:

     • किसी तत्व के अंदर, सामग्री और सीमा के बीच स्थान सेट करता है।
     • उदाहरण:

     .content {
       padding: 10px;
     }
     

   व्यावहारिक उदाहरण:

   हमने जो सीखा है उसे एक सरल उदाहरण के साथ जोड़ते हैं।

   HTML:
   

   
     
   Welcome to CSS Basics
     
   This is an introduction to CSS selectors and properties.
     
   Selectors help you target elements, and properties allow you to style them.
   
   

   सीएसएस:
   

   /* ID Selector */
   #container {
     border: 2px solid black;
     padding: 10px;
   }
   
   /* Element Selector */
   h1 {
     color: purple;
   }
   
   /* Class Selector */
   .intro {
     background-color: lightblue;
     font-size: 18px;
   }
   
   /* Group Selector */
   h1, p {
     font-family: Arial, sans-serif;
   }
   
   /* Descendant Selector */
   #container p {
     margin-bottom: 15px;
   }
   

   इस उदाहरण में:

   • #container div को काले बॉर्डर और पैडिंग के साथ स्टाइल किया गया है।

   • शीर्षक बैंगनी रंग का है।

   • कक्षा परिचय वाले पैराग्राफ में हल्के नीले रंग की पृष्ठभूमि और एक बड़ा फ़ॉन्ट आकार है।
   • दोनों

     और

     तत्व एरियल फ़ॉन्ट का उपयोग करते हैं।

   • #container के अंदर सभी पैराग्राफ में रिक्ति के लिए निचला मार्जिन है।

   अभ्यास अभ्यास

   1. शीर्षकों, अनुच्छेदों और प्रभागों के साथ एक सरल HTML फ़ाइल बनाएं।
   2. अपनी सामग्री को स्टाइल करने के लिए विभिन्न चयनकर्ताओं और गुणों के साथ प्रयोग करें।
   3. नेस्टेड तत्वों को स्टाइल करने के लिए वंशज चयनकर्ता का उपयोग करने का प्रयास करें।
   4. कई तत्वों पर समान शैलियों को लागू करने के लिए समूह चयनकर्ता के साथ खेलें।

   ---

   अगला: अगले व्याख्यान में, हम सीएसएस बॉक्स मॉडल का पता लगाएंगे और सीखेंगे कि मार्जिन, बॉर्डर, पैडिंग और सामग्री आपके लेआउट को परिभाषित करने के लिए एक साथ कैसे आते हैं वेब तत्व. वहाँ मिलते हैं!

   मेरा अनुसरण करो -

   लिंक्डइन- रिदॉय हसन

   -