अल्पविराम क्यामेरा छनौटका लागि के हो?

किन एक सरल अल्पविराम कोडिंग सरल हुन्छ

सीएसएस, वा क्यासिंगिङ स्टाइल पानाहरू, साइट शैलीमा दृश्य शैलीहरू थप्न वेब डिजाइन उद्योगको स्वीकृत तरिका हो। CSS को साथ, तपाईं पेज सजावट, रङ, टाइपोग्राफी , पृष्ठभूमि तस्वीर, र धेरै अधिक नियन्त्रण गर्न सक्नुहुन्छ। मूलतया, यदि यो एक दृश्य शैली हो, त्यसपछि सीएसएस ती शैलीहरू तपाईंको वेबसाइटमा ल्याउने तरिका हो।

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

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

कमाई र सीएसएस

तपाईँले अल्पविरामको सीएसएस चयनकर्ता सिन्ट्याक्समा कस्तो भूमिका खेल्नुभयो। वाक्यको रूपमा, अल्पले स्पष्टता ल्याउँछ- कोड होइन - विभाजकहरूमा। सीएसएस चयनकर्तामा अल्पले समान शैली भित्र धेरै छनोटहरू अलग गर्दछ।

उदाहरणको लागि, तल केहि CSS मा हेर्नुहोस्।

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

यो वाक्य रचनाको साथ, तपाइँ भन्दै हुनुहुन्छ कि तपाईं ट्यागहरू चाहानुहुन्छ, ट्याग ट्यागहरू, क्लास रातोको साथ अनुच्छेद ट्यागहरू, र आईडीको साथ डीभी ट्याग सबैलाई पहिला सबै शैली रङ रातो छ।

यो पुरा तरिकाले स्वीकार्य CSS छ, तर यस तरिकालाई यो लेख्न दुईवटा महत्त्वपूर्ण कमीहरू छन्:

• भविष्यमा, यदि तपाईंले यी गुणहरूको फन्ट रङलाई नीलो पार्ने निर्णय गर्नुभयो भने, तपाइँले तपाइँको शैली पानामा चार पटक परिवर्तन गर्नुपर्दछ।
• यसले तपाईको शैली पानामा धेरै थप क्यारेक्टरहरू थप्दछ जुन तपाईंलाई आवश्यक छैन। यी 4 शैलीहरू ओभरकिङ्ग जस्तो लाग्न सक्दैन, तर यदि तपाईं आफ्नो सम्पूर्ण शैली पानामा यो जारी राख्नुहुन्छ भने, रेखाहरू थप हुनेछन् र पाना बढी हुनेछ, यो भन्दा बढी हुनु आवश्यक छ।

यी खरिदहरू रोक्न र तपाइँको CSS फाइललाई सुचारु गर्न, हामी अल्पसंख्यक प्रयोग गर्न प्रयास गर्नेछौं।

अलग चयनकर्ताहरूलाई कमाइ प्रयोग गर्दै

4 अलग सीएसएस चयनकर्ता र 4 नियमहरू लेख्नुको सट्टा, तपाइँ यी सबै शैलीहरू एक नियम गुणमा एक अल्पविरामसँग अलग-अलग छनौटहरू विभाजित गरेर संयोजन गर्न सक्नुहुनेछ। यहाँ यो कसरी हुन्छ:

th, td, p.red, div # firstred {color: red; }

अल्पविराम चरित्र मूलतः शब्द "र" चयनकर्ता भित्रको रूपमा कार्य गर्दछ। त्यसैले यो टी एच ट्याग र टीडी ट्यागहरू र अनुच्छेद ट्यागहरूमा पहिलो पटक आईडीको साथ क्लास रातो र डिभ ट्यागको साथ लागू हुन्छ। त्यो पहिले नै हाम्रो के थियो, तर 4 सीएसएस नियमहरूको आवश्यकताको सट्टा, हाम्रो सँग धेरै चयनकर्ताहरूसँग एक नियम छ। यो अल्पविराम चयनकर्तामा छ, यसले हामीलाई एक नियममा बहु चयनकर्ताहरूलाई अनुमति दिन्छ।

न केवल यो दृष्टिकोणले लेणर, क्लीनर सीएसएस फाईलहरूको लागि बनाउँछ, यसले भविष्यका अद्यावधिकहरू धेरै सजिलो बनाउँछ। अब यदि तपाई रातो रङबाट रङ परिवर्तन गर्न चाहानुहुन्छ भने तपाईले हामीलाई वास्तविक 4 शैलीका नियमहरूको सट्टामा एक स्थानमा परिवर्तन गर्नु पर्छ! सम्पूर्ण सीएसएस फाइलमा यी समय बचतको बारे सोच्नुहोस् र तपाईंले देख्न सक्नुहुनेछ कि यसले तपाईंलाई कसरी लामो समयसम्म दुवै समय र ठाउँ बचत गर्नेछ!

वाक्यविन्यास परिवर्तन

केही व्यक्तिले माथिको एक रेखामा सबै लेख्नुको सट्टा प्रत्येक चयनकर्तालाई आफ्नै रेखामा विभाजन गरेर CSS अधिक कानूनी बनाउनु छन। यो कसरी गर्ने छ:

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

ध्यान दिनुहोस् कि तपाइँ प्रत्येक चयनकर्ता पछि अल्पविराम राख्नुहुन्छ र त्यसपछि अर्को चयनकर्तालाई आफ्नै रेखामा तोड्न "प्रविष्ट" प्रयोग गर्नुहोस्। तपाईंले अन्तिम चयनकर्ता पछि अल्पविराम थप्नु भएको छैन।

तपाईंको चयनकर्ताहरूको बीचमा अल्पसंख्यकहरू प्रयोग गरेर, तपाईंले थप कम्पैक्ट शैली पाना सिर्जना गर्नुहुनेछ जुन भविष्यमा अद्यावधिक गर्न सजिलो छ र आज पढ्न सजिलो छ!

जेनिफर क्रिनिन द्वारा मूल लेख। 5/8/17 मा जेरेमी Girard द्वारा संपादित