يعد ربط ملف CSS بمستند HTML مهمة شائعة لمطوري الويب. يسمح لك بفصل محتوى موقع الويب الخاص بك عن العرض التقديمي الخاص به ، مما يسهل صيانته وتحديثه. يحتوي ملف CSS على الأنماط التي تحدد شكل محتوى HTML وتنسيقه. عندما يتم تحميل مستند HTML في مستعرض ويب ، فإنه يسترد ملف CSS المرتبط ويطبق الأنماط على عناصر HTML.
ربط ملف CSS بملف HTML
- الربط الخارجي
- الربط الداخلي
- الربط الخارجي
الطريقة الأكثر شيوعًا لربط ملف CSS بمستند HTML هي من خلال الارتباط الخارجي. تتضمن هذه الطريقة إنشاء ملف .css منفصل يحتوي على الأنماط الخاصة بك والارتباط بها من مستند HTML الخاص بك.
اقرأ المزيد: مميزات وعيوب CSS
إضافة ملف CSS إلى HTML
- قم بإنشاء ملف .css في محرر النصوص الخاص بك وحفظه بامتداد .css.
- أضف الأنماط الخاصة بك إلى ملف .css. يمكنك إضافة أنماط باستخدام محددات وخصائص CSS.
- افتح مستند HTML الخاص بك في محرر نصوص.
- أضف الكود التالي في قسم رأس مستند HTML الخاص بك.
<link rel="stylesheet" type="text/css" href="your-css-file.css">في التعليمات البرمجية أعلاه ، تعتبر rel سمة تحدد العلاقة بين مستند HTML والمورد المرتبط. تشير قيمة "ورقة الأنماط" إلى أن الملف المرتبط عبارة عن ورقة أنماط. تحدد سمة النوع نوع المورد المرتبط ، وقيمته هي "text / css" للإشارة إلى أنه ملف CSS. أخيرًا ، تحدد السمة href موقع ملف CSS بالنسبة إلى مستند HTML.
الربط الداخلي
هناك طريقة أخرى لربط ملف CSS بمستند HTML وهي من خلال الارتباط الداخلي. تتضمن هذه الطريقة إضافة الأنماط الخاصة بك مباشرةً إلى قسم الرأس في مستند HTML الخاص بك باستخدام علامة <style>.
لربط ملف CSS بمستند HTML باستخدام الارتباط الداخلي ، تحتاج إلى اتباع الخطوات التالية:
- افتح مستند HTML الخاص بك في محرر نصوص.
أضف الكود التالي في قسم رأس مستند HTML الخاص بك:
<style>
/* your styles here */
</style>في الكود أعلاه ، يتم استخدام علامة <style> لتحديد قسم لأنماطك. يمكنك إضافة الأنماط الخاصة بك مباشرة بين علامات الفتح والإغلاق <style>.
الربط الداخلي مفيد للمشاريع الصغيرة أو لأغراض الاختبار. ومع ذلك ، بالنسبة للمشاريع الأكبر حجمًا ، يوصى باستخدام الارتباط الخارجي ، لأنه يسهل الحفاظ على أنماطك وتحديثها.
من المهم ملاحظة أن الترتيب الذي يتم تحديد الأنماط به في ملف CSS الخاص بك أو علامة <style> يمكن أن يكون له تأثير على العرض النهائي لصفحة الويب الخاصة بك. الأنماط المحددة لاحقًا في ملفك أو بعد علامة الفتح <style> ستحل محل الأنماط المحددة سابقًا. يُعرف هذا باسم الخاصية "المتتالية" لـ CSS.
استنتاج
يعد ربط ملف CSS بمستند HTML عملية بسيطة توفر العديد من الفوائد. من خلال فصل المحتوى والعرض التقديمية ، يمكنك جعل عملية تطوير الويب أكثر كفاءة ومرونة. سواء اخترت ربط ملف CSS الخاص بك خارجيًا أو داخليًا ، فإن المفتاح هو فهم المفاهيم الأساسية والخطوات المتضمنة في العملية.