छद्म तत्व अधिक उन्नत चयनकर्ताओं में से एक हैं जो सीएसएस में उपयोग के लिए उपलब्ध हैं। इन चयनकर्ताओं के पीछे का मुख्य उद्देश्य एचटीएमएल दस्तावेज़ में बदलाव के बिना अद्वितीय स्टाइल बनाना है, जो किसी दिए गए वेबपेज की मूल संरचना बनाने के लिए उपयोग किया जाता है।
CSS में छद्म तत्वों का उपयोग करने का तरीका बताया गया है।
आम छद्म तत्व
छद्म तत्वों की एक व्यापक सूची है जो वेब डेवलपर के जीवन को आसान बनाने के लिए उपलब्ध हैं। इन छद्म तत्वों में से कुछ में शामिल हैं:
- इससे पहले
- उपरांत
- पृष्ठभूमि
- पहली पंक्ति
- पहला अक्षर
विशिष्ट स्थितियों में, कुछ छद्म तत्व दूसरों की तुलना में अधिक उपयुक्त साबित होंगे, लेकिन एक चीज जो निरंतर बनी रहती है वह है किसी भी छद्म तत्व का उपयोग करने के लिए सामान्य संरचना।
छद्म तत्व संरचना उदाहरण
चयनकर्ता:: छद्म तत्व {
/ * सीएसएस कोड * /
} हालांकि आप कर सकते हैं एक चयनकर्ता के रूप में एक HTML तत्व का उपयोग करें, यह अनुशंसा की जाती है कि आप अपने लेआउट में अनपेक्षित तत्वों को लक्षित करने से बचने के लिए एक वर्ग या आईडी का उपयोग करें। तत्व, शैली या डेटा जिसे आप इच्छित स्थान पर सम्मिलित करना चाहते हैं, उसे घुंघराले ब्रेसिज़ के बीच रखा जाना चाहिए।
पहले और बाद में छद्म तत्व सूची में सबसे लोकप्रिय हैं, और यह देखते हुए कि उनका उपयोग करने के कई व्यावहारिक तरीके हैं - यह देखना मुश्किल नहीं है कि क्यों।
CSS में Pseudo-element के पहले का उपयोग करना
हालांकि असंभव नहीं है, लेकिन सीएसएस में पठनीय पाठ के साथ छवियों को ओवरले करना मुश्किल है। यह ज्यादातर इसलिए है क्योंकि छवि और पाठ एक वेबपेज पर एक ही स्थिति पर कब्जा कर लेंगे।
यह अपेक्षाकृत आसान है पाठ के एक समूह की पृष्ठभूमि में एक छवि भेजें, लेकिन जब वह छवि बहुत उज्ज्वल होती है, तो यह उस पाठ को अभिभूत कर देता है जो इसके शीर्ष पर होता है। इन उदाहरणों में, अगला कदम अस्पष्टता संपत्ति का उपयोग करके छवि को कम अपारदर्शी बनाने का प्रयास करना है।
एकमात्र समस्या यह है कि चूंकि छवि और पाठ एक ही स्थिति पर कब्जा कर लेते हैं, इसलिए पाठ भी कुछ हद तक पारदर्शी हो जाएगा।
इस समस्या को हल करने के कुछ प्रभावी तरीकों में से एक पहले छद्म तत्व का उपयोग करके है।
पहले छद्म तत्व उदाहरण का उपयोग करना
।लैंडिंग पेज{
/ * छवि ओवरले पर पाठ को व्यवस्थित करता है * /
प्रदर्शन: फ्लेक्स;
फ्लेक्स-दिशा: कॉलम;
औचित्य-सामग्री: केंद्र;
संरेखित-आइटम: केंद्र;
पाठ-संरेखित करें: केंद्र;
/ * विभिन्न स्क्रीन साइज को समायोजित करने के लिए पेज सेट करता है * /
ऊंचाई: 100vh;
}
.landingPage:: से पहले {
सामग्री:'';
/ * एक छवि आयात करता है * /
पृष्ठभूमि: url ( https://source.unsplash.com/_1EYIHRG014/1600x900)
नो-रिपीट सेंटर / कवर;
/ * छवि के ऊपर एक ओवरले रखता है * /
अपारदर्शिता: 0.4;
/ * छवि को दृश्यमान बनाता है * /
स्थिति: निरपेक्ष;
शीर्ष: 0;
बायां: 0;
चौड़ाई: 100%;
ऊंचाई: 100%;
}ऊपर दिए गए कोड का उपयोग नीचे दिए गए HTML लैंडिंगपेज श्रेणी के साथ किया जाता है। जैसा कि ऊपर दिए गए कोड में दिखाया गया है, पहले छद्म तत्व का उपयोग करके हम छवि को लक्षित कर सकते हैं और छवि के पाठ से संयुक्त होने से पहले उस पर अपारदर्शिता गुण का उपयोग कर सकते हैं।
छद्म तत्व से पहले का उपयोग करना
यह पहले छद्म तत्व का उपयोग करने का परिणाम है
पढ़ने योग्य पाठ के साथ ओवरले और छवि।
यह छवि के ऊपर एक ओवरले में रखा जाएगा और शीर्ष पर प्रदर्शित किया जा रहा स्पष्ट पाठ, जैसा कि नीचे दी गई छवि में दिखाया गया है:
CSS में Pseudo-element का उपयोग करना
बाद के छद्म तत्व के लिए एक व्यावहारिक उपयोग HTML फॉर्म के निर्माण में सहायता करना है। अधिकांश प्रपत्र फ़ील्ड के सेट के साथ बनाए जाते हैं, जिन्हें फ़ॉर्म को सफलतापूर्वक सबमिट करने के लिए डेटा की आवश्यकता होती है।
यह इंगित करने का एक तरीका है कि इस फ़ील्ड के लिए लेबल के बाद तारांकन चिह्न लगाकर किसी फ़ील्ड में डेटा की आवश्यकता होती है। बाद में छद्म तत्व आपको ऐसा करने के लिए एक व्यावहारिक तरीका प्रदान करता है।
छद्म तत्व उदाहरण के बाद का उपयोग करना
.required:: के बाद। "
सामग्री: '*';
लाल रंग;
} आपके फॉर्म के CSS सेक्शन में ऊपर दिए गए कोड को डालने से यह सुनिश्चित हो जाएगा कि आवश्यक लेबल वाले प्रत्येक लेबल को सीधे लाल तारांकन के बाद किया जाएगा। इस उदाहरण में छद्म तत्व भी व्यावहारिक है क्योंकि यह स्टाइल को संरचना से अलग करने में मदद करता है (जो सॉफ्टवेयर विकास में हमेशा आदर्श होता है।)
सामग्री संपत्ति
जैसा कि ऊपर छद्म तत्व उदाहरण के बाद दिखाया गया है, सामग्री संपत्ति वह उपकरण है जिसका उपयोग वेबपृष्ठ पर नई सामग्री डालने के लिए किया जाता है। यह संपत्ति केवल छद्म तत्वों से पहले और बाद में उपयोग की जाती है।
यह ध्यान रखना महत्वपूर्ण है कि भले ही सामग्री संपत्ति को फीड करने के लिए कोई सामग्री उपलब्ध न हो (जैसे पहले छद्म तत्व उदाहरण में उपरोक्त), आपको अभी भी छद्म तत्व के मापदंडों के भीतर सामग्री संपत्ति का उपयोग करने के लिए आवश्यक है ताकि उन्हें काम करने के लिए प्राप्त किया जा सके इरादा है।
अब आप CSS में छद्म तत्वों का उपयोग कर सकते हैं
इस लेख में, आपने सीखा कि अपने CSS प्रोग्राम में छद्म तत्वों को कैसे पहचाना और प्रयोग किया जाता है। आपको छद्म तत्वों से पहले और बाद में पेश किया गया था और दोनों का उपयोग करने के व्यावहारिक तरीके दिए गए थे। आप यह भी देखने में सक्षम थे कि छद्म तत्वों के पहले और बाद के सफल उपयोग के लिए सामग्री संपत्ति क्यों आवश्यक है।
CSS का उपयोग करने के बारे में अधिक जानना चाहते हैं? शुरू करने के लिए इन बुनियादी सीएसएस कोड उदाहरणों की कोशिश करें, फिर उन्हें अपने स्वयं के वेब पृष्ठों पर लागू करें।
आगे पढ़िए
- प्रोग्रामिंग
- वेब डिजाइन
- सीएसएस
कादिशा कीन एक फुल-स्टैक सॉफ्टवेयर डेवलपर और तकनीकी / प्रौद्योगिकी लेखक हैं। वह सबसे जटिल तकनीकी अवधारणाओं में से कुछ को सरल बनाने की विशिष्ट क्षमता है; उत्पादन सामग्री जिसे किसी भी तकनीक नौसिखिए द्वारा आसानी से समझा जा सकता है। वह लेखन के बारे में भावुक है, दिलचस्प सॉफ्टवेयर विकसित कर रहा है, और दुनिया की यात्रा (वृत्तचित्रों के माध्यम से)।
हमारे न्युजलेटर की सदस्यता प्राप्त करें
टेक टिप्स, रिव्यू, फ्री ईबुक और एक्सक्लूसिव डील्स के लिए हमारे न्यूज़लेटर से जुड़ें!
एक और क़दम…!
कृपया हमें आपके द्वारा भेजे गए ईमेल में अपने ईमेल पते की पुष्टि करें।
