सीएसएस प्रकार चयनकर्ता

CSS प्रकार चयनकर्ता (इसे तत्व प्रकार चयनकर्ता . भी कहा जाता है ) का उपयोग HTML तत्वों को उनके प्रकार से लक्षित करने के लिए किया जाता है। प्रकार कोई भी अंतर्निहित HTML तत्व हो सकता है, जैसे <h2> , <p> , <button> ।

टाइप सिलेक्टर सिंटैक्स

हम प्रकार चयनकर्ता के माध्यम से तत्वों को स्टाइल करने के लिए निम्नलिखित सिंटैक्स का उपयोग करते हैं

element-name {
    property-name: value;
}

उदाहरण के लिए आइए इस बटन तत्व को इसके प्रकार चयनकर्ता के माध्यम से स्टाइल करें:

<button>Click me!</button>

सीएसएस:

button {
    font-size: 32px;
    padding: 1rem;
    color: red;
}

परिणाम:

जब आप प्रकार चयनकर्ता का उपयोग करते हैं तो आप व्यापक रूप से . अपनी वेबसाइट पर तत्वों को स्टाइल करते हैं

इसलिए यदि आपकी वेबसाइट पर 10 बटन तत्व हैं, और आप ऊपर से सीएसएस का उपयोग करते हैं, तो प्रत्येक बटन को वही स्टाइल मिलेगा। यह हो सकता है या नहीं संदर्भ के आधार पर आप जो चाहते हैं, वही बनें।

आधार शैलियां

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

जिन क्षेत्रों में आप अक्सर संगत रहना चाहते हैं:

• फ़ॉन्ट (टाइपफेस भी कहा जाता है)
• फ़ॉन्ट आकार
• लाइन की ऊंचाई
• रंग
• स्पेसिंग (व्हाइटस्पेस)

उदाहरण के लिए, अपने UI में फ़ॉन्ट परिवारों की अपनी पसंद के अनुरूप होना एक अच्छा अभ्यास है। आप 5 अलग-अलग फोंट का उपयोग नहीं करना चाहते हैं, यह आपके UI को अजीब और असंगत बनाता है। आप अधिकांश वेबसाइटों पर 1 और अधिकतम 3 विभिन्न फ़ॉन्ट परिवारों के बीच कहीं चाहते हैं।

मान लें कि आप अपनी वेबसाइट पर दो प्रकार के फोंट का उपयोग करना चाहते हैं:

1. आपके अनुच्छेदों और सूचियों के लिए एक सेरिफ़
2. बाकी सब कुछ के लिए एक सैन्स सेरिफ़।

इस मामले में, उन फ़ॉन्ट परिवारों को लागू करने के लिए विस्तृत प्रकार चयनकर्ता का उपयोग करना सही समझ में आता है:

/* Roboto is a sans serif*/
html, body {
  font-family: roboto;  
}

/* Merriweather is a serif*/
p, li {
  font-family: merriweather;
}

ऊपर दिए गए CSS के साथ, प्रत्येक HTML तत्व रोबोटो फ़ॉन्ट का उपयोग करेगा, सिवाय पैराग्राफ और सूचियों के जो Merriweather का उपयोग करेगा।

प्रकार चयनकर्ता का उपयोग कब नहीं करना चाहिए?

आम तौर पर किसी भी तत्व को व्यापक स्ट्रोक के साथ "ओवर स्टाइल" करना एक बुरा अभ्यास है क्योंकि यह आपके पृष्ठ पर उस तत्व के प्रत्येक प्रतिनिधित्व को प्रभावित करता है।

उदाहरण के लिए, अपने CSS में ऐसा न करें:

button {
  font-size: 1.125rem;
  padding: 1.5rem;
  margin-top: 1rem;
  border-radius: 8px;
  border: 1px solid #444444;
  color: green; 
  background-color: black; 
  transition: all 1s ease-in;
}

उपरोक्त शैलियों का एक समूह प्रत्येक . पर लागू होगा आपकी वेबसाइट पर बटन तत्व। संभावना है कि आपकी वेबसाइट पर विभिन्न भूमिकाओं वाले कई बटन हैं। यद्यपि आप चाहते हैं कि आधार UI डिज़ाइन सुसंगत हो (विशेषकर टाइपोग्राफी) आप शायद नहीं चाहते कि वे सभी बिल्कुल एक जैसे दिखें या व्यवहार करें। विशेष रूप से मार्जिन वैल्यू जैसी चीजें किसी दिए गए तत्व प्रकार पर व्यापक रूप से लागू होने के लिए खतरनाक होती हैं।

बेशक, आप किसी वर्ग चयनकर्ता का उपयोग करके किसी तत्व पर किसी भी आधार स्टाइल को हमेशा ओवरराइड कर सकते हैं। हालांकि, कक्षाओं का उपयोग करने का उद्देश्य तत्व चयनकर्ता से पारित आधार शैलियों को पूर्ववत/ओवरराइड करने में समय व्यतीत करना नहीं है।

तत्वों पर कक्षाओं का उपयोग करने का उद्देश्य है:

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

संक्षेप में:

• सामान्य शैलियों की आधार रेखा स्थापित करने के लिए प्रकार चयनकर्ता का उपयोग करें जो स्थिरता के माध्यम से आपके ब्रांड की दृश्य पहचान को लागू करती हैं।
• आधार शैलियों के शीर्ष पर निर्माण करने के लिए कक्षाओं (और कभी-कभी आईडी) का उपयोग करें, विशिष्ट वातावरण में उनकी भूमिका के आधार पर तत्वों को स्टाइल करें।