الأنواع الثلاثة لأنماط CSS

غالبًا ما يتم تمثيل تطوير موقع الويب الأمامي على أنه مقعد ثلاثي الأرجل يتكون من:

• لغة البرمجة لهيكل الموقع
• CSS للأنماط المرئية
• جافا سكريبت للسلوكيات

الجزء الثاني من هذا المقعد ، Cascading Style Sheets ، يدعم ثلاثة أنماط مختلفة يمكنك إضافتها إلى المستند.

1. الأنماط المضمنة
2. الأنماط المضمنة
3. الأنماط الخارجية

يقدم كل من أنماط CSS هذه مزايا وعيوب فريدة.

الأنماط المضمنة

الأنماط المضمنة هي أنماط تتم كتابتها مباشرة في العلامة في مستند HTML. تؤثر الأنماط المضمنة على العلامة المحددة التي يتم تطبيقها عليها فقط:

تقوم قاعدة CSS هذه بإلغاء تنشيط زخرفة النص المسطر القياسي لهذا الارتباط الواحد. ومع ذلك ، لن يغير أي ارتباط آخر على الصفحة. هذا هو أحد قيود الأنماط المضمنة. نظرًا لأنها تتغير فقط على عنصر معين ، فستحتاج إلى إضافة هذه الأنماط إلى HTML الخاص بك لتحقيق تصميم موحد للصفحة. هذه ليست أفضل ممارسة: في الواقع ، إنها أبعد ما تكون عن أيام الخط العلامات ومزيج الهيكل والأسلوب في صفحات الويب.

تتطلب الأنماط المضمنة أيضًا تحديدًا عاليًا جدًا. هذا يجعل من الصعب استبدالها بأنماط أخرى غير مضمنة. على سبيل المثال ، إذا كنت ترغب في جعل موقع مستجيبًا وتغيير كيفية ظهور عنصر في نقاط توقف معينة باستخدام

تساؤلات الإعلام، الأنماط المضمنة على عنصر تجعل هذا الأمر صعبًا.

تكون الأنماط المضمنة مناسبة فقط عند استخدامها باعتدال ، في أسلوب "استثناء من القاعدة" الذي يحدد عنصرًا أو عنصرين بعيدًا عن أقرانهم على الصفحة.

الأنماط المضمنة

توجد الأنماط المضمنة في رأس المستند. إنها مغلفة وتشبه إلى حد كبير ملفات CSS الخارجية داخل هذا الجزء من المستند.

تؤثر الأنماط المضمنة فقط على العلامات الموجودة على الصفحة المضمنة فيها. مرة أخرى ، هذا النهج ينفي إحدى نقاط القوة في CSS. نظرًا لأن كل صفحة تتميز بأنماط محددة في الرأس ، إذا كنت تريد إجراء تغيير على مستوى الموقع - مثل تغيير اللون من الروابط من الأحمر إلى الأخضر - ستحتاج إلى إجراء هذا التغيير في كل صفحة ، حيث تستخدم كل صفحة نمطًا مضمنًا ملزمة. هذا النهج أفضل من الأنماط المضمنة ولكنه لا يزال يمثل مشكلة في كثير من الحالات.

تضيف أوراق الأنماط التي تتم إضافتها إلى رأس المستند أيضًا قدرًا كبيرًا من كود الترميز إلى تلك الصفحة ، مما قد يجعل إدارة الصفحة أكثر صعوبة في المستقبل.

تتمثل فائدة أوراق الأنماط المضمنة في أنها يتم تحميلها على الفور مع الصفحة نفسها ، بدلاً من طلب تحميل ملفات خارجية أخرى. يمكن أن تكون هذه التقنية مفيدة من منظور سرعة التنزيل والأداء.

أوراق النمط الخارجي

تستخدم معظم مواقع الويب اليوم أوراق أنماط خارجية. الأنماط الخارجية هي أنماط تتم كتابتها في مستند منفصل ثم إرفاقها بمستندات ويب متنوعة. يتم استدعاؤهم في المستند الرئيسي باستخدام ملف علامة في رأس المستند. يمكن أن توجد أوراق الأنماط الخارجية إما على نفس الخادم مثل HTML ، أو يمكن سحبها من خادم آخر تمامًا. هذا هو الحال غالبًا مع الأصول ، مثل الخطوط ، التي تقترضها العديد من المواقع من Google.

أوراق الأنماط الخارجية تؤثر على أي مستند يتم إرفاقهم به ، مما يعني أنه إذا كان لديك موقع ويب مكون من 20 صفحة حيث تستخدم كل صفحة نفس ورقة الأنماط (هذه هي الطريقة التي يتم بها ذلك عادةً) ، يمكنك إجراء تغيير مرئي على كل صفحة من هذه الصفحات عن طريق تحرير هذا النمط فقط ملزمة. هذا الاقتصاد يجعل إدارة الموقع على المدى الطويل أسهل بكثير.

الجانب السلبي لأوراق الأنماط الخارجية هو أنها تتطلب صفحات لجلب هذه الملفات الخارجية وتحميلها. لن تستخدم كل صفحة كل نمط في ورقة CSS ، لذلك ستحمل العديد من الصفحات صفحة CSS أكبر بكثير مما تحتاجه بالفعل.

في حين أنه من الصحيح أن هناك أداء ناجحًا لملفات CSS الخارجية ، فمن المؤكد أنه يمكن تصغيرها. من الناحية الواقعية ، تعد ملفات CSS مجرد ملفات نصية ، لذا فهي ليست كبيرة لتبدأ. إذا كان موقعك بالكامل يستخدم ملف CSS واحدًا ، فستستفيد أيضًا من تخزين هذا المستند مؤقتًا بعد تحميله في البداية ، مما يعني أن قد يكون هناك أداء بسيط في الصفحة الأولى لبعض الزيارات ، ولكن الصفحات اللاحقة ستستخدم ملف CSS المخزن مؤقتًا ، لذا فإن أي نتيجة ستكون نفي.