स्प्यान र डिभ एचटीएमएल तत्व कसरी प्रयोग गर्ने

अधिक शैली र लेआउट नियन्त्रणको लागि सीएसएस सँग span र div प्रयोग गर्नुहोस्।

धेरै व्यक्ति जो वेब डिजाईन र एचटीएमएल / सीएसएसमा नयाँ छन्

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

तत्व प्रयोग गरेर

डिभाइ तत्वले तपाईंको वेब पृष्ठमा तार्किक विभाजनहरू परिभाषित गर्दछ।

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

डिभ तत्वको प्रयोग गर्न, आफ्नो पृष्ठको क्षेत्र भन्दा अघि खोल्ने

ट्यागलाई छुट्टै विभाजनको रूपमा, र बन्द गर्नुहोस् ट्याग पछि:

div को सामग्री

यदि तपाईंको पृष्ठको क्षेत्रले केहि थप जानकारीको आवश्यकता छ जुन तपाइँले पछि CSS सँग शैलीमा प्रयोग गर्नुहुनेछ, तपाईं एक आईडी चयनकर्ता थप्न सक्नुहुनेछ (जस्तै,

id = "myDiv">), वा एक क्लाउड चयनकर्ता (जस्तै, class = "bigDiv">)। यी विशेषताहरू त्यसपछि सीएसएस प्रयोग गरेर वा जाभास्क्रिप्ट प्रयोग गरेर परिमार्जित चयन गर्न सकिन्छ। वर्तमान सर्वोत्तम प्रथाहरू आइडीहरूको सट्टा क्लाउड चयनकर्ताहरूको प्रयोग गर्न तिरस्कार गर्न, किन विशिष्ट आईडी चयनकर्ताहरू हुन्। वास्तवमा, तथापि, तपाइँले पनि एक प्रयोग गर्न सक्नुहुनेछ र एक आईडी र एक क्लासी चयनकर्ता पनि विभाजन दिन सक्नुहुन्छ।

कहिलेकाहीँ

Versus
प्रयोग गर्ने

Div तत्व HTML5 खण्ड तत्वबाट फरक छ किनभने यसले संलग्न सामग्रीलाई कुनै अर्थपूर्ण अर्थ दिँदैन। यदि तपाइँ निश्चित हुनुहुन्न कि सामग्रीको ब्लकलाई विभाजन वा खण्ड हुनुपर्छ, सोच्नुहोस् कुन उद्देश्य र सामग्रीको उद्देश्यले तपाईँलाई प्रयोग गर्ने निर्णय गर्ने निर्णय गरेको छ:

  • यदि तपाईँले पृष्ठको त्यो क्षेत्रमा शैलीहरू थप्न सरल तत्व चाहिन्छ भने, तपाईंले div तत्व प्रयोग गर्नुपर्छ।
  • यदि सामग्री समावेश भएको छ भने एक फरक फोकस छ र यसको आफ्नैमा खडा हुन सक्छ, तपाई यसको सट्टा खण्ड तत्व प्रयोग गर्न सक्नुहुन्छ।

अन्ततः, दुवै विभाजन र खण्डहरू सुन्दर समान व्यवहार गर्छन् र तपाइँले तीमध्ये कुनै पनि मानहरू प्रदान गर्न सक्नुहुनेछ र तिनीहरूलाई आफ्नो विशेषताको खोज प्राप्त गर्न CSS सँग स्टाइल गर्नुहोस्। यी दुवै ब्लक स्तर तत्व हुन्।

तत्व प्रयोग गरेर

अवधि तत्व पूर्वनिर्धारित रूपमा इनलाइन तत्व हो। यसले यसलाई विभाजन र सेक्शन तत्वहरूबाट अलग गर्दछ। अवधि तत्व प्राय: सामग्रीको निर्दिष्ट टुक्रा लपेटा गर्न प्रयोग गरिन्छ, यसलाई थप "हुक" लाई थप गर्न सकिन्छ जुन पछि स्टाइल गर्न सकिन्छ। सीएसएससँग प्रयोग गरिएको, यसले पाठको शैली परिवर्तन गर्न सक्दछ यसले यसलाई संलग्न गर्दछ; तथापि, कुनै पनि शैली विशेषताहरू बिना, एक्स्टेन्ट तत्वले पाठमा सबै प्रभाव पार्छ।

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


हाइलाइट गरिएका टेक्स्ट र नचाहिने पाठ।

वर्ग जोड्नुहोस् "हाइलाइट" वा अन्य कक्षा अवधि सीएसएसमा पाठ (उदाहरणको लागि, class = "हाइलाइट">) शैली शैलीमा।

अवधि तत्वको कुनै आवश्यक विशेषताहरू छैन, तर तीन भन्दा धेरै उपयोगीहरू डिभी तत्वको जस्तै हो:

  • शैली
  • वर्ग
  • आईडी

स्पेस प्रयोग गर्दा सामग्रीको शैली परिवर्तन गर्न चाहानुहुन्छ कि सामग्रीमा नयाँ ब्लक-स्तर तत्वको रूपमा सामग्री परिभाषित नगरिकन।

उदाहरणका लागि, यदि तपाईं h3 शीर्षकको दोस्रो शब्द रातो हुने हेराइमा, तपाइँ त्यस शब्दलाई एक स्पेस तत्वको साथमा घुम्न सक्नुहुनेछ जुन शब्दले रातो पाठको रूपमा शैली गर्दछ। शब्द अझै h3 तत्वको भाग रहेको छ, तर अहिले पनि लालमा प्रदर्शन गर्दछ:

यो मेरो उत्कृष्ट शीर्षक हो

2/2/17 मा जेरेमी गिरर्ड द्वारा सम्पादित