सीएसएस सह शैली दुवे कसे

वेब पृष्ठांवर लिंक्स अतिशय सामान्य आहेत, परंतु अनेक वेब डिझाइनर आपल्या सीईएसएसमध्ये त्यांच्याशी त्यांचे संबंध प्रभावीपणे हाताळू शकतील अशी व्यवस्था करतात. आपण भेट दिलेल्या, मंडळात आणि सक्रिय राज्यांसह दुवे परिभाषित करू शकता आपल्या दुवे अधिक पिज्जा देणे किंवा त्यांना बटणे किंवा अगदी प्रतिमा यासारखे बनविण्यासाठी आपण सीमा आणि पार्श्वभूमीसह कार्य देखील करू शकता

बर्याच वेब डिझाइनर "अ" टॅग वर एक शैली परिभाषित करून प्रारंभ करतात:

एक {रंग: लाल; }

हे दुव्यातील सर्व पैलू शैली करेल (होव्हर, भेट दिलेले आणि सक्रिय). प्रत्येक घटकाचा स्वतंत्रपणे शैली करण्यासाठी, आपण दुवा जुड्या-वर्ग वापरणे आवश्यक आहे.

दुय्यम छद्म-वर्ग

आपण दुवा परिभाषित करू शकतील अशा चार प्राथमिक प्रकारचे क्यूडीओ-वर्ग आहेत:

• : दुवा - ही दुव्यासाठी मुलभूत शैली आहे
• : भेट दिलेले - एका दुव्यावर क्लिक केल्यानंतर
• : फिरवा - एखाद्या चित्रावर माऊस जोडून (प्री-क्लिक)
• : सक्रिय - लिंकवर क्लिक केले जात आहे तसे

एक दुय्यम-वर्ग परिभाषित करण्यासाठी, आपल्या सीएसएस निवडीतील टॅगसह त्याचा वापर करा. म्हणून, आपल्या सर्व दुव्यांचा प्रवास रंग बदलण्यासाठी, लिहा:

a: भेट दिलेले {रंग: करडा; }

जर आपण एक प्रकारचा छद्म श्रेणी वापरत असाल, तर त्या सर्वांची शैली करणे ही एक चांगली कल्पना आहे. या प्रकारे आपण अप्रचलित परिणामांमुळे आश्चर्यचकित होणार नाही. म्हणून आपण केवळ आपला रंग बदललेला रंग बदलू इच्छित असाल तर आपल्या दुव्यांमधील सर्व छद्म-गुणधर्म काळा राहतील, तर आपण लिहू इच्छित आहात:

एक: दुवा, एक: होव्हर, एक: सक्रिय {रंग: काळा; } a: भेट दिलेले {रंग: करडा; }

लिंक रंग बदला

रेषीय लिंकचा सर्वात लोकप्रिय मार्ग जेव्हा माउस त्यावर घेतो तेव्हा रंग बदलणे आहे:

एक {रंग: # 00f; } a: hover {color: # 0f0; }

परंतु हे विसरू नका की दुवा कसे दिसते हे आपण प्रभावित करू शकता: सक्रिय गुणधर्म सह त्यावर क्लिक करत आहे:

एक {रंग: # 00f; } a: सक्रिय {color: # f00; }

किंवा आपण भेट दिल्यानंतर या लिंकला भेट देता तेव्हा: भेट दिलेल्या प्रॉपर्टी:

एक {रंग: # 00f; } a: भेट दिलेले {color: # f0f; }

सर्व एकत्र ठेवणे:

एक {रंग: # 00f; } a: भेट दिलेले {color: # f0f; } a: hover {color: # 0f0; } a: सक्रिय {color: # f00; }

चिन्ह किंवा बुलेट्स जोडण्यासाठी दुवे पार्श्वभूमी ठेवा

आपण स्टाइलिश पार्श्वभूमी लेखाप्रमाणे एखाद्या दुव्यावर पार्श्वभूमी ठेवू शकता परंतु पार्श्वभूमीसह थोडेसे खेळून आपण संबंधित चिन्ह असलेले दुवा तयार करू शकता. जोपर्यंत आपला मजकूर मोठा नसेल तोपर्यंत, सुमारे 15px बाय 15px असा एखादा प्रतीक निवडा. पार्श्वभूमी दुव्याच्या एका बाजूला ठेवा आणि पुनरावृत्ती पर्याय पुन्हा-पुन्हा करण्यासाठी सेट करा. नंतर, दुवा दुरूस्त करा जेणेकरून दुवा अंतर्गत मजकूर डाव्या किंवा डावीकडे पुरेसे वर हलविला जाईल चिन्ह पाहण्यासाठी

एक {पॅडिंग: 0 2px 1px 15px; पार्श्वभूमी: #fff url (ball.gif) डावी केंद्र नो-पुनरावृत्ती; रंग: # c00; }

एकदा आपण आपले चिन्ह मिळविले की आपण दुवा बदलण्यासाठी आपल्या होव्हर, सक्रिय आणि भेट दिलेल्या चिन्हासारख्या भिन्न प्रतिमा सेट करू शकता:

एक {पॅडिंग: 0 2px 1px 15px; पार्श्वभूमी: #fff url (ball.gif) डावी केंद्र नो-पुनरावृत्ती; रंग: # c00; } a: hover {background: #fff url (ball2.gif) डावे केंद्र नाही-पुनरावृत्ती; } a: सक्रीय {background: #fff url (ball3.gif) डाव्या केंद्रांची पुनरावृत्ती झाली नाही; }

आपल्या दुवे नुरूप लुक बटन करा

बटणे खूप लोकप्रिय आहेत, परंतु सीएसएस येत असताना, आपल्याला प्रतिमांचा वापर करुन बटणे तयार करणे आवश्यक होते , जे आपल्या पृष्ठांना लोड होण्यास जास्त वेळ देते. सुदैवाने, एक सीमावर्ती शैली आहे जी आपल्याला सीएसएस सारखी सहजतेने बटणासारखे प्रभाव तयार करण्यास मदत करते.

एक सीमा (सीमा: 4px सुरवात; पॅडिंग: 2px; टेक्स्ट-सजावट: काहीही नाही; } a: सक्रिय {सीमा: 4px inset; }

लक्षात ठेवा, आपण प्रारंभ आणि शैलीमध्ये रंग घालता तेव्हा ब्राउझर्स आपल्याला अपेक्षा करतात त्याप्रमाणे आपण ते प्रस्तुत करू शकता. तर, रंगीत बॉर्डरसह येथे फॅनिशर बटन आहे:

एक सीमावर्ती शैली: घन; सीमा-रूंदी: 1px 4px 4px 1px; टेक्स्ट-सजावट: काहीही नाही; पॅडिंग: 4 पीएक्स; सीमा-रंग: # 69f # 00f # 00f # 69f; }

आणि आपण तसेच एका बटन दुव्यांच्या होव्हर आणि सक्रिय शैलीला प्रभावित करू शकता, फक्त त्या सिडू-वर्गांचा वापर करा:

a: दुवा {सीमा-शैली: घन; सीमा-रूंदी: 1px 4px 4px 1px; टेक्स्ट-सजावट: काहीही नाही; पॅडिंग: 4 पीएक्स; सीमा-रंग: # 69f # 00f # 00f # 69f; } a: hover {border-colour: #ccc; }