जब आप किसी वेबसाइट को डिज़ाइन कर रहे हों, तो आप किसी तत्व को उस समय लागू करना चाह सकते हैं जब वह उपयोगकर्ता द्वारा सक्रिय किया जा रहा हो। उदाहरण के लिए, जब उपयोगकर्ता बटन या लिंक पर क्लिक करता है, तो हो सकता है कि आप किसी बटन या लिंक का रंग बदलना चाहें।
यहीं पर CSS :active pseudo-class आता है। :active pseudo-class आपको उन तत्वों का चयन करने की अनुमति देता है जिन्हें उपयोगकर्ता द्वारा सक्रिय किया गया है, जिसके लिए आप शैलियों को लागू कर सकते हैं।
यह ट्यूटोरियल उदाहरणों के साथ, CSS छद्म-वर्गों की मूल बातें और आप अपने कोड में :active छद्म-वर्ग का उपयोग कैसे कर सकते हैं, इस पर चर्चा करेंगे। इस ट्यूटोरियल को पढ़ने के अंत तक, आप :active छद्म-वर्ग का उपयोग करने में विशेषज्ञ होंगे।
सीएसएस छद्म-वर्ग
सीएसएस में, चयनकर्ताओं का उपयोग उन तत्वों का चयन करने के लिए किया जाता है जिन पर शैली या शैलियों का सेट लागू किया जाना चाहिए। उदाहरण के लिए, एक चयनकर्ता वेब पेज पर सभी
या टैग का चयन कर सकता है, जिसके लिए शैलियों का एक सेट लागू किया जाएगा।
अक्सर, जब आप किसी वेबसाइट को स्टाइल कर रहे होते हैं, तो आप केवल तभी स्टाइल लागू करना चाहेंगे, जब कोई तत्व एक विशेष स्थिति में प्रवेश कर गया हो, जैसे कि उपयोगकर्ता द्वारा क्लिक किया जाना या माउस पर रखा जाना। यहीं से छद्म वर्ग आते हैं।
छद्म-वर्ग एक चयनकर्ता में जोड़े गए कीवर्ड हैं जो आपको किसी विशेष तत्व का चयन करने की अनुमति देते हैं जब वह तत्व किसी निश्चित स्थिति में मौजूद होता है।
इस ट्यूटोरियल के लिए, हम :active pseudo-class पर ध्यान केंद्रित करने जा रहे हैं।
CSS :सक्रिय छद्म वर्ग
:सक्रिय छद्म वर्ग आपको उस तत्व का चयन करने की अनुमति देता है जिसे उपयोगकर्ता द्वारा सक्रिय किया जा रहा है। CSS शब्दों में, "सक्रिय" का अर्थ है जब कोई उपयोगकर्ता माउस बटन दबाता है और तत्व पर क्लिक करता है।
81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।
बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।
सक्रिय छद्म वर्ग आमतौर पर और तत्वों के साथ प्रयोग किया जाता है। उदाहरण के लिए, आप किसी लिंक पर क्लिक करने पर उसके रंग को लाल रंग में बदलने के लिए :active छद्म-वर्ग का उपयोग कर सकते हैं, या बटन के पृष्ठभूमि रंग को क्लिक करने पर हल्के नीले रंग में बदल सकते हैं।
एक बार जब उपयोगकर्ता किसी तत्व पर क्लिक करना बंद कर देता है, तो तत्व अब "सक्रिय" नहीं होगा। इसलिए, जब उपयोगकर्ता किसी तत्व पर क्लिक करना बंद कर देता है, तो सक्रिय चयनकर्ता द्वारा तत्व का चयन नहीं किया जाएगा।
CSS :सक्रिय उदाहरण
आइए दो उदाहरणों के माध्यम से चलते हैं कि आप कैसे उपयोग कर सकते हैं:सक्रिय छद्म वर्ग।
सक्रिय लिंक
मान लीजिए कि हम एक स्थानीय कार्ड गेम क्लब, विजार्ड्स ऑफ द बोर्ड्स के लिए एक वेबसाइट डिजाइन कर रहे हैं। हमें एक "अबाउट" पेज बनाने का काम सौंपा गया है जिसमें एक वेब पेज का लिंक शामिल है जो क्लब के सदस्यों द्वारा खेले जाने वाले कार्ड गेम को सूचीबद्ध करता है।
डिफ़ॉल्ट रूप से, यह लिंक हल्के नीले रंग में दिखाई देना चाहिए। जब इस लिंक पर क्लिक किया जाता है, तो इसके टेक्स्ट का रंग नारंगी में बदल जाना चाहिए। इस कार्य को पूरा करने के लिए, हम :active छद्म वर्ग का उपयोग कर सकते हैं। लिंक पर क्लिक करने पर हम अपने टेक्स्ट का रंग बदलने के लिए कोड का उपयोग करेंगे: <html>
<p>Wizards of the Boards is a Philadelphia, PA-based card game club. The club, founded by Michael Johnson and Gabriella Patel in 2004, welcomes players of all card games to come along. The club meets twice each week, on Mondays and Fridays, to discuss the latest in the card games our members play, and to sit down for a few matches of our favorite games.
To learn more about the games we play at Wizards of the Boards, <a href="/games.html">click here</a>.</p>
</html>
<style>
a {
color: lightblue;
}
a:active {
color: orange;
}
</style>
हमारा कोड लौटाता है: हमारे एचटीएमएल/सीएसएस कोड का आउटपुट देखने के लिए ऊपर दिए गए कोड संपादक में बटन।
हमारी एचटीएमएल फाइल में, हमने
टैग्स का उपयोग करके टेक्स्ट के एक पैराग्राफ को परिभाषित किया है जो बोर्ड्स कार्ड गेम क्लब के जादूगरों के इतिहास को रेखांकित करता है। हमारे
टैग में, हमने एक टैग निर्दिष्ट किया है जो "games.html" पृष्ठ से लिंक करता है, और जब उपयोगकर्ता "यहां क्लिक करें" टेक्स्ट पर क्लिक करता है तो ट्रिगर होता है।
हमारे सीएसएस कोड में, हमने दो स्टाइल नियम निर्दिष्ट किए हैं। सबसे पहले, हमने एक नियम निर्दिष्ट किया है जो सभी टैग के टेक्स्ट रंग को हल्का नीला सेट करता है। फिर, हमने सक्रिय चयनकर्ता का उपयोग करके एक नियम निर्दिष्ट किया जो सभी सक्रिय टैग के टेक्स्ट रंग को नारंगी पर सेट करता है। दूसरे शब्दों में, जब कोई उपयोगकर्ता उस पर क्लिक कर रहा होता है, तो यह नियम किसी लिंक का रंग बदल देता है।
सक्रिय बटन
हम विजार्ड्स ऑफ बोर्ड्स कार्ड गेम क्लब के लिए एक फॉर्म पर काम कर रहे हैं जो लोगों को क्लब में अपनी रुचि जमा करने की अनुमति देता है।
हमारे फॉर्म के अंत में, हम एक बटन बनाना चाहते हैं जो कहता है "अपनी रुचि जमा करें"। जब यह बटन क्लिक किया जाता है, तो बटन के चारों ओर एक 3px चौड़ा नारंगी बॉर्डर लगाया जाना चाहिए।
हम निम्नलिखित कोड का उपयोग करके यह बटन बना सकते हैं:
<html>
<button>Submit Your Interest</button>
</html>
<style>
button:active {
border: 3px solid orange;
}
</style>
हमारा कोड लौटाता है: हमारे एचटीएमएल/सीएसएस कोड का आउटपुट देखने के लिए ऊपर दिए गए कोड संपादक में बटन।
आइए हमारे कोड को तोड़ दें। हमारी HTML फ़ाइल में, हमने टैग का उपयोग करके एक बटन को परिभाषित किया है। इस बटन में "अपनी रुचि जमा करें" टेक्स्ट है।
हमारे सीएसएस स्टाइल शीट में, हमने एक नियम परिभाषित किया है जो उपयोगकर्ता द्वारा सक्रिय किए जाने पर टैग पर लागू होता है। यह नियम हमारे बटन के चारों ओर एक 3px-चौड़ा ठोस बॉर्डर बनाता है। हम बटन के सक्रिय होने पर ही इस नियम को लागू करने के लिए :active चयनकर्ता का उपयोग करते हैं।
इसलिए, यदि हम अपने बटन पर क्लिक करते हैं, तो एक नारंगी बॉर्डर दिखाई देगा, और जैसे ही हम बटन पर क्लिक करना बंद करेंगे, बॉर्डर गायब हो जाएगा।
निष्कर्ष
CSS:सक्रिय छद्म वर्ग आपको एक तत्व का चयन करने की अनुमति देता है जब वह "सक्रिय" स्थिति में होता है। एक बार जब आप एक सक्रिय तत्व का चयन कर लेते हैं, तो आप तत्व पर शैली या शैलियों का सेट लागू कर सकते हैं।
:सक्रिय छद्म-वर्ग आमतौर पर टैग और <बटन> टैग के साथ प्रयोग किया जाता है ताकि प्रभाव पैदा किया जा सके जो क्रमशः किसी लिंक या बटन पर क्लिक करने पर ट्रिगर होते हैं।
इस ट्यूटोरियल ने CSS छद्म-वर्गों की मूल बातें और :active छद्म-वर्ग का उपयोग करने के तरीके पर चर्चा की। अब आप एक विशेषज्ञ की तरह :सक्रिय छद्म वर्ग का उपयोग शुरू करने के लिए आवश्यक ज्ञान से लैस हैं।
सीएसएस सिंटेक्स
सीएसएस धुंधला
CSS
सी प्रोग्रामिंग
C++
Redis
बाश प्रोग्रामिंग
Python
Java
डेटाबेस
HTML
Javascript
प्रोग्रामिंग
CSS
Ruby
SQL
IOS
Android
Mongodb
MySql
C#
PHP
SQL Server
CSS
सीएसएस अस्पष्टता
सीएसएस फ्लोट
सीएसएस ग्रेडिएंट
सीएसएस मार्जिन
सीएसएस सिंटेक्स
सीएसएस सक्रिय
सीएसएस धुंधला
सीएसएस बटन
CSS !महत्वपूर्ण नियम:इसका उपयोग कब करें
सीएसएस अवधि
सीएसएस विशिष्टता
सीएसएस कीफ़्रेम
CSS के साथ सक्रिय लिंक का रंग बदलें
CSS की भूमिका :सक्रिय चयनकर्ता
CSS का उपयोग करें:सक्रिय लिंक को स्टाइल करने के लिए सक्रिय चयनकर्ता। आप :सक्रिय चयनकर्ता को लागू करने के लिए निम्न कोड चलाने का प्रयास कर सकते हैं - उदाहरण <!DOCTYPE html>
<html>
<head>
<style>
a:active {
&nb
CSS के साथ सक्रिय HTML एंकर को हाइलाइट करने की शैली
CSS के साथ सक्रिय HTML एंकर को हाइलाइट करने के लिए, :target चयनकर्ता का उपयोग करें। उदाहरण आप :लक्ष्य चयनकर्ता को लागू करने के लिए निम्न कोड चलाने का प्रयास कर सकते हैं: <!DOCTYPE html>
<html>
<head>
<style>
:सीएसएस में सक्रिय छद्म वर्ग
छद्म वर्ग एक तत्व या एक सीएसएस चयनकर्ता की अलग-अलग स्थिति दिखाना है। सक्रिय छद्म वर्ग यह दिखाना है कि तत्व सक्रिय अवस्था में है। यह छद्म वर्ग ज्यादातर लिंक और बटन या किसी अन्य तत्व से जुड़ा हुआ है जो सक्रिय हो सकता है। उदाहरण के लिए यदि यह लिंक से जुड़ा है तो लिंक सक्रिय है। सिंटैक्स a:active { co
© कॉपीराइट
https://in.wsxdn.com
सर्वाधिकार सुरक्षित