CSS2 र CSS3 बीचको भिन्नता

CSS3 मा प्रमुख परिवर्तनहरू बुझ्न

CSS2 र CSS3 बीचको सबैभन्दा ठूलो भिन्नता यो हो कि CSS3 विभिन्न विभाजनहरूमा विभाजित गरिएको छ, जसलाई मोड्युल भनिन्छ। यी मोडल मध्ये प्रत्येक सिफारिस प्रक्रियाको विभिन्न चरणहरूमा W3C मार्फत यसको माध्यम बनाउँदैछ। यस प्रक्रियाले CSS3 को विभिन्न टुक्राहरूलाई विभिन्न निर्माताहरू द्वारा ब्राउजरमा स्वीकार्य र लागू गर्न यो सजिलो बनाएको छ।

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

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

नयाँ CSS3 चयनकर्ताहरू

सीएसएस 3 नयाँ तरिकाको गुच्छा प्रदान गर्दछ जुन तपाईंले नयाँ CSS चयनकर्ताहरू साथै साथै नयाँ संयोजक, र केहि नयाँ छद्म तत्वहरूसँग CSS नियमहरू लेख्न सक्नुहुन्छ।

तीन नयाँ गुण चयनकर्ताहरू:

• विशेषता प्रारम्भ मा मेल खाएको बिल्कुल तत्व [foo ^ = "bar"] तत्वमा एक फन्ट भनिन्छ जुन "बार" जस्तै सुरु हुन्छ।
• विशेषता समाप्त म्याचहरू बिल्कुल तत्व [foo $ = "bar"] तत्वमा फन्ट भनिने विशेषता हो जुन "बार" सँग समाप्त हुन्छ।
• विशेषताले मिलान तत्व समावेश गर्दछ [foo * = "bar"] तत्वमा एक विशेषता हो foo भनिन्छ जुन स्ट्रिंग समावेश गर्दछ "पट्टी" जस्तै

16 नयाँ छद्म वर्गहरू:

• root
  • कागजातको मूल तत्व। एचटीएमएलमा यो सँधै हुन्छ।
• : nth-child (n)
  • यो सटीक बाल तत्वहरूसँग मेल गर्न वा वैकल्पिक म्याचहरू प्राप्त गर्न चर प्रयोग गर्नुहोस्।
• : nth-last-child (n)
  • अन्तिम बच्चाहरूको अन्तिममा गणना गर्नुहोस्।
• : nth-of-type (n)
  • दस्तावेज रूखमा पहिले देखि नै एउटै नामसँग भाइरल तत्वहरू मिलान गर्नुहोस्।
• : nth-last-of-type (n)
  • भाइरसहरूसँग मेल खाने एउटै नामको साथ तलबाट गणना गरिँदै।
• : अन्तिम-बच्चा
  • अन्तिम बालबालिकाको अभिभावकसँग मेल खान्छ।
• : पहिलो प्रकारको
  • त्यो प्रकारको पहिलो भाइरस तत्व मिलाउनुहोस्।
• : last-of-type
  • त्यो प्रकारको अन्तिम भाइरस तत्व मिलाउनुहोस्।
• :एक्लो सन्तान
  • आफ्नो आमाबाबु को एक मात्र बच्चा हो जो तत्व देखि मेल खाते।
• : केवल प्रकारको
  • तत्व को मिल्दो जुन यसको प्रकारको एक मात्र हो।
• खाली
  • कुनै पनि बच्चाहरू छैनन् (पाठ नोडहरू सहित) को तत्वसँग मिल्दो।
• : लक्ष्य
  • एक तत्व जो मेल खाने URI को लक्ष्य हो।
• : सक्षम
  • सक्षम पार्दा तत्वलाई मिलाउनुहोस्।
• :अक्षम
  • असक्षम हुँदा तत्वलाई मिलाउनुहोस्।
• : जाँच गरियो
  • जब तत्व जाँच गरिएको तत्वलाई मिलाउनुहोस् (रेडियो बटन वा चेकबक्स)।

• : (हरू)
  • जब तत्वले साधारण चयनकर्तासँग मेल खाएन भने मिल्दो गर्नुहोस्।

एक नयाँ संयोजक:

• elementA ~ element बी
  • मिल्दा जब तत्व B तत्वको पछि कहीं पछि AA, जरूरी तुरुन्तै।

नयाँ गुणहरू

CSS3 ले नयाँ सीएसएस गुणहरूको संख्या पनि प्रस्तुत गर्यो। यी धेरै गुणहरू दृश्य शैलीहरू सिर्जना गर्न थालिन् जसले फोटोशॉप जस्तो ग्राफिक्स प्रोग्रामको साथ थप सम्भवतः सम्भव पार्छ। यी मध्ये केहि, किनारा-रेडियस वा बक्स-छाया, CSS3 यदि परिचय पछि चारैतिर रहेको छ। अन्यहरू, फाईलबक्स जस्तै वा सीएसएस ग्रिड जस्ता नयाँ शैलीहरू जुन अझै पनि CSS3 थपिहरू मानिन्छ।

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

बहु पृष्ठभूमि म मर्ज गर्दछु

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

नयाँ पृष्ठभूमि शैली गुणहरू

CSS3 मा केहि नयाँ पृष्ठभूमि गुणहरू छन्।

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

अवस्थित पृष्ठभूमि शैली गुणहरूमा परिवर्तन

अवस्थित पृष्ठभूमि शैली गुणहरूमा केही परिवर्तनहरू छन्:

• पृष्ठभूमि दोहोर्याउनुहोस्
  • यस गुणको लागि दुई नयाँ मानहरू छन्: स्पेस र राउन्ड। स्पेस बिना टाँस्न बाकस भित्र टाइल गरिएको चित्र समान रूपमा। गोल्ड पृष्ठभूमि छवि पुन: उद्धार गर्दछ ताकि यसले बक्समा पूर्ण समय टाइल गर्नेछ।
• पृष्ठभूमि संलग्न
  • नयाँ मान "स्थानीय" थपिएको छ ताकि पृष्ठभूमिमा तत्वको सामग्रीको साथ स्क्रॉल हुनेछ जब त्यो तत्त्व स्क्रॉल पट्टी छ।
• पृष्ठभूमि
  • पृष्ठभूमि आर्थक सम्पत्ति आकार र मूल गुणहरूमा थप्दछ।

CSS3 सीमा गुण

CSS3 सीमानाहरूमा हामी प्रयोग गरिएका शैलीहरू हुन सक्छ (ठोस, डबल, ड्यास, इत्यादि) वा तिनीहरू छवि हुन सक्छ। साथै, CSS3 गोल कोनेहरू सिर्जना गर्ने क्षमतामा ल्याउँछ। सीमा चित्रहरू रोचक छन् किनभने तपाइँ सबै चार सिमानाहरूको छवि सिर्जना गर्नुहुनेछ र त्यसपछि सीएसएसलाई कसरी बताउनुहोस् कि छविलाई तपाईंको सिमानामा लागू गर्न।

नयाँ सीमा शैली गुणहरू

त्यहाँ CSS3 मा केहि नयाँ सीमाना गुणहरू छन्:

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

सीमाहरू र पृष्ठभूमिमा सम्बन्धित थप CSS3 गुणहरू

पृष्ठ ब्रेकमा बक्स ब्रेक हुँदा, रेखा ब्रेकका लागि स्तम्भ ब्रेक (इनलाइन तत्वहरूको लागि) बक्स-सजावट-ब्रेक सम्पत्तिले कसरी परिभाषित गर्दछ कि कसरी नयाँ बक्स सिमाना र प्याडिङसँग लिपिन्छन्। पृष्ठभूमि यो गुण प्रयोग गरी बहु बिच्छे बक्सहरू बीच विभाजित गर्न सकिन्छ।

त्यहाँ पनि बक्स-छाया गुण हो जुन बक्स तत्वहरूमा छायाहरू थप्न प्रयोग गर्न सकिन्छ।

CSS3 को साथ, अब तपाइँ सजिलै संग टेबल वा जटिल डि ट्याग ढाँचा बिना बहु स्तम्भहरूसँग वेब पृष्ठ सेट अप गर्न सक्नुहुन्छ। तपाइँले ब्राउजरलाई मात्र भन्नुहुन्छ कि शरीरको तत्वमा कति स्तम्भहरू हुनुपर्छ र तिनीहरू कति चम्किलो हुनुपर्छ। साथै तपाईं सिमाना (नियमहरू), पृष्ठभूमि रङहरू स्तम्भको उचाइमा बिताउन सक्नुहुन्छ, र तपाइँको पाठ स्वचालित रूपमा सबै स्तम्भहरू मार्फत प्रवाह गर्नेछ।

CSS3 स्तम्भहरू - स्तम्भहरूको संख्या र चौडाइ परिभाषित गर्नुहोस्

त्यहाँ तीन नयाँ गुणहरू छन् जुन तपाइँले तपाइँको स्तम्भहरूको संख्या र चौडाइ परिभाषित गर्न अनुमति दिन्छ:

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

CSS3 स्तम्भ ग्याप र नियम

समान बहुकोष परिदृश्यमा स्तम्भहरू बीच ग्यापहरू र नियमहरू राखिएका छन्। ग्याप्सले स्तम्भहरूलाई अलग गर्नेछ, तर नियमहरूले कुनै पनि ठाउँ लिँदैनन्। यदि एक स्तम्भ नियम अन्तरिक्ष भन्दा ठूलो छ भने, यसले आसन्न स्तम्भहरू ओभरलैप गर्नेछ। त्यहाँ स्तम्भ नियम र अंतरालका लागि पाँच नयाँ गुणहरू छन्:

• स्तम्भ-अन्तर
  • स्तम्भहरू बीचको चौडाई परिभाषित गर्दछ।
• स्तम्भ-नियम-रंग
  • नियमको रंग परिभाषित गर्दछ।
• स्तम्भ नियम शैली
  • नियमको शैली परिभाषित गर्दछ (ठोस, डट भयो, डबल, आदि)।
• स्तम्भ नियम-चौडाइ
  • नियमको चौडाइ परिभाषित गर्दछ।
• स्तम्भ नियम
  • एक तीर्थ सम्पत्ति सबै तीन स्तम्भ नियम गुणहरू एकैचोटीमा परिभाषित गर्दछ।

CSS3 स्तम्भ ब्रेकहरू, स्प्यानिङ स्तम्भहरू, र भरिएका स्तम्भहरू

स्तम्भ ब्रेकहरूले पज गरिएको सामग्रीमा ब्रेक परिभाषित गर्न प्रयोग गरिने समान CSS2 विकल्पहरू प्रयोग गर्दछ, तर तीन नयाँ गुणहरूसँग: ब्रेक-अगाडि , ब्रेक-पछि , र ब्रेक-भित्र ।

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

स्तम्भ भरिएको निर्णयले प्रत्येक स्तम्भमा कति सामग्री हुनेछ। सन्तुलित स्तम्भहरू प्रत्येक स्तम्भमा सामग्रीको एकै मात्रामा राख्न प्रयास गर्ने बेलामा स्वत: मात्र प्रवाह हुन्छ जब स्तम्भ पूर्ण हुन्छ र त्यसपछि अर्कोमा जान्छ।

CSS3 मा थप विशेषताहरू त्यो CSS2 मा शामिल एरेन

त्यहाँ CSS3 मा धेरै थप विशेषताहरू छन् जुन CSS2 मा अवस्थित थिएन:

• CSS टेम्प्लेट लेआउट मोड्युल र CSS3 ग्रिड पोजीनिंग मोड्युल : सीएसएस संग ग्रिड सिर्जना गर्न।
• CSS3 पाठ मोड्युल : आउटलाइन पाठ र सीएसएससँग ड्रप-छायाँहरू सिर्जना गर्नुहोस्।
• CSS3 रङ मोड्युल : अब अस्पष्टताको साथ।
• बक्स मोडेलमा परिवर्तन : एक समुद्री सम्पत्ति सहित IE ट्याग जस्तै कार्य गर्दछ।
• CSS3 प्रयोगकर्ता इन्टरफेस मोड्युल : तपाईंलाई नयाँ कर्सर दिने, कार्यहरूको लागि प्रतिक्रियाहरू, आवश्यक फिल्डहरू, र यहाँको रिसाइज तत्वहरू ।
• मिडिया प्रश्नहरू : मिडिया क्वेरीहरूले तपाइँलाई कसरी शैली पाना प्रयोग गर्नुपर्दा परिभाषित गर्दा तपाईंलाई अधिक लचीलापन दिन्छ। उदाहरणका लागि, तपाईंले शैली पाना परिभाषित गर्न सक्नुहुनेछ जुन केवल ह्यान्डहेल्ड उपकरणहरूको लागि हो जुन 20em भन्दा ठूलो दृश्यपोर्ट छ।
• CSS3 रूबी मोड्युल : कागजातहरू एनोटेट गर्न पाठ्यपुस्तक रूबी प्रयोग गर्ने भाषाहरूको लागि समर्थन प्रदान गर्दछ।
• CSS3 पगेड मिडिया मोड्युल : पेज गरिएको मिडियाका लागि थप समर्थनको लागि (कागज, पारदर्शी, आदि)।
• जेनेरेट गरिएको सामग्री : एल चलिरहेको हेडरहरू र फुटरहरू, फुटनोटहरू, र अन्य सामग्री जुन कार्यक्रममा उत्पन्न हुन्छ, विशेष गरी प्याज गरिएका मीडियाहरूको लागि।
• CSS3 भाषण मोड्युल : एural CSS मा परिवर्तन।