شرح طرق إضافة CSS — متى تستخدم Inline أو Internal أو External؟
هناك ثلاث طرق لإضافة أكواد CSS إلى مستند HTML. كل طريقة لها استخداماتها ومميزاتها.
1. CSS داخلي (Inline)
يُكتب مباشرة داخل وسم HTML باستخدام خاصية style.
<h1 style="color:blue;">2. CSS في الرأس (Internal)
يُكتب داخل وسم <style> في قسم <head>.
<style> h1 { color: red; } </style>3. CSS خارجي (External)
يُكتب في ملف منفصل بصيغة .css ويُربط بالصفحة.
<link rel="stylesheet" href="style.css">1. التنسيق المضمن (Inline CSS)
يستخدم لتطبيق تنسيق فريد لعنصر واحد فقط. لا ينصح باستخدامه بكثرة لأنه يجعل الكود مزدحماً.
<h1 style="color: blue; text-align: center;">هذا عنوان أزرق</h1>
النتيجة في المتصفح:
هذا عنوان أزرق
2. التنسيق الداخلي (Internal CSS)
يستخدم إذا كانت الصفحة الواحدة لها تنسيق خاص بها يختلف عن باقي الموقع.
<head>
<style>
body { background-color: linen; }
h1 { color: maroon; margin-right: 40px; }
</style>
</head>
النتيجة في المتصفح:
عنوان داخلي التنسيق
3. التنسيق الخارجي (External CSS) - الأفضل
هذه هي الطريقة الاحترافية. تكتب كل التنسيقات في ملف واحد (مثلاً style.css) وتربطه بكل صفحات موقعك.
في ملف style.css:
body { background-color: lightblue; }
h1 { color: navy; }
في صفحة HTML:
<head>
<link rel="stylesheet" href="style.css">
</head>
النتيجة في المتصفح:
عنوان تم تنسيقه من ملف CSS خارجي
لماذا الطريقة الخارجية هي الأفضل؟ لأنها تسمح لك بتغيير شكل الموقع بالكامل (حتى لو كان آلاف الصفحات) من خلال تعديل ملف واحد فقط!
ملخص الدرس
- Inline: داخل العنصر (للتعديلات السريعة).
- Internal: في رأس الصفحة (لصفحة واحدة).
- External: في ملف منفصل (للمواقع الاحترافية).
- دائماً استخدم External CSS في مشاريعك الحقيقية.
الخطوة التالية: الآن بعد أن عرفنا أين نكتب الكود، لنتعلم كيف نكتبه (القواعد وبنية الجملة).