5. ربط CSS: ملفات الأنماط الخارجية (أفضل الممارسات)
الطريقة الأكثر احترافية وقابلية للتوسع لإدارة CSS هي استخدام ملف أنماط خارجي (External Stylesheet). يتضمن ذلك إنشاء ملف .css منفصل وربطه بمستند HTML.
كيف تعمل ملفات الأنماط الخارجية
-
إنشاء ملف CSS: أنشئ ملفاً (مثل
styles.css) يحتوي فقط على قواعد CSS الخاصة بك.styles.css css body { font-family: 'Helvetica', sans-serif; line-height: 1.6; } .container { width: 80%; margin: 0 auto; }
-
الربط في HTML: استخدم عنصر
<link>داخل قسم<head>في HTML لتوصيل الملفات.index.html html
التنسيق الخارجي هو الأفضل
فهم وسم <link>
rel="stylesheet": يحدد العلاقة بين ملف HTML والملف المرتبط (أنه ملف أنماط).href="styles.css": يحدد المسار إلى ملف CSS.
لماذا الملف الخارجي هو الأفضل
- فصل المهام: يحافظ على نظافة HTML ويركز على الهيكل.
- الصيانة: قم بتغيير نمط في ملف
.cssمركزي واحد، وتطبق التغييرات فوراً عبر كل صفحة مرتبطة به. - التخزين المؤقت (Caching): يمكن للمتصفحات تخزين ملف CSS الخارجي مؤقتاً، مما يعني تحميل الصفحات اللاحقة بشكل أسرع لأن معلومات التنسيق مخزنة محلياً بالفعل.