ثلاث طرق لإضافة CSS
هناك ثلاث طرق لربط أنماط CSS بصفحتك، ولكل منها استخدامها.
1) المضمّن (Inline) — داخل العنصر
عبر سمة style. للتجربة السريعة فقط:
<p style="color: red; font-size: 18px;">نص أحمر</p>
⚠️ يصعب صيانته ويخلط البنية بالمظهر — تجنّبه قدر الإمكان.
2) الداخلي (Internal) — في <head>
عبر وسم <style>. مناسب لصفحة واحدة:
<head>
<style>
p { color: blue; }
</style>
</head>
3) الخارجي (External) — ملف منفصل ✅ الأفضل
ملف .css مستقل تربطه بكل صفحاتك:
<head>
<link rel="stylesheet" href="style.css" />
</head>
/* style.css */
p { color: green; }
🔑 الطريقة الموصى بها هي الخارجية: ملف واحد يُنسّق آلاف الصفحات، ويُخزَّن في ذاكرة المتصفح (cache) فيسرّع التحميل.
أيّها يفوز عند التعارض؟
إن نُسّق العنصر بأكثر من طريقة، تكون الأولوية: المضمّن > الداخلي/الخارجي (بحسب ترتيبها وأولويتها — تفاصيلها في درس الأولوية والوراثة).
التعليقات في CSS
نص لا يؤثّر على التنسيق، لشرح الكود:
/* هذا تعليق في CSS */
p {
color: red; /* لون النص */
}
ملاحظة: CSS يستخدم
/* ... */فقط (لا يوجد تعليق سطر واحد مثل//).
الأخطاء الشائعة
- ❌ الإفراط في
styleالمضمّن → فوضى يصعب صيانتها. - ❌ نسيان
rel="stylesheet"في وسم<link>. - ❌ مسار خاطئ للملف في
href→ لا يُطبَّق التنسيق.
خلاصة
أضف CSS بثلاث طرق: مضمّن (تجنّبه)، داخلي (صفحة واحدة)، وخارجي عبر <link> (الأفضل دائمًا). استخدم /* */ للتعليقات.