Computer >> कंप्यूटर >  >> प्रोग्रामिंग >> CSS

CSS का उपयोग करके Cursor का रूप बदलना

<घंटा/>

हम CSS कर्सर प्रॉपर्टी का उपयोग करके HTML दस्तावेज़ में विभिन्न तत्वों के लिए कर्सर छवि में हेरफेर कर सकते हैं।

सिंटैक्स

CSS कर्सर प्रॉपर्टी का सिंटैक्स इस प्रकार है:चयनकर्ता { कर्सर:/*value*/}

CSS कर्सर संपत्ति के लिए निम्नलिखित मान हैं -

<टेबल> <थेड> क्रमांक <थ> मूल्य और विवरण 1 उपनाम
यह इंगित करता है कि किसी चीज़ का उपनाम बनाया जाना है
2 ऑल-स्क्रॉल
यह इंगित करता है कि किसी भी दिशा में कुछ स्क्रॉल किया जा सकता है
3 स्वतः
यह डिफ़ॉल्ट है और ब्राउज़र एक कर्सर सेट करता है
4 सेल
यह इंगित करता है कि एक सेल (या कोशिकाओं का सेट) का चयन किया जा सकता है
5 संदर्भ-मेनू
यह इंगित करता है कि एक संदर्भ-मेनू उपलब्ध है
6 col-resize
यह इंगित करता है कि स्तंभ को क्षैतिज रूप से आकार दिया जा सकता है
7 प्रतिलिपि
यह इंगित करता है कि कुछ कॉपी किया जाना है
8 क्रॉसहेयर
यह एक क्रॉसहेयर के रूप में प्रस्तुत करता है
9 डिफ़ॉल्ट
यह डिफ़ॉल्ट कर्सर प्रस्तुत करता है
10 ई-आकार बदलें
यह इंगित करता है कि एक बॉक्स के किनारे को दाएं (पूर्व) ले जाया जाना है
11 ईव-आकार बदलें
यह एक द्विदिश आकार बदलने वाले कर्सर को इंगित करता है
12 पकड़ो
यह इंगित करता है कि कुछ पकड़ा जा सकता है
13 हथियाना
यह इंगित करता है कि कुछ पकड़ा जा सकता है
14 सहायता
यह इंगित करता है कि सहायता उपलब्ध है
15 स्थानांतरित करें
यह इंगित करता है कि कुछ स्थानांतरित किया जाना है
16 n-आकार बदलें
यह इंगित करता है कि एक बॉक्स के किनारे को ऊपर (उत्तर) ले जाया जाना है
17 न-आकार बदलें
यह इंगित करता है कि एक बॉक्स के किनारे को ऊपर और दाएं (उत्तर/पूर्व) ले जाया जाना है
18 nesw-resize
यह एक द्विदिश आकार बदलने वाले कर्सर को इंगित करता है
19 ns-resize
यह एक द्विदिश आकार बदलने वाले कर्सर को इंगित करता है
20 nw-resize
यह इंगित करता है कि एक बॉक्स के किनारे को ऊपर और बाएं (उत्तर/पश्चिम) ले जाया जाना है
21 nwse-resize
यह एक द्विदिश आकार बदलने वाले कर्सर को इंगित करता है
22 कोई ड्रॉप नहीं
यह इंगित करता है कि खींची गई वस्तु को यहाँ नहीं छोड़ा जा सकता
23 कोई नहीं
तत्व के लिए कोई कर्सर प्रदान नहीं किया गया है
24 अनुमति नहीं है
यह इंगित करता है कि अनुरोधित कार्रवाई निष्पादित नहीं की जाएगी
25 सूचक
यह एक सूचक है और एक लिंक को इंगित करता है
26 प्रगति
यह इंगित करता है कि कार्यक्रम व्यस्त है (प्रगति में)
27 पंक्ति का आकार बदलना
यह इंगित करता है कि पंक्ति को लंबवत रूप से आकार दिया जा सकता है
28 एस-आकार बदलें
यह इंगित करता है कि एक बॉक्स के किनारे को नीचे (दक्षिण) ले जाया जाना है
29 से-आकार बदलें
यह इंगित करता है कि एक बॉक्स के किनारे को नीचे और दाएं (दक्षिण/पूर्व) ले जाया जाना है
30 स्व-आकार बदलें
यह इंगित करता है कि एक बॉक्स के किनारे को नीचे और बाएं (दक्षिण/पश्चिम) ले जाया जाना है
31 पाठ
यह उस पाठ को इंगित करता है जिसे चुना जा सकता है
32 यूआरएल
एक सामान्य कर्सर के साथ कस्टम कर्सर के लिए URL की अल्पविराम से अलग की गई सूची, अंत में असफल सुरक्षित के रूप में उल्लिखित है
33 ऊर्ध्वाधर-पाठ
यह लंबवत-पाठ इंगित करता है जिसे चुना जा सकता है
34 w-आकार बदलें
यह इंगित करता है कि एक बॉक्स के किनारे को बाईं ओर (पश्चिम) ले जाया जाना है
35 प्रतीक्षा करें
यह इंगित करता है कि कार्यक्रम व्यस्त है
36 ज़ूम-इन करें
यह इंगित करता है कि कुछ ज़ूम इन किया जा सकता है
37 ज़ूम-आउट करें
यह इंगित करता है कि कुछ ज़ूम आउट किया जा सकता है
38 प्रारंभिक
यह कर्सर संपत्ति को उसके डिफ़ॉल्ट मान पर सेट करता है।
39 उत्तराधिकारी
यह अपने मूल तत्व से कर्सर संपत्ति प्राप्त करता है।

CSS कर्सर प्रॉपर्टी को लागू करने के लिए निम्नलिखित एक उदाहरण है

उदाहरण

बाएं कोने
up
दायां कोना
अनुमति नहीं है
Pointer

आउटपुट

CSS का उपयोग करके Cursor का रूप बदलना


  1. CSS का उपयोग करके लिंक का रंग सेट करना

    CSS हमें लिंक्स को कलर करने की अनुमति देता है। कलर प्रॉपर्टी का इस्तेमाल किसी एलीमेंट में टेक्स्ट का रंग सेट करने के लिए किया जाता है। छद्म चयनकर्ताओं का क्रम निम्न द्वारा दिया जाता है:- :लिंक, :विजिटेड, :होवर, :सक्रिय। सिंटैक्स CSS कलर प्रॉपर्टी का सिंटैक्स इस प्रकार है - Selector {    

  1. CSS का उपयोग करके तत्व के टेक्स्ट का रंग सेट करना

    CSS कलर प्रॉपर्टी का इस्तेमाल किसी एलीमेंट के टेक्स्ट का रंग बदलने के लिए किया जाता है। हम मान को मानक रंग नाम, rgb(), rgba(), hsl(), hsla() और हेक्साडेसिमल मान के रूप में निर्दिष्ट कर सकते हैं। सिंटैक्स CSS कलर प्रॉपर्टी का सिंटैक्स इस प्रकार है - Selector {    color: /*value*/ } निम्नल

  1. CSS का उपयोग करके स्क्रीन के आकार के आधार पर लेआउट बदलना

    CSS में स्क्रीन के आकार के आधार पर लेआउट बदलने के लिए, कोड इस प्रकार है - उदाहरण <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> body {    font-family: "Segoe UI", Tahom