सीएसएस सिलेक्टर्ससाठी कॉमा काय आहे?

का साधे कॉमा कोडींग सोपे करते

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

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

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

Commas आणि CSS

आपण कदाचित सीएसएएस सिंटॅक्समध्ये स्वल्पविरामाने काय भूमिका बजावली असेल याचा विचार केला असेल. वाक्यरचना म्हणून, स्वल्पविरामाने स्पष्टता आणली आहे-विभक्त्यांना कोड नाही सीएसएस सिलेक्टर मधील कॉमा एकाच प्रकारच्या अनेक निवडकांना वेगवेगळ्या विभागात विभाजित करते.

उदाहरणार्थ, आता खाली काही सीएसएस पाहू.

th {रंग: लाल; }
td {color: red; }
p.red {color: red; }
div # firstred {रंग: लाल; }

या वाक्यरचनासह, आपण म्हणत आहात की आपल्याला फॅ टॅग पाहिजे आहेत, टीडी टॅग्ज, पॅरेग्राफ टॅग्ज क्लास लाल सह, आणि ID सह डिव्हीग टॅग सर्व प्रथम शैलीचा रंग लाल असण्यासाठी

हे उत्तम प्रकारे स्वीकार्य सीएसएस आहे, परंतु हे लिहायला दोन लक्षणीय नुकसान आहेत:

• भविष्यात, जर आपण या गुणधर्मांचा फाँट रंग निळ्यामध्ये बदलण्याचा निर्णय घेतल्यास, आपल्या शैलीच्या शीटमध्ये आपण त्या बदलास चार वेळा बदलू शकतो.
• हे आपल्याला आपल्या शैली पत्रकास भरपूर अतिरिक्त वर्ण जोडते जे आपल्याला आवश्यकता नसते. हे 4 शैली ओव्हरकिलसारखे दिसत नसतील, परंतु आपण आपल्या संपूर्ण शैली पत्रकावर हे करत राहिल्यास, ओळी जोडतील आणि ती शीट जास्त असेल, ती कितीतरी जास्त असणे आवश्यक आहे

ही त्रुटी टाळण्यासाठी, आणि आपली सीएसएस फाइल व्यवस्थित करण्यासाठी, आपण स्वल्पविराम वापरण्याचा प्रयत्न करू.

निवडक वेगळे करण्यासाठी स्वल्पविराम वापरत आहे

4 वेगवेगळ्या CSS निवडक आणि 4 नियम लिहिण्याऐवजी, आपण सर्व निवडक एका कॉमॅडासह विभक्त करून ही सर्व शैली एका नियम मालमत्तेमध्ये एकत्र करू शकता. हे कसे केले जाईल हे येथे आहे:

th, td, p.red, div # firstred {रंग: लाल; }

स्वल्पविराम अक्षर मूलत: "आणि" निवडक आत शब्द म्हणून कार्य करते. तर हा टी एच टॅग आणि वर्ग लाल सह अनुवांशिक टॅग्ज आणि अनुच्छेद टॅग आणि प्रथम ID सह div टॅग लागू होते. पूर्वी आमच्याकडे नेमके हेच होते, परंतु 4 सीएसएस नियमांची गरज न पडता आपल्याजवळ अनेक निवडींसह एक नियम आहे. निवड समितीतील कॉमा काय करते हे असे आहे, त्यामुळे आम्हाला एकाच नियमात अनेक निवडक खेळाडूंची संधी मिळू शकते.

हा दृष्टिकोन केवळ लठ्ठ, क्लिनर सीएसएस फाइल्ससाठी नाही तर भविष्यातील अद्यतने इतके सोपे बनविते. आता जर आपण रंग लाल ते निळा रंग बदलू इच्छित असाल तर आपल्यास मूळ 4 शैली नियमांच्या ऐवजी फक्त एका जागेवर बदल करावा लागतो! संपूर्ण सीएसएस फाइलवर या वेळ बचत बद्दल विचार करा आणि हे आपण आपल्या लांब रेण मध्ये वेळ आणि जागा दोन्ही जतन होईल कसे पाहू शकता!

सिंटॅक्स तफावत

वरीलप्रमाणे प्रत्येक एका ओळीवर ते सर्व लिहून वगळता प्रत्येक निवडकाला स्वतःच्या ओळीवर वेगळे करून काही लोक सीएसएस अधिक सुपाठ्य बनवतील. असे केले जाईल ते असे:

व्या,
टीडी,
p.red,
div # firstred
{
रंग: लाल;
}

लक्षात घ्या की आपण प्रत्येक निवडकाला नंतर स्वल्पविराम ठेवून नंतर पुढील निवडक आपल्या स्वतःच्या ओळीवर तोडण्यासाठी "प्रविष्ट करा" वापरा. अंतिम निवडक नंतर आपण स्वल्पविराम जोडू शकत नाही

आपल्या निवडकर्त्यांमध्ये स्वल्पविराम वापरून, आपण अधिक संक्षिप्त शैली पत्रक तयार करता जे भविष्यात अद्ययावत करणे सोपे होईल आणि आजच वाचणे सोपे आहे!

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