सीएसएस शैलीचे 3 प्रकार समजून घेणे

इनलाइन, एम्बेडेड आणि बाह्य शैली पत्रके: आपल्याला काय माहिती असणे आवश्यक आहे ते येथे आहे

फ्रन्ट-एंड वेबसाईट डेव्हलपमेंट हे सहसा 3-पायांवर मल म्हणून घोषित केले जाते. हे पाय खालील प्रमाणे आहेत:

• एका साइटच्या संरचनेसाठी HTML ;
• व्हिज्युअल शैलीसाठी सीएसएस ;
• व्यवहारासाठी Javascript

या स्टूलचा दुसरा टप्पा, सीएसएस किंवा कॅस्केडिंग स्टाइल शीट, आज आपण येथे पाहत आहोत. विशेषत :, आम्ही आपल्याला एका दस्तऐवजामध्ये 3 प्रकारच्या शैलींमध्ये संबोधित करू इच्छितो.

1. इनलाइन शैली
2. एम्बेडेड शैली
3. बाह्य शैली

या प्रत्येक प्रकारच्या CSS शैलीस त्यांचे लाभ आणि कमतरता असतात, म्हणून आपण प्रत्येकाकडे वैयक्तिकरित्या एक वेगळा दृष्टीकोन द्या.

इनलाइन शैली

इनलाइन शैली शैली आहेत जी थेट HTML दस्तऐवजात टॅग केल्या आहेत. इनलाइन शैली केवळ विशिष्ट टॅगवर लागू होतात ज्या ते लागू आहेत. येथे मानक दुवा, किंवा अँकरवर लागू केलेल्या इनलाइन शैलीचे एक उदाहरण आहे:

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

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

अंतःप्रेरणा फारच कमी प्रमाणात वापरले जातात तेव्हा इनलाइन शैली खरोखरच योग्य असते.

खरेतर, मी माझ्या वेबपृष्ठावर कधीही क्वचितच इनलाइन शैली वापरत नाही

एम्बेड केलेली शैली

एम्बेडेड शैली अशी शैली आहे जी कागदपत्रांच्या शीर्षस्थानी एम्बेड केली आहेत. एम्बेडेड शैली ते एम्बेड केलेल्या पृष्ठावरील केवळ टॅगच प्रभावित करतात. पुन्हा एकदा, ही पद्धत सीएसएसच्या ताकदाने नाकारते. प्रत्येक पृष्ठामध्ये शैली असल्यामुळे

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

स्टाइलशीट्स जे जोडल्या जातात

दस्तऐवजाचा त्या पृष्ठावर मार्कअप कोडची लक्षणीय रक्कम देखील जोडते, जे भविष्यात पृष्ठावर अधिक कठोरपणे व्यवस्थापित करण्यासाठी देखील करु शकते.

एम्बेडेड स्टाइलशीटचा लाभ हा आहे की, इतर बाह्य फायलींना लोड करण्याची गरज न धरता पृष्ठासह तात्काळ भार. डाउनलोड गती आणि कार्यक्षमता दृष्टीकोनातून हा एक फायदा होऊ शकतो.

बाह्य शैली पत्रके

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

यामुळे दीर्घकालीन साइट व्यवस्थापन खूप सोपे होते

बाह्य शैली पत्रकास downside ते असे आहे की त्यांना या बाह्य फायली आणण्यासाठी आणि लोड करण्यासाठी पृष्ठांची आवश्यकता आहे. प्रत्येक पृष्ठ सीएसएस शीटमध्ये प्रत्येक शैली वापरणार नाही, त्यामुळे बर्याच पेजेस प्रत्यक्षात त्यापेक्षा जास्त सीएसएस पृष्ठ लोड करेल.

हे खरे आहे की बाह्य सीएसएस फायलींसाठी कामगिरी हिट आहे, हे निश्चितपणे कमी केले जाऊ शकते. वास्तविकपणे, सीएसएस फाईल्स केवळ मजकूर फाईल्स आहेत, त्यामुळे ते सहसा सुरू करण्यासाठी फार मोठ्या नाहीत. आपली संपूर्ण साइट 1 सीएसएस फाईल वापरत असल्यास, सुरुवातीला लोड झाल्यानंतर त्या दस्तऐवजाचा लाभ घेता येतो.

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