आपण प्रति घटक एकल सीएसएस श्रेणीपर्यंत मर्यादित नाही आहात
कॅस्केडिंग स्टाइल शीट्स (सीएसएस) आपल्याला त्या घटकास लागू होणारे गुणधर्मांमध्ये हुकूमत करून एखाद्या घटकाची भूमिका स्पष्ट करण्यास अनुमती देते. हे गुणधर्म एकतर आणि आयडी किंवा एक वर्ग असू शकतात आणि, सर्व गुणधर्मांप्रमाणे, ते ज्या घटकांशी संलग्न आहेत त्यास उपयुक्त माहिती जोडते. आपण कोणत्या घटकावर एक गुणविशेष जोडाल यावर अवलंबून, आपण त्या घटकासाठी आणि संपूर्ण वेबसाइटसाठी देखावा आणि अनुभव प्राप्त करण्यासाठी आवश्यक असलेल्या व्हिज्युअल शैली लागू करण्यासाठी एक सीएसएस निवडकर्ता लिहू शकता.
आयडी किंवा वर्ग एकतर सीएसएस नियमांमधुन हूकिंग करण्याच्या उद्देशाने काम करत असताना, आधुनिक वेब डिझाइन पद्धती काही भागांमध्ये आयडी वर वर्गांना पसंत करतात, कारण ते कमी विशिष्ट आणि संपूर्णपणे काम करणे सोपे आहेत. होय, तरीही आपण आयडी वापरणाऱ्या अनेक साइट शोधू शकाल, परंतु हे गुणधर्म भूतकाळातील अतींद्रिय गोष्टींपेक्षा अधिक स्पष्टपणे लागू केले जात आहेत जेव्हा वर्ग आधुनिक वेब पृष्ठांवर घेतले आहेत.
CSS मध्ये एकल किंवा एकाधिक क्लासेस?
बहुतेक बाबतीत आपण एका घटकामध्ये एकच क्लास ऍट्रिब्यूट देऊ शकता, परंतु आपण प्रत्यक्षात आयडीसह ज्या प्रकारे फक्त एकच श्रेणी मर्यादित नाही. जेव्हा घटक केवळ एक आयडी गुणविशेष असू शकतो, आपण पूर्णपणे एक घटक एकाधिक वर्ग देऊ शकता आणि, काही बाबतीत, असे केल्याने आपले पृष्ठ शैलीस सोपे होईल आणि बरेच लवचिक होईल!
एखाद्या घटकामध्ये आपण एकाधिक श्रेण्या नियुक्त करण्याची आवश्यकता असल्यास, आपण अतिरिक्त श्रेण्या जोडू शकता आणि आपल्या वैशिष्ट्यामधील एका जागेसह त्या वेगळे करू शकता
उदाहरणार्थ, या परिच्छेदामध्ये तीन वर्ग आहेत:
pullquote डावीकडे ध्वजांकित "> हे परिच्छेदाचे मजकूर असेल
परिच्छेद टॅगवर खालील तीन वर्ग सेट केले आहेत:
- पुल कोट
- वैशिष्ट्यपूर्ण
- डावे
या सर्व क्लास व्हॅल्यूजमधील स्पेसेसमध्ये लक्षात घ्या. त्या जागा वेगळ्या, वैयक्तिक वर्ग म्हणून त्यांना सेट करते. हे देखील असे का आहे की, वर्ग नावांमध्ये त्यांच्यात मोकळी जागा असू शकत नाही, कारण असे केल्याने ते वेगळे वर्ग म्हणून सेट करतील.
उदाहरणार्थ, जर आपण जागा न वापरता "पुलक्वाट-वैशिष्ट्यीकृत-डावे" वापरले असेल तर ते एक वर्ग मूल्य असेल, परंतु वरील उदाहरण, जिथे हे तीन शब्द एक स्थानाने वेगळे केले जातील, त्यांना वैयक्तिक मूल्यांनुसार सेट करेल. आपल्या वेबपृष्ठांवर कोणत्या वर्ग मूल्यांचा वापर करावा हे ठरवताना ही संकल्पना समजून घेणे महत्त्वाचे आहे
एकदा आपल्याकडे एचटीएमएलमध्ये तुमचे क्लास व्हॅल्यू मिळाले की आपण त्यास आपल्या सीएसएस मधील क्लासेस म्हणून लागू करू शकता आणि आपण जोडू इच्छित असलेली शैली लागू करू शकता. उदाहरणार्थ.
.pullquote {...}
.वैशिष्ट्यपूर्ण { ... }
p.left {...}
या उदाहरणात, सीएसएस घोषणापत्रे आणि व्हॅल्यूज जोड कुरकुरीत ब्रेस च्या आत असतील, ज्याप्रमाणे त्या स्टाईल योग्य निवडकवर लागू होतील.
टीप - जर आपण एखाद्या विशिष्ट घटकास (उदाहरणार्थ, p.left) एखादा वर्ग सेट केला असेल, तर आपण त्याला क्लासेसच्या सूचीचा एक भाग म्हणून देखील वापरू शकता; तरी हे लक्षात असू द्या की हे फक्त सीएसएस मध्ये दर्शविलेल्या घटकांना प्रभावित करेल. दुस-या शब्दात, p. डावीकडे शैली केवळ या वर्गासह परिच्छेदावर लागू होईल कारण आपले निवडक प्रत्यक्षात "बायी" च्या क्लास मूल्यासह पॅराग्राफवर लागू करण्यास सांगत आहे ". कॉन्ट्रास्ट करून, इतर दोन निवडक उदाहरणार्थ काही विशिष्ट घटक निर्दिष्ट नाहीत, म्हणून ते त्या वर्ग मूल्यांचा वापर करणार्या कोणत्याही घटकावर लागू होतील.
एकाधिक क्लासेसचे फायदे
अनेक घटक त्या घटकांसाठी संपूर्ण नवीन शैली तयार न करता घटकांवर विशेष प्रभाव जोडणे सोपे बनवू शकतात.
उदाहरणार्थ, आपल्याला डावीकडे किंवा उजव्या बाजूला घटक द्रुतपणे फ्लोट करण्याची क्षमता आहे. आपण फक्त डावीकडे दोन वर्ग शिल्लक आणि बरोबर लिहू शकता: डावीकडे; आणि फ्लोट: बरोबर; त्यांच्यात नंतर, जेव्हा आपल्याकडे एखादा घटक होता ज्यास आपण डावीकडे फ्लोट करणे आवश्यक आहे, तेव्हा आपण फक्त "डावीकडे" वर्ग आपल्या वर्ग सूचीत जोडू शकता.
येथे चालण्यासाठी एक उत्तम ओळ आहे, तथापि लक्षात ठेवा वेब मानदंड शैली आणि संरचनेचे वेगळेपणा ठरवितात. रचना HTML द्वारे हाताळली जाते आणि शैली CSS मध्ये आहे.
जर आपल्या HTML डॉक्युमेंटमध्ये "लाल" किंवा "डावे" सारखे क्लासचे नाव असणाऱ्या घटकांची भरलेली संख्या असेल तर ती नावे आहेत जे त्या कशा आहेत त्यापेक्षा घटक कसे दिसले पाहिजे हे ठरवितात, आपण संरचना आणि शैली यांच्यातील ही ओळ ओलांडत आहात. मी या कारणास्तव शक्य तितक्या जास्त माझ्या विना-अर्थवर्गातील वर्ग नावांवर मर्यादा घालण्याचा प्रयत्न करतो.
एकाधिक क्लासेस, सिमेंटिक्स आणि जावास्क्रिप्ट
एकाधिक वर्ग वापरण्याचा आणखी एक फायदा हा आहे की तो आपल्याला अधिक परस्परसंवादात्मक क्षमता देतो.
आपण कोणत्याही प्राथमिक शाखेत न टाकता जावा स्क्रिप्टद्वारे विद्यमान घटकांना नवीन वर्ग लागू करू शकता. आपण एखाद्या घटकाची अर्थशास्त्र परिभाषित करण्यासाठी वर्गांचा देखील वापर करू शकता. याचा अर्थ आपण त्या घटकांचा अर्थ अर्थाने अर्थाने अर्थाने अतिरिक्त वर्गांवर जोडू शकता. अशाप्रकारे Microformats कार्य करते.
एकाधिक क्लासेसचे तोटे
आपल्या घटकांवर एकाधिक क्लायर्स वापरणे सर्वात मोठा गैरसोय आहे की ते वेळोवेळी पाहण्यास आणि व्यवस्थापित करण्यास त्यांना थोडा अपुर्या बनवू शकते. एखाद्या घटकास कोणत्या गोष्टी प्रभावित करत आहेत हे निर्धारीत करणे कठीण होऊ शकते आणि कोणत्याही स्क्रिप्टवर ते प्रभावित करत असल्यास. आज उपलब्ध अनेक फ्रेमवर्क, जसे की बूटस्ट्रॅप, बहुविध वर्गांच्या घटकांचा प्रचंड वापर करतात. आपण काळजीपूर्वक नसल्यास हा कोड हाताने बाहेर पडू शकतो आणि खूप लवकर कार्य करू शकता.
जेव्हा आपण बहुविध वर्गांचा वापर करता, तेव्हा आपण आपल्यासाठी हेतू नसतानाही एका वर्गासाठीची शैली दुसर्याच्या शैलीला अधिलिखित करण्याचे धोका देखील चालवितो. यानंतर हे स्पष्ट करणे कठीण आहे की आपल्या शैली कशा वापरल्या जात नाहीत तरीही ते दिसतात तेव्हा देखील ते लागू होत नाहीत.
त्या घटकासाठी लागू गुणधर्मांसह, आपल्याला विशिष्टतेची जाणीव असणे आवश्यक आहे!
Chrome मध्ये वेबमास्टर साधनांसारख्या साधनांचा वापर करून, आपण आपल्या वर्ग आपल्या शैलींना कशा प्रकारे प्रभावित करत आहात आणि विवादित शैली आणि वैशिष्ट्यांची ही समस्या टाळू शकता हे सहजपणे पाहू शकता.
जेनिफर क्रिनिन द्वारे मूळ लेख. 8/7/17 रोजी जेरेमी गिरर्ड द्वारा संपादित