انواع CSS: شرح التعريفات والاختلافات المضمنة والخارجية والداخلية

فريق دكتورميجا

آخر تحديث بتاريخ يوليو 17, 2024

Facebook Tweet LinkedIn Email

يحدد CSS مظهر الواجهة الأمامية لموقع الويب الخاص بك. هناك عدة انواع من CSS، من بينها CSS المضمنة والخارجية.

باختصار، الفرق الرئيسي بين CSS المضمّن وCSS الخارجي هو أن الأول تتم معالجته بشكل أسرع لأنه يتطلب من المتصفح تنزيل ملف واحد فقط، بينما سيتطلب CSS الخارجي تنزيل ملفات HTML وCSS بشكل منفصل.

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

جدول المحتوى

ما هو CSS

أوراق الأنماط المتتالية (CSS) هي لغة ترميزية مسؤولة عن الشكل الذي ستبدو عليه صفحات الويب الخاصة بك. فهو يتحكم في الألوان والخطوط والتخطيطات لعناصر موقع الويب الخاص بك.

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

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

ما الفرق بين أنماط CSS المضمنة والخارجية والداخلية؟

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

CSS الداخلي

يتطلب منك CSS الداخلي أو المضمن إضافة وسم <style> في قسم <head> بمستند HTML الخاص بك.

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

إليك كيفية استخدام CSS الداخلي:

افتح صفحة HTML الخاصة بك وحدد موقع الوسم الافتتاحي <head>.
ضع الكود التالي بعد وسم <head> مباشر

<style type="text/css">

أضف قواعد CSS في سطر جديد. هنا مثال:

body {
    background-color: red;
}
h1 {
    color: green;
    padding: 50px;
}
اكتب علامة الإغلاق:
</style>

سيبدو ملف HTML الخاص بك كما يلي:

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: red;
}
h1 {
    color: green;
    padding: 50px;
} 
</style>
</head>
<body>
<h1>DoctorMega Tutorials</h1>
<p>This is our paragraph.</p>
</body>
</html>

مزايا CSS الداخلية:

يمكنك استخدام محددات الفئة والمعرف في ورقة الأنماط هذه، مثل المثال التالي:

#id {
    property1 : value1; 
    property2 : value2; 
    property3 : value3; 
}
.class {
    property1 : value1; 
    property2 : value2; 
    property3 : value3; 
}

نظرًا لأنك ستضيف الكود فقط داخل نفس ملف HTML، فلن تحتاج إلى تحميل ملفات متعددة.

عيوب CSS الداخلية:

يمكن أن تؤدي إضافة الكود إلى مستند HTML إلى زيادة حجم الصفحة ووقت التحميل.

CSS الخارجية

باستخدام CSS خارجي، ستتمكن من ربط صفحات الويب الخاصة بك بملف css. خارجي، والذي يمكن إنشاؤه بواسطة أي محرر نصوص في جهازك (على سبيل المثال، Notepad++).

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

اتبع هذه الخطوات لاستخدام CSS خارجي:

1. قم بإنشاء ملف css. جديد باستخدام محرر النصوص، ثم قم بإضافة قواعد النمط. على سبيل المثال:

.leftcol {
   float: left;
   width: 33%;
   background:#809900;
}
.middlecol {
   float: left;
   width: 34%;
   background:#eff2df;
}

2. في قسم <head> من ملف HTML الخاصة بك، قم بإضافة مرجع إلى ملف css. الخارجي مباشر بعد وسم <title>:

<link rel="stylesheet" type="text/css" href="style.css" />

لا تنس تغيير style.css باسم ملف css. الخاص بك.

مزايا CSS الخارجية:

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

عيوب CSS الخارجية:

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

مضمن CSS

يتم استخدام مضمن CSS (Inline) لتصميم عنصر HTML محدد. بالنسبة لنمط CSS هذا، ستحتاج فقط إلى إضافة سمة النمط إلى كل وسم HTML، دون استخدام المحددات.

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

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

دعونا نلقي نظرة على مثال. هنا، نضيف CSS مضمّنًا إلى وسم <p> و<h1>:

<!DOCTYPE html>
<html>
<body style="background-color:black;">
<h1 style="color:white;padding:35px;">DoctorMega Tutorials</h1>
<p style="color:white;">Something usefull here.</p>
</body>
</html>

مزايا CSS المضمنة:

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

عيوب CSS المضمنة:

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

الخاتمة

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

للتلخيص، إليك الانواع الثلاثة لـ CSS: