शैलीचे वर्ग आणि आयडी वापरणे

क्लासेस आणि आयडी मदत तुमची सीएसएस वाढवा

आजच्या वेबवर वेबसाइट तयार करणेसाठी सीएसएस (कॅस्केडिंग शैली पत्रके) ची खोल समज असणे आवश्यक आहे. हे असे दिशानिर्देश आहेत की आपण ब्राउझर विंडोमध्ये तो कसा मांडणी करतो हे निर्धारित करण्यासाठी आपण वेबसाइट देता. आपण आपल्या HTML दस्तऐवजावरील "शैली" ची एक श्रृंखला लागू करता जे आपल्या वेबपेजचे स्वरूप आणि अनुभव तयार करेल.

डॉक्युमेंटमध्ये त्या नमूद केलेल्या शैलींना लागू करण्याचे अनेक मार्ग आहेत, परंतु बर्याचदा आपण एका डॉक्युमेंटमधील काही घटकांवर एक शैली वापरु इच्छित आहात, परंतु त्या घटकाची सर्व उदाहरणे नाही.

आपण एक शैली तयार करू शकता जी आपण प्रत्येक घटकासाठी शैली नियम न सोडता एखाद्या दस्तऐवजात अनेक घटकांसाठी अर्ज करू शकता. या इच्छित शैली साध्य करण्यासाठी, आपण वर्ग आणि आयडी HTML गुणधर्मांचा वापर कराल. हे गुणधर्म जागतिक गुणधर्म आहेत जे जवळजवळ प्रत्येक HTML टॅगवर लागू केले जाऊ शकतात .त्याचा अर्थ असा की आपण आपल्या दस्तऐवजामध्ये विभाग, परिच्छेद, लिंक्स, सूच्या किंवा एचटीएमएल इतर कोणत्याही प्रकारचे स्टिलिंग करत आहात, आपण वर्ग आणि आयडी गुणधर्मांमध्ये बदलू शकता. हे कार्य पूर्ण करण्यात मदत!

वर्ग निवडक

क्लास सिलेक्टर आपल्याला एका डॉक्युमेंटमध्ये समान एलिमेंट किंवा टॅग मध्ये एकाधिक स्टॉल्स सेट करण्याची परवानगी देतो. उदाहरणार्थ, दस्तऐवजाच्या उर्वरीत मजकूरापैकी एखाद्या विशिष्ट भागामध्ये आपल्याला म्हटले जाणारे आपल्या मजकूरचे काही विभाग असू शकतात. हे हायलाइट केलेले विभाग आपण "पृष्ठावर" सेटिंग करीत असलेल्या "अॅलर्ट" असू शकतात आपण यासारख्या वर्गांसह आपले परिच्छेद नियुक्त करू शकता:

पी {रंग: # 0000ff; }
p.alert {color} # ff0000; }

हे शैली सर्व परिच्छेदांचा रंग निळ्या (# 0000ff) वर सेट करते, परंतु "अॅलर्ट" च्या क्लास विशेषतासह कोणतेही परिच्छेद लाल (# एफएफ 0000) मध्ये टाइप केलेल्याऐवजी. याचे कारण असे की क्लासच्या वैशिष्ट्यामध्ये प्रथम सीएसएस नियमापेक्षा उच्च विशिष्ठता आहे, जी केवळ एक टॅग निवड वापरते.

CSS सह कार्य करताना, एक अधिक विशिष्ट नियम कमी विशिष्ट भाग अधिलिखित करेल. त्यामुळे या उदाहरणात, अधिक सामान्य नियम सर्व परिच्छेदाचे रंग सेट करते, परंतु दुसरे, अधिक विशिष्ट नियम अधिशून्य करते केवळ काही पॅराग्राफवर सेट करणे.

हे काही HTML मार्कअप मध्ये कसे वापरले जाऊ शकते ते येथे आहे:

हा परिच्छेद निळ्या रंगात प्रदर्शित केला जाईल, जो पृष्ठासाठी डिफॉल्ट आहे

हा परिच्छेद देखील निळ्या रंगात असेल.

आणि हे परिच्छेद लाल रंगात प्रदर्शित केले जातील कारण वर्ग गुणधर्म घटक निवडक शैलीतून मानक निळा रंग अधोरेखित करेल.

त्या उदाहरणात, "p.alert" ची शैली केवळ "अॅलर्ट" वर्गाचा वापर करणार्या परिच्छेदाच्या घटकांना लागू होईल. जर आपण त्यास एकाधिक HTML घटकांमधून वापरू इच्छित असाल तर आपण फक्त HTML घटक सुरुवातीपासूनच दूर करू शकता. शैली कॉल (केवळ काळ (.) सोडून द्या), याप्रमाणे:

.alert {background-color: # ff0000;}

हा वर्ग आता कोणत्याही घटकासाठी उपलब्ध आहे ज्यात त्याची आवश्यकता आहे "एचटीएमएल" च्या क्लास ऍट्रिब्यूट मूव्हीचे तुमच्या HTML चे कोणतेही भाग आता ही स्टाईल मिळेल. खाली HTML मध्ये, आम्ही परिच्छेद आणि "अलर्ट" क्लासचा वापर करणार्या मथळ्याची पातळी दोन्ही आहे. या दोन्ही गोष्टींमध्ये CSS चे आधारावर लाल रंगाची पार्श्वभूमी राहील जे आपण आत्ताच दर्शविले आहे.

हा परिच्छेद लाल रंगात लिहिला जाईल

आणि हा एच 2 देखील लाल होईल.

आज वेबसाइट्सवर, क्लास ऍट्रिब्यूट्सचा वापर बहुतेक घटकांवर केला जातो कारण IDs हे एका विशिष्टतेच्या दृष्टीकोनातून कार्य करणे सोपे होते. आपल्याला वर्ग गुणधर्मांसह सर्वात जास्त वर्तमान HTML पृष्ठे आढळतील, त्यातील काही कागदपत्रांमध्ये इतर अनेक वेळा पुनरावृत्ती केली जातात आणि इतर जे फक्त एकदाच प्रकट होऊ शकतात.

आयडी निवडकर्ते

आयडी सिलेक्टर टॅग किंवा इतर एचटीएमएल घटकांशी संबंध न ठेवता विशिष्ट शैलीसाठी नाव देण्यास अनुमती देतो. समजा एका इव्हेंटबद्दल माहिती असलेल्या आपल्या HTML मार्कअपमध्ये आपण एक विभाग तयार केला होता.

आपण हा विभाग "इव्हेंट" चे आयडी ऍट्रिब्यूट देऊ शकता, आणि जर आपण 1-पिक्सेल व्हाइड ब्लॅक बॉर्डरसह त्या डिव्हिजनची रूपरेषा काढू इच्छित असाल तर आपण यासारखे आयडी कोड लिहू शकता:

# इव्हेंट {सीमा: 1px घन # 000; }

आयडी निवडकर्त्यांसोबत आव्हान म्हणजे ते HTML डॉक्युमेंटमध्ये पुनरावृत्ती करू शकत नाहीत. ते अद्वितीय असणे आवश्यक आहे (आपण आपल्या साइटच्या एकाधिक पृष्ठांवर समान ID चा वापर करू शकता परंतु प्रत्येक वैयक्तिक HTML दस्तऐवजात केवळ एकदाच). म्हणून जर आपल्याकडे या सीमारेषेची 3 घटना असू शकतात तर आपल्याला त्यांना "event1", "event2" आणि "event3" च्या आयडी ऍट्रिब्यूटची आवश्यकता आहे आणि त्यातील प्रत्येक शैली द्या. म्हणूनच, "कार्यक्रम" वरील व प्रथम श्रेणीच्या वैशिष्ट्यांचा वापर करणे सोपे होईल आणि त्यांना सर्व एकाचवेळी शैली द्यावी लागेल.

आयडी ऍट्रिब्यूट्ससह आणखी एक आव्हान आहे की त्यांना त्यांच्या वर्ग गुणांपेक्षा उच्च विशिष्ठता आहे. याचा अर्थ असा की जर आपल्याला आधीची स्थापना केलेल्या शैलीला ओव्हरराईज करण्याची आवश्यकता असती तर, आपण आयडी वर खूप भक्कम आधार घेतला असेल तर तसे करणे कठीण होऊ शकते. या कारणास्तव अनेक वेब डेव्हलपर्सना त्यांच्या मार्कअपमध्ये आयडी वापरण्यापासून दूर हलविले गेले आहे, जरी ते एकदाच त्या मूल्याचा वापर करण्याचा आपला हेतू आहे आणि त्याऐवजी जवळपास सर्व शैलीसाठी कमी-विशिष्ट वर्ग गुणधर्मांकडे वळले आहे.

एक क्षेत्र जिथे आयडी गुणधर्म प्ले केला जातो तेव्हा आपण पृष्ठ तयार करू इच्छित असतो जे इन-पेज अँकर लिंक आहे. उदाहरणार्थ, आपल्याकडे एखादे पॅरलॅक्स शैली असलेली वेबसाइट असल्यास त्या पृष्ठावरील विविध भागांवरील "उडी" या दुव्यांसह एका पृष्ठावर सर्व सामग्री समाविष्ट असते. हे एन्कर्स दुवे वापरणार्या ID विशेषता आणि मजकूर दुवे वापरून केले जाते.

आपण त्या वैशिष्ट्याचे मूल्य, # चिन्हाच्या पुढे, या दुव्यातील href विशेषतेमध्ये, याप्रमाणे जोडू:

हा दुवा आहे

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

लक्षात ठेवा, जर आपण साईटवर दुवा साधण्यास इच्छुक असाल, तर आयडी गुणधर्मांचा वापर करणे आवश्यक आहे, परंतु तरीही सामान्य सीएसएस स्टाईल हेतूसाठी आपण वर्गांसाठी चालू करु शकता. आज मी अशा प्रकारे पृष्ठे चिन्हांकित करतो - मी शक्य म्हणून जास्तीत जास्त वर्ग निवड करणाऱया वापरल्या आणि फक्त जेव्हा मी सीएसएस साठी हुक म्हणूनच नव्हे तर इन-पेज लिंकप्रमाणे कार्य करण्यास विशेषतेची आवश्यकता त्या वेळी ID वर चालू केले.

जेनिफर क्रिनिन द्वारे मूळ लेख. 8/ 9/17 रोजी जेरेमी गिरर्ड द्वारा संपादित