كيفية إضافة CSS

كيفية إضافة CSS

عندما يقرأ المتصفح ورقة أنماط CSS، فإنه ينسّق مستند HTML وفقًا للقواعد والتعليمات المحدّدة في تلك الورقة.

توجد ثلاث طرق أساسية لإضافة CSS إلى صفحات HTML:

  1. CSS خارجي (External CSS): ربط صفحة HTML بملف CSS خارجي مستقل ذي الامتداد .css.
  2. CSS داخلي (Internal CSS): استخدام العنصر <style> داخل القسم <head> من مستند HTML لكتابة قواعد التنسيق.
  3. CSS مضمن (Inline CSS): استخدام السمة style مباشرةً داخل عناصر HTML لتطبيق التنسيقات عليها.

CSS الخارجي

باستخدام ورقة أنماط خارجية، يمكنك تغيير مظهر موقع إلكتروني بالكامل من خلال تعديل ملف واحد فقط!

يجب أن تتضمن كل صفحة HTML مرجعًا إلى ملف CSS الخارجي داخل العنصر <link>، الموجود ضمن القسم <head> من المستند.

تتيح لك هذه الطريقة فصل التنسيقات عن محتوى الصفحة، وتطبيق التصميم نفسه على صفحات متعددة بسهولة.

<link rel="stylesheet" href="mystyle.css">

يمكن كتابة ورقة الأنماط الخارجية باستخدام أي محرر نصوص، ويجب حفظها بامتداد .css.

يجب ألا يحتوي ملف .css الخارجي على أي وسوم HTML.

إليك مثالًا على محتوى الملف mystyle.css:

ملاحظة: لا تضع مسافة بين قيمة الخاصية ووحدة القياس px.

خطأ (مع مسافة):

margin-left: 20 px;

صحيح (من دون مسافة):

margin-left: 20px;

CSS الداخلي (Internal CSS)

يمكن استخدام CSS الداخلي لتحديد نمط صفحة HTML واحدة فقط.

يُكتب CSS الداخلي داخل العنصر <style>، الموجود ضمن القسم <head> من مستند HTML.

CSS المضمّن (Inline CSS)

يمكن استخدام التنسيق المضمّن لتطبيق نمط خاص على عنصر HTML واحد.

لاستخدام هذا النوع من التنسيق، أضف الخاصية style إلى العنصر المطلوب. ويمكن أن تتضمن هذه الخاصية أي خاصية من خصائص CSS.

إذا تم تعريف قيم مختلفة للخاصية نفسها، ضمن المحدِّد نفسه (العنصر نفسه)، في أوراق أنماط متعددة، فستُستخدم القيمة الواردة في آخر ورقة أنماط يتم تحميلها، بشرط تساوي أولوية القواعد وعدم وجود عوامل أخرى تؤثر في ترتيب تطبيقها.