فهم 3 أنواع من أنماط CSS

مضمن ، مضمن ، وأوراق أنماط خارجية: إليك ما تحتاج إلى معرفته

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

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

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

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

الأنماط الداخلية

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

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

الأنماط المضمنة لها أيضًا خصوصية عالية جدًا.

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

في نهاية المطاف ، تكون الأنماط المضمنة مناسبة حقًا فقط عند استخدامها بشكل بسيط جدًا.

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

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

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

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

أوراق الأنماط التي تتم إضافتها إلى

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

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

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

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

هذا يجعل إدارة الموقع طويلة الأجل أسهل بكثير.

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

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

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