यह बताते हुए कि HTML में सीधे स्टाइल क्यों नहीं किया जाना चाहिए

ItamarG3 08/15/2017. 12 answers, 2.942 views
lesson-ideas web-development html css

मैंने हाल ही में देखा है कि को इस साइट के अनुसार HTML से हटा दिया गया है। स्टैक ओवरफ़्लो पर इस उत्तर से, मार्की प्रतिस्थापन सीएसएस से बना है। परिवर्तन को दी गई स्पष्टीकरण यह है कि एचटीएमएल दस्तावेज़ संरचना के बारे में है, और लेआउट और एनीमेशन और स्टाइल इत्यादि सीएसएस से किया जाना चाहिए।

यह मुझे सोच गया:

एक html टैग की style विशेषता को सेट करने और सीएसएस और एचटीएमएल में शामिल होने के छात्रों की समझ को बढ़ाने के लिए सीएसएस के माध्यम से इसे करने के बीच स्पष्ट रूप से अंतर को स्पष्ट रूप से पढ़ाना होगा?

इसे कम करने के लिए, मैं उदाहरणों या स्पष्टीकरणों की तलाश कर रहा हूं कि यह स्पष्ट रूप से कैसे सिखाता है कि छात्रों के लिए अपने वेबपृष्ठों को स्टाइल करना आसान हो सकता है । अधिमानतः एक स्पष्टीकरण।

"स्पष्ट रूप से शिक्षण" से मेरा मतलब है कि वास्तव में "स्टाइलिंग के माध्यम से। सीएसएस", या कुछ समान शीर्षक के साथ एक सबक समर्पित है।

कुछ संदर्भ, यदि इसकी आवश्यकता है:

छात्र बुनियादी वेब डिज़ाइन सीखते हैं: एचटीएमएल, जावास्क्रिप्ट (बहुत बुनियादी), जेएसपी और एसक्यूएल। वे इन्हें 1 साल के लिए सीखते हैं और वर्ष के अंत में उनके पास एक वेबसाइट होनी चाहिए (जिसके लिए वे ग्रेड प्राप्त करते हैं)। मैं सोच रहा हूं कि सीएसएस के बारे में पूरी तरह से एक सबक अंततः बेहतर दिखने वाली वेबसाइटों का नेतृत्व कर सकता है।

5 Comments
3 Puppy 07/30/2017
यहां मूल समस्या यह है कि आप मानते हैं कि स्टाइल सीधे एचटीएमएल में नहीं किया जाना चाहिए, और सीएसएस का उपयोग करना बेहतर है। उन चीजों में से कोई भी सच नहीं है।
ItamarG3 07/31/2017
@Puppy अच्छी तरह से, सवाल का हिस्सा यह है कि मुझे इसे अलग से सिखाया जाना चाहिए। अगर मैं नहीं करता, तो वे स्टाइलशीट का उपयोग नहीं करेंगे। लेकिन क्या आपको लगता है कि कहीं भी कोई वेबसाइट वास्तव में एचटीएमएल में अपने सभी सीएसएस को हार्डकोड करता है? Every div में अपनी style विशेषता में कोड का पहाड़ है?
1 David Spence 07/31/2017
यह साइट सीएसएस को अलग रखने की शक्ति दिखाती है। csszengarden.com - वही संरचना, विभिन्न सीएसएस स्टाइलशीट।
ItamarG3 07/31/2017
@ डेविडस्पेंस अच्छा है। मैं निश्चित रूप से इसका उपयोग करूंगा
1 no comprende 07/31/2017
आप जो कुछ भी करते हैं, उन्हें Regex के साथ HTML को पार्स करने के बारे में यह SO पोस्ट न दिखाएं। उन्हें दुःस्वप्न दे सकता है!

12 Answers


richard 07/30/2017.

मुझे कुछ स्टाइल शीट बनाने का विचार पसंद है, और छात्र उन्हें अपने एचटीएमएल पर लागू करते हैं। फिर वे अलग स्टाइल शीट रखने की शक्ति देख सकते हैं।

फिर वे स्टाइल शीट को संपादित करना शुरू कर सकते हैं, और देख सकते हैं कि एक छोटे से बदलाव की शक्ति प्रत्येक शीर्षक, या प्रत्येक पैराग्राफ इत्यादि को बदल सकती है।

मैंने अतीत में भी एक HTML फ़ाइल लिखी है जिसमें नीचे बटन का एक सेट था। ये बटन लोड होने के लिए एक अलग सीएसएस फ़ाइल ट्रिगर करेंगे। यह कुछ बहुत ही सरल जावास्क्रिप्ट था।

जवाब देने के लिए उन्हें अलग रखा जाना चाहिए

शैली और सामग्री को अलग रखना, डब्ल्यू 3 और कई अन्य लोगों द्वारा अनुशंसित किया जाता है। यह चिंताओं और एकल जिम्मेदारी को अलग करता है। सॉफ्टवेयर डिजाइन में दोनों बहुत ही महत्वपूर्ण पैटर्न।

जवाब देने के लिए आप सीएसएस फ़ाइलों को अलग करने के लिए एक सबक समर्पित करना चाहिए।

हाँ। यदि इन्हें अलग रखना महत्वपूर्ण है, जो यह है, तो आपको विद्यार्थियों को उन्हें अलग रखने के लिए सिखाया जाना चाहिए। एचटीएमएल के साथ इसे मिश्रण करने के लिए उन्हें सिखाए बिना समय बचाएं (यह दो बार बचाएगा, क्योंकि आपको इसे अनदेखा नहीं करना होगा)।


मैंने केवल एक या दो लोगों (कक्षा नहीं) के साथ ऐसा किया है।

5 comments
ItamarG3 07/30/2017
वह दूसरा अनुच्छेद विशेष रूप से उपयोगी लगता है। लेकिन यह जवाब नहीं देता है कि मुझे वास्तव में इनलाइन एचटीएमएल style विशेषताओं के बजाय, सीएसएस स्टाइलशीट लिखने के तरीके को पढ़ाने के लिए एक सबक क्यों देना चाहिए।
richard 07/30/2017
अगर और इसके लिए सबक क्यों समर्पित किया जाए तो आंशिक उत्तर जोड़ा गया।
1 Buffy 07/30/2017
मैं मानता हूं कि गैर-शिक्षण हर किसी के समय का विशेष रूप से अपर्याप्त उपयोग है। बुरी आदतों का निर्माण और प्रबलित होने से पहले गलत धारणाओं को पकड़ना सबसे अच्छा है।
1 richard 07/30/2017
@tim, यह सिर्फ एक लोड optimisation । अवधारणा यह अभी भी अलग रहना चाहिए। हालांकि Google कह रहा है कि इसे एक ही फाइल में रखा जाए। वे यह नहीं कह रहे हैं कि आपको प्रत्येक बिट को अलग से स्टाइल करना चाहिए। वे कह रहे हैं कि एक सीएसएस फ़ाइल में क्या हो सकता है और इसे HTML के <style> अनुभाग में जोड़ें।
1 Darren 07/31/2017
छात्रों को उनके कोड को प्रभावित करने वाली विभिन्न प्रकार की स्टाइल शीट देने के बजाय, मैं विपरीत दृष्टिकोण की कोशिश करूंगा। एचटीएमएल में इनलाइन शैलियों को पढ़ाने के बाद, उन्हें एक पृष्ठ दें जो सीएसएस दस्तावेज़ पर अपनी शैली के लिए निर्भर करता है और उन्हें इसके लिए अपनी स्टाइलशीट बनाने के लिए कहता है (इनलाइन एचटीएमएल का उपयोग करने से सीखने वाली तकनीकों का उपयोग करके - शैलियों को लेबल करने का मामला और उन्हें एक ही स्थान पर एक साथ रखना)। फिर कक्षा में हर कोई अपनी स्टाइल शीट की तुलना एक आम परीक्षण विषय (आपके द्वारा प्रदान की गई) पर कर सकता है और संभावनाएं देख सकता है।

Buffy 07/30/2017.

यदि आप केवल एक ऐसा पृष्ठ बनाना चाहते हैं जो सरल और विज्ञापन-प्रसार है और भविष्य में कभी भी नहीं बदलेगा और केवल एक ही प्रकार के डिवाइस पर देखा जाएगा, तो सुनिश्चित करें कि स्टाइल को सीधे HTML में बनाएं। यह वही होता है जब आप कोई प्रोग्राम लिखते हैं जो केवल एक डिवाइस पर एक बार जवाब देने के लिए चलाया जाएगा, जिसके बाद प्रोग्राम अप्रचलित हो जाता है। तब, ध्यान से कोड करने का कोई कारण नहीं है। ऐसी चीजों के लिए "त्वरित और गंदा" काम करता है।

However चीजें बदलती हैं, और वेब पेज अलग-अलग स्क्रीन आकारों, यहां तक ​​कि रंग मॉडल वाले उपकरणों पर भी देखे जाते हैं। और भविष्य में उन उपकरणों पर देखा जा सकता है जो अभी तक मौजूद नहीं हैं।

इसलिए, यदि आप ऐसी साइटें बनाना चाहते हैं जो महत्वपूर्ण और स्थायी हैं और भविष्य में इसे बनाए रखा जाना चाहिए, तो सीएसएस का उपयोग करें। आप शायद main रूप से एक महत्वपूर्ण सी प्रोग्राम नहीं लिखेंगे, लेकिन कम से कम, चीजों को कारक बनाना चाहिए जो समान होना चाहिए लेकिन पुन: उपयोग किया जाना चाहिए। सरल सी प्रोग्रामिंग में हम इसके लिए कार्यों को कारक बनाते हैं। एचटीएमएल में हम स्टाइल बाहर कारक। एक गहरे स्तर पर, सर्वर पक्ष भी अधिकतर डेटा को कारक करता है, इत्यादि। यह उन चीज़ों को देता है जो समान होने चाहिए, वही रहें, और हमें अन्य स्तरों से स्वतंत्र रूप से एक स्तर के डिज़ाइन को संशोधित करने दें।

यह बिल्कुल वही बात नहीं है, लेकिन Google के फ्रंट पेज के अंतर्निहित कोड को देखें। मुझे नहीं पता कि वे इसे एक साथ रखने और इसे बनाए रखने के लिए क्या उपयोग करते हैं, लेकिन मुझे संदेह है कि यह सिर्फ एक टेक्स्ट एडिटर है। ध्यान दें कि उनका अगला पृष्ठ , हालांकि लेआउट में अविश्वसनीय रूप से सरल है, अक्सर बदलता है।

Note to the Instructor जब आप छात्र के काम को ग्रेड करने के लिए तैयार हो जाते हैं, तो विभिन्न स्क्रीन संकल्पों के साथ इसे विभिन्न उपकरणों पर देखें। हालांकि, मैं सुझाव नहीं देता कि आप उन्हें प्रति डिवाइस सीएसएस प्रदान करते हैं।

उस मामले के लिए, एक डेस्कटॉप बनाम डेस्कटॉप पर कुछ स्टैक एक्सचेंज पेज देखें। और एक शॉकर के लिए, कुछ पृष्ठों के स्रोत और स्टाइलशीट दोनों को देखें।

2 comments
1 Luke Sawczak 07/31/2017
कार्यों के साथ तुलना अच्छी है। मुझे लगता है कि प्रश्न में पाप सीधे स्रोत एचटीएमएल में शैली विशेषताओं की आपूर्ति कर रहा है। यदि ऐसा है, तो इसकी तुलना किसी विधि के शरीर को लेने और बस चिपकाने के लिए की जा सकती है जहां आप विधि को कॉल करने जा रहे थे। चरम में counterproductive।
no comprende 08/01/2017
एक वास्तविक शॉकर के लिए, माइक्रोसॉफ्ट पेजों और मूडल के स्रोत और स्टाइलशीट को देखें! वे सैकड़ों लाइनें लंबी हो सकती हैं। एचटीएमएल की मूल अवधारणा यह थी कि यह उन उपकरणों पर काम करेगी जो "अभी तक मौजूद नहीं हैं"। और वर्तमान में इतने सारे स्क्रीन आकार हैं कि यह एक चर हो सकता है।

AnoE 07/30/2017.

उन्हें वास्तव में समझने के लिए कि आप अकेले सीएसएस के साथ क्या कर सकते हैं - only एक और सीएसएस फ़ाइल को प्रतिस्थापित करने के साथ - उन्हें सीएसएस जेन गार्डन में ले जाएं । प्रत्येक पृष्ठ के लिए बिल्कुल एक ही HTML के साथ, और only .css फ़ाइल को प्रतिस्थापित किया गया है, आपको बेतुका जंगली पृष्ठ मिलते हैं। 3 डी स्क्रॉलिंग cubes के लिए शांत छोटी शून्यता से ...

फिर उन्हें समझाएं कि HTML बनाने के लिए आवश्यक कौशल, बनाम कौशल (विशेष रूप से चरम जैसे) के लिए कौशल बहुत अलग है, और HTML केवल सूचना वाहक के रूप में कार्य करता है।

स्क्रीन रीडर (अंधे के लिए) स्थापित करने के लिए एक और अच्छी बात होगी - सीमित मुफ्त उपयोग वाले लोग हैं - उन्हें दिखाने के लिए कि एक ही एचटीएमएल जोर से बोलते समय "दिखता है"।

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

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


thehayro 07/30/2017.

इसे कम करने के लिए, मैं उदाहरणों या स्पष्टीकरणों की तलाश कर रहा हूं कि यह स्पष्ट रूप से कैसे सिखाता है कि छात्रों के लिए अपने वेबपृष्ठों को स्टाइल करना आसान हो सकता है। अधिमानतः एक स्पष्टीकरण।

जैसा कि रिचर्ड कहते हैं, छात्र देख सकते हैं कि शैली का एक सरल संपादन प्रत्येक तत्व को कैसे बदल सकता है।

उदाहरण के तौर पर, आप अपने विद्यार्थियों को एचटीएमएल से शैली को अलग करने का लाभ महसूस कर सकते हैं। जिसका अर्थ है, उन्हें एक अभ्यास दें, जहां उन्हें अपने एचटीएमएल में कुछ तत्वों (जैसे तत्व पृष्ठभूमि रंग) की शैली की आवश्यकता होती है। फिर उन्हें प्रत्येक तत्व को दूसरे रंग में बदलने दें। पाठ उन्हें समझने देगा कि यदि आप एचटीएमएल से शैली को अलग करते हैं तो यह कार्य बहुत कम समय लेने वाला हो सकता है। फिर आप सीएसएस में एक पंक्ति को बदलने के तरीके का प्रदर्शन कर सकते हैं, जो पृष्ठभूमि के सभी तत्वों को बदलता है।

4 comments
Puppy 07/30/2017
वैकल्पिक रूप से, वे अपने एचटीएमएल को एक साधु व्यक्ति की तरह कोड के माध्यम से उत्पन्न कर सकते हैं, इस मामले में, प्रत्येक शैली के रंग को अलग स्टाइल शीट के बिना बदलने के लिए तुच्छ है।
1 thehayro 07/30/2017
ज़रूर। यह उन आवश्यकताओं पर निर्भर करता है जहां वेबपृष्ठ प्रदर्शित किया जाना चाहिए (मोबाइल / डेस्कटॉप)। लेकिन जहां तक ​​मैं इसे समझता हूं, सवाल यह था कि कैसे और कैसे HTML और CSS को अलग करने की आवश्यकता है।
no comprende 08/01/2017
जब मैं सीएसएस सीख रहा था, मैंने खुद को एक पुनः आकार देने योग्य शतरंज बनाने और हेडर और पाद लेख के साथ एक कैनोलिक तीन कॉलम पेज लेआउट बनाने का कार्य दिया।

SpiritBH 07/31/2017.

अच्छी तरह से पूछें: हम किसी भी प्रकार के कोड में कुछ अलग क्यों करते हैं?

लगभग हर एक प्रोग्रामिंग / स्क्रिप्टिंग भाषा में अलगाव और प्रतिनिधिमंडल होता है। हम यह सुनिश्चित करने के लिए करते हैं कि सभी कोडों का ट्रैक रखने में अधिक आसानी से सक्षम हो और वे आसानी से समस्याओं की पहचान कर सकें (जो अनिवार्य रूप से अंकुरित होगा क्योंकि कोई प्रोग्रामर अचूक नहीं है)

इसलिए मुझे लगता है कि सीएसएस पर एक समर्पित सबक एक अच्छा विचार है, क्योंकि इससे उन्हें समझने में मदद मिलती है कि किसके लिए ज़िम्मेदार है। यह उन्हें समझने में मदद करता है कि यदि स्रोत को देखते समय सभी HTML सही हैं, लेकिन सभी मेकअप अभी भी झुका हुआ है, तो उन्हें सीएसएस को देखने की आवश्यकता है।

उस पर, सीएसएस बड़ा, लचीला है और चीजों के चारों ओर एक अच्छी सीमा डालने से कहीं ज्यादा कुछ कर सकता है। कक्षा को दिखाने के लिए कि यह क्या कर सकता है, और यह कितना जटिल हो सकता है, इस बिंदु को आगे बढ़ाएगा कि एचटीएमएल और सीएसएस को गहराई से मिश्रित करना कितना मूर्ख है।

अंत में, एचटीएमएल से सीएसएस को अलग करना (या उस मामले के लिए कोई भी कोड) एक विकास संलग्न है; यह निर्माण के बारे में नहीं है (बेहतर) डेवलपर के बारे में उनके निर्माण पर अधिक आसान नियंत्रण है।

हो सकता है कि उस नोट पर आप वर्ग को एक-दूसरे के काम की जांच करने और बनाने की कोशिश करना चाहते हैं, इससे उन्हें यह देखने में मदद मिलेगी कि जब आप किसी टीम में काम करते हैं तो स्वच्छ प्रतिनिधि कोड रखना महत्वपूर्ण होता है।

1 comments
ItamarG3 07/31/2017
आप कुछ बहुत ही रोचक अंक उठाते हैं। धन्यवाद! और कंप्यूटर विज्ञान शिक्षकों में आपका स्वागत है

gabe3886 07/31/2017.

इसे देखने का थोड़ा अलग तरीका DRY कोड पेश करना हो सकता है (स्वयं को दोहराएं)।

स्टाइल करने के लिए सीएसएस का उपयोग करके, आप जानते हैं कि एक HTML तत्व में कक्षा जोड़कर, स्टाइल को पकड़ना चाहिए। यदि आपको इसे मैन्युअल रूप से जोड़ना था, तो जब आपको एक भाग बदलने की ज़रूरत है, तो आपको कई और कई को बदलने की जरूरत है।

W3 स्कूलों से चित्रण के विचार को चुरा लेने के लिए, यदि आप चाहते थे, तो पैराग्राफ के अलग-अलग पृष्ठभूमि रंग हों, आप इसे इस तरह से कर सकते हैं:

Paragraph 1

Paragraph 2

Paragraph 3

Paragraph 4

लेकिन, अगर मैं ऑर्डर बदलना चाहता हूं तो यह 2,4,3,1 है लेकिन रंग रखें, फिर मुझे प्रत्येक टैग में बनाए गए सभी शैलियों को बदलना होगा। यदि यह एकाधिक पृष्ठों में है, तो काम का भार बड़ा हो सकता है।

अगर मैंने इसे सीएसएस में किया है, तो मैं निम्नलिखित कर सकता हूं:

p:nth-child(odd) {
    background: red;
}

p:nth-child(even) {
    background: blue;
} 

अब यह परवाह नहीं है कि सामग्री क्या है, मैं उन्हें आदेश दे सकता हूं कि मुझे कैसा लगता है और स्टाइल अभी भी काम करता है। बहुत सारे प्रयास बदल गए। ऑर्डरिंग को अनदेखा करते हुए, अगर मैं उन्हें अधिक समझदार रंगों में बदलना चाहता था तो वे आसानी से पठनीय होते हैं, मैं एक बार सीएसएस में मान बदलता हूं, और यह प्रत्येक मेल खाने वाले आइटम पर लागू होता है।

इसके अलावा (जैसा कि सीएसएस को हेड टैग में एचटीएमएल में एम्बेड किया जा सकता है), इसे एक फाइल में विभाजित करना और इसका मतलब है कि मुझे प्रत्येक फाइल के लिए फ़ोल्डर संरचनाओं में नीचे (अब और समझदार) सीएसएस को दोहराने की ज़रूरत नहीं है मेरे पास पेज है। मैं शीर्षलेख में सीएसएस फ़ाइल शामिल करता हूं और शैली प्रभावी होती है। अब अगर मुझे रंगों में बदलाव करने या अतिरिक्त शैलियों को जोड़ने की ज़रूरत है, तो मुझे इनलाइन शैलियों का उपयोग न करने के लिए डुप्लीकेट करने की आवश्यकता नहीं है।

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


ncmathsadist 08/01/2017.

हम सिखाते हैं कि वेब पेज पर तीन परतें हैं: संरचना, उपस्थिति और व्यवहार। संरचना डीओएम द्वारा निर्धारित की जाती है, जो अच्छी तरह से गठित एचटीएमएल 5 मार्कअप के साथ बनाई गई है। जब हम HTML के बारे में जानेंगे, तो हम तुरंत दस्तावेज़ पेड़ को चित्रित करना शुरू कर देंगे, ताकि हम समझ सकें कि पृष्ठ पर तत्व एक-दूसरे से कैसे संबंधित हैं।

उपस्थिति सीएसएस द्वारा निर्धारित की जाती है, जो पेज को स्वरूपित और शैलीबद्ध करने के लिए डीओएम तक पहुंचती है। इसे एक अलग फ़ाइल में रखा जाता है ताकि इसे पृष्ठों के संबंधित समूह द्वारा साझा किया जा सके। एचटीएमएल id या class का उपयोग कर इस तरह की स्थितियों को संभालता है। इनका उपयोग पृष्ठों को बनाए रखना आसान बनाता है, क्योंकि इन विशेषताओं वाले आइटमों की शैली एक सीएसएस फ़ाइल में एक one place बनाई जाती है।

तीसरी परत व्यवहार है, जो एक जावास्क्रिप्ट फ़ाइल में दिखाना चाहिए। जावास्क्रिप्ट को किसी पृष्ठ पर प्रकट होने की आवश्यकता never , ईवेंट-हैंडलिंग कोड से फ़ंक्शंस कॉल करने के लिए सहेजें। यहां तक ​​कि यह एक जेएस फ़ाइल में संलग्न किया जा सकता है। सुनिश्चित करें कि आपके छात्रों को load इवेंट्स और onload बारे में जल्दी पता है, इसलिए वे पेज तत्वों तक मौजूद होने तक कोड की कॉलिंग में देरी कर सकते हैं।

यदि आप नोड स्थापित करते हैं, तो आप कमांड लाइन पर जेएस कोड के परीक्षण चला सकते हैं, और आपके द्वारा बनाए गए कार्यों के लिए परीक्षण सूट विकसित कर सकते हैं।

तीन परतों को अलग करना चीजों को साफ रखता है और कोड के पुन: उपयोग को अधिकतम करता है।


user1639154 07/31/2017.

ऐसा लगता है कि यहां कई जवाब स्टाइल पर विरासत के बिंदु को संबोधित नहीं कर रहे हैं, क्योंकि इसे भी पढ़ाया जाना चाहिए। मूल नियम जो पढ़ा जाता है वह आखिरी बार लागू किया जाएगा।

लोड करने वाला पहला आमतौर पर दस्तावेज़ के प्रमुख में बाहरी शीट होता है। दस्तावेज़ के सिर में जुड़ी एक स्टाइल शीट एचटीएमएल बॉडी में इनलाइन शैलियों द्वारा सवार हो जाएगी, और बदले में उन लोगों को सीधे डीओएम तत्व पर रखी शैलियों द्वारा ओवरराइड किया जाएगा। इस व्यवहार को बदलने के लिए महत्वपूर्ण टैग का भी उपयोग किया जा सकता है।

अधिकांश अपने सभी सीएसएस को अपनी फाइल में डाल देंगे क्योंकि इसे बनाए रखना आसान है और अपडेट / बदले जाने पर ज्यादा काम की आवश्यकता नहीं होगी।

संपादित करें: बस कुछ और स्पष्टीकरण देने के लिए, यह केवल विशिष्ट शैलियों है जो कक्षाओं में मेल खाते हैं जो एक-दूसरे को टकराव / ओवरराइड करेंगे, यदि एक इनलाइन टेक्स्ट को रेखांकित करने के लिए शैली जोड़ती है, जो बाहरी शीट में कक्षा में नहीं है उदाहरण में यह सिर्फ उस अतिरिक्त स्टाइल को जोड़ देगा। कक्षाएं एक दूसरे को सीधे नहीं बदलती हैं बल्कि एक दूसरे में विलय करती हैं।

5 comments
1 ItamarG3 07/31/2017
वाह। कंप्यूटर विज्ञान शिक्षकों में आपका स्वागत है। यह वास्तव में कुछ है जिसे मैंने नहीं माना था। अगर आप कुछ उदाहरण या विवरण जोड़ सकते हैं तो मुझे यह अच्छा लगेगा। (मैं उन्हें खुद लिख सकता हूं, लेकिन मुझे यह देखने में अधिक दिलचस्पी है कि आप क्या सोच सकते हैं)। यह वास्तव में एक दिलचस्प जवाब है :)
1 ItamarG3 07/31/2017
असंबंधित: आप हमारा दौरा क्यों नहीं लेते? मुझे यकीन है कि आपको यह दिलचस्प लगेगा।
user1639154 07/31/2017
मुझे थोड़ा गलत लगता है, इसकी बाहरी स्टाइल शीट पहले, फिर दस्तावेज़ शैलियों और फिर तत्व पर, मेरा दिमाग सोमवार सुबह कभी 100% नहीं होता है। :)
ItamarG3 07/31/2017
क्षमा करो और भूल जाओ ;)। आप अपना जवाब संपादित कर सकते हैं। आपके उत्तर के नीचे सीधे एक edit बटन \ लिंक है। जब आप इसमें हों, तो क्या आप यह दिखाने के लिए कुछ उदाहरण जोड़ना चाहेंगे कि आपका उत्तर क्या संबोधित कर रहा है? यह वास्तव में इसे एक बेहतर उत्तर में बना देगा: डी
user1639154 07/31/2017
दुर्भाग्य से मेरे पास अभी समय नहीं है। मैं बस सीएसएस की विरासत का उल्लेख करना चाहता था, क्योंकि यह सीएसएस का महत्वपूर्ण पहलू है।

rackandboneman 08/03/2017.

एक प्रोजेक्ट बनाएं जिसमें परिणाम एक same document दो अलग-अलग विचार हैं, उदाहरण के लिए एक ऐसा संस्करण जो एक बड़े मॉनीटर पर अच्छा लग रहा है और दूसरा जो आईफोन पर अच्छा लग रहा है।

एक स्थैतिक वेबपृष्ठ का उपयोग नहीं करना, लेकिन कम्प्यूटर से उत्पन्न, अद्यतन करने योग्य दस्तावेज़ पॉइंट होम को और भी अधिक ड्राइव करेंगे, क्योंकि दस्तावेज़ जनरेटर में शैली की जानकारी एम्बेड करना इसे और अधिक जटिल बना देगा - शैली के साथ गड़बड़ी का एकमात्र विकल्प या तो दस्तावेज़ generator को बदल देगा सभी परेशानी शामिल हैं या stylesheet जो वास्तव में आपके इरादे से है। इससे भी बेहतर: दस्तावेज उत्पन्न करने और स्टाइलशीट भागों को करने के लिए कमरे के अलग-अलग कोनों में two समूहों को असाइन करें - और दोनों के बीच विनिर्देशों को कैसे नियंत्रित किया जाए, यह नियंत्रित करें।

4 comments
ItamarG3 08/03/2017
बहुत शानदार। वाह।
rackandboneman 08/03/2017
खैर, इसे तब विश्वसनीय बनाओ।
ItamarG3 08/03/2017
यह अविश्वसनीय है क्योंकि यह उन परिस्थितियों में समस्या हल करता है जिन्हें मैं प्रकट नहीं कर सकता (स्कूल सामान), लेकिन यह exactly में प्रश्न को संबोधित नहीं करता है ...
1 rackandboneman 08/03/2017
ओह, और मैं एक शिक्षक के रूप में चर्चा में दखल दे रहा हूं लेकिन एक आईटी पेशेवर - मैंने जो वर्णन किया है वह है कि अभ्यास में चीजें क्यों की जाती हैं जैसे सिद्धांत सिखाते हैं :)

Chris M. 08/02/2017.

यहां बहुत सारे अच्छे उत्तर हैं। एक बिंदु जिसे मैंने अभी तक नहीं देखा है, यह है कि सामग्री और डिज़ाइन अक्सर अलग-अलग लोगों या टीमों द्वारा बनाई जाती है, और इसलिए प्रत्येक को अपने स्वयं के औजारों और भाषा के साथ परिभाषित करने के लिए आवश्यक अलग वर्कफ़्लो की अनुमति मिलती है।

4 comments
ItamarG3 08/02/2017
वाह। मैंने इसके बारे में सोचा नहीं था। क्या आप सीएसएस स्टाइलशीट का उपयोग करने के बारे में एक अलग सबक में इसे कैसे समझा सकते हैं, इस पर थोड़ा सा विस्तार करना चाहते हैं?
Chris M. 08/02/2017
मैं एक समानता का उपयोग करूंगा। मोटर वाहन इंजीनियरों कार रंगों का चयन नहीं करते हैं। स्क्रीनवाइटर आम तौर पर पोशाक डिजाइन नहीं करते हैं।
ItamarG3 08/02/2017
समझा। हो सकता है कि आपको जवाब संपादित करके अपने उत्तर में ऐसे अनुरूप शामिल हों।
1 Buffy 08/03/2017
असल में यह उससे भी बदतर है। एक महत्वपूर्ण वेब उपस्थिति वाली कुछ बड़ी कंपनियों में, सामग्री और लेआउट टीम दोनों के ऊपर बैठे मानक मानकों की एक टीम है। यदि लेआउट मानक के एक पिक्सल बंद है, तो आप इसे खत्म कर देते हैं। एक पिक्सेल

thesecretmaster 08/03/2017.

इनलाइन शैलियों खराब होने का एक महत्वपूर्ण कारण कोड पठनीयता, सादा और सरल है। इस मामले में, एक उदाहरण आपके बिंदु को साबित करने के लिए पर्याप्त होना चाहिए:

  
The Title
This is a super great article

की तुलना में:

  
The Title
This is a super great article

इस उदाहरण के अलावा, कक्षाओं और आईडी का उपयोग किए बिना आप जावास्क्रिप्ट का उपयोग करके डोम को अधिक कुशल बनाने के लिए कठिन बनाते हैं और आप छद्म तत्वों का उपयोग करना असंभव बनाते हैं और वास्तव में कुछ अच्छे सीएसएस चयनकर्ताओं जैसे :nth-child() और :first-child , नाम देने के लिए।


Puppy 07/31/2017.

मैं पूरी तरह से असहमत हूं - स्टाइलिंग सीधे एचटीएमएल में किया जाना चाहिए।

प्राथमिक समस्या यह है कि स्टाइल HTML संरचना से भी दूरस्थ रूप से स्वतंत्र नहीं है। बस भौतिक रूप से अलग फ़ाइल में शैलियों को लिखना इसे बदल नहीं देता है। एक अच्छा उदाहरण मोबाइल डिवाइस का समर्थन है। सिद्धांत रूप में, आप एक मोबाइल सीएसएस फ़ाइल बना सकते हैं। लेकिन हकीकत में, आपको शायद मोबाइल डिवाइस पर एक अच्छा अनुभव बनाने के लिए एक अलग अलग यूआई डिज़ाइन की आवश्यकता है, और फिर इसका समर्थन करने के लिए एक अलग HTML संरचना, और उसके बाद शैली का एक अलग सेट। "बटन को वही बनाएं लेकिन थोड़ा छोटा" केवल छोटे टुकड़ों के लिए काम करता है।

सही यूआई का निर्माण करने में HTML संरचना का निर्माण करना शामिल है जो आपको आवश्यक शैलियों का समर्थन करता है। चूंकि दोनों वास्तव में घनिष्ठ रूप से युग्मित होते हैं, इसलिए उन्हें स्थानांतरित करने के लिए चीजों को समझना आसान होता है और सभी एक ही स्थान पर होते हैं।

इसके अलावा, चूंकि आप संभावित रूप से कोड के माध्यम से अपना एचटीएमएल उत्पन्न कर रहे हैं, इसलिए डुप्लिकेट शैलियों के साथ एचटीएमएल उत्पन्न करने में कोई समस्या नहीं है, क्योंकि आपका कोड जनरेटर पूरे दिन शैलियों को थूक सकता है।

कच्चे सीएसएस होने के कारण काफी समस्याग्रस्त है क्योंकि शैलियों पूरी तरह से यादृच्छिक हैं और वैश्विक दायरे में हैं, और फिर से उपयोग करना मुश्किल है। आप आशा के तहत कक्षा का नाम बनाते हैं कि किसी और ने इसका इस्तेमाल नहीं किया। इस समस्या को हल करने के लिए आप उस तत्व के अंदर अपनी कक्षाएं घोंसला करते हैं लेकिन अब आप इन कक्षाओं को अन्य स्थानों पर फिर से उपयोग नहीं कर सकते क्योंकि वे सही डीओएम संरचना में नहीं हैं। फिर आप पाते हैं कि आपके पृष्ठ के कुछ पूरी तरह से अलग हिस्से में कुछ यादृच्छिक दोस्त आपकी कक्षा का उपयोग किए बिना आपको सूचित करते हैं और अब आपने अपनी शैलियों को बदलकर इसे तोड़ दिया है। और शुभकामनाएं टाइपिंग, आईडीई सपोर्ट इत्यादि प्राप्त करना आदि। पैरामीटरयुक्त कक्षाएं बनाना या वैश्विक रूप से प्रतिस्थापन लागू करना भी मुश्किल है, उदाहरण के लिए display: flex display: flex साथ display: flex और display: -webkit-flex आईओएस के लिए।

शैलियों से निपटने का सही तरीका किसी भी अन्य कोड के साथ उनसे निपटना है- कुछ कार्यों में उन्हें समाहित करें।

5 comments
1 thesecretmaster♦ 07/31/2017
हाय पिल्ला, कंप्यूटर विज्ञान शिक्षकों में आपका स्वागत है! यदि आप एक और पिल्ला से मिलना चाहते हैं, तो आप चैट में बफी , जो बुलडॉग है, कह सकते हैं। यह एक दिलचस्प जवाब है, यहां अपना दृष्टिकोण साझा करने के लिए धन्यवाद!
2 richard 07/31/2017
जबकि मैं जो भी कहता हूं उससे सहमत नहीं हूं। मैं तुम्हारा बिंदु देखता हूँ। खासकर आखिरी पंक्ति (मुझे लगता है कि आपको इस पर विस्तार करना चाहिए)। हमें दिखाएं कि आपको कैसा लगता है कि यह किया जाना चाहिए। भले ही हम 100% सहमत न हों, हम कुछ सीख सकते हैं।
no comprende 08/01/2017
आपका जवाब मुझे उस समय की याद दिलाता है जब मैंने एक प्रश्न पूछा और किसी ने कहा, "यदि आप लैटिन में मास पढ़ते हैं।" चीजों को करने के लिए कई 'सही' तरीके हैं, और आपके दृष्टिकोण से, जेनरेट किए गए HTML के साथ, वास्तव में इससे कोई फर्क नहीं पड़ता। लेकिन अधिकांश प्रशिक्षु जेनरेट किए गए एचटीएमएल को नहीं सिखाते हैं, जैसे अधिकांश प्रोग्रामर कंपलर लिखने के बारे में नहीं सीखते हैं। एचटीएमएल की फ़ाइलों को बनाए रखने के लिए जो परत हम जोड़ते हैं वह फेंकने वाले एचटीएमएल के साथ अनिवार्य है। मैं भी चीजें उत्पन्न करना पसंद करता हूं, लेकिन मैं विशाल अल्पसंख्यक में हूं। शायद हम कभी-कभी डोमेन विशिष्ट भाषाओं के बारे में बात कर सकते हैं?
Puppy 08/01/2017
जेनरेटेड एचटीएमएल नहीं सिखाते प्रशिक्षकों को उपयोगी एचटीएमएल नहीं सिखाता है।
ItamarG3 08/02/2017
@Puppy ऐसा है?

Related questions

Hot questions

Language

Popular Tags