فاصلة
  • CSS
  • ?
    : ترتيب الدرس
  • 13
    عدد الدروس
  • ?
    أخر تحديث

ربط ملفات CSS بملف HTML

كما نعرف بأن لغة Css تقوم بتعديل وتصميم صفحات الـ HTML ولكن يجب ان نربط اللغتين مع بعضهم البعض لتنفيذ أكواد لغة Css علي أكواد HTML , وفي تلك الحالة يوجد 3 طرق يمكنك اختيار أي طريقة منهم لتنفيذ أكواد Css علي الموقع

  • الطريقة الأولي  : صفحة خارجية نكتب بداخلها أكواد الــ Css ويتم ربطها  بأكواد الــ HTML
  • الطريقة الثانية : اضافة أكواد CSS في أعلي صفحة الــ HTML
  • الطريقة الثالثة : كتابة أكواد الــ Css في داخل الوسم كما تعرفنا عليها في لغة HTML

الطريقة الأولي External Style

هي الطريقة الأكثر أستخداماً بين مصممين المواقع, بحيث يفضلون كتابة كامل أكواد الــ Css في صفحة فارغة بعيداً عن أكواد HTML ومن ثم ربط الصفحتين ببعضهم عن طريق أضافة السطر التالي في صفحة HTML ,ووظيفة السطر هي أستدعاء ملف الــتصميم css وتطبيق ما فية علي صفحة الــ HTML ,

<"link  rel=" stylesheet" type=" text/css" href=" style.css>

الوسم link:

هو المسؤول عن ربط صفحة خارجية بملف الـ HTML ويوجد بداخلة الخاصية href المسؤولة عن تحديد مسار الملف الذي يتم استدعائة, وفي حالة لغة CSS سوف نقوم بأستدعاء الملف عن طريق تحديد المسار الصحيح علي الجهاز الخاص بك , اذا كان ملف css في نفس الفولدر الذي يوجد بة ملف ال HTML , سوف نكتب اسم ملف الــ css  بالأمتداد style.css  واذا كان في فولدر فرعي مثلاً سوف نقوم بتحديد المسار بشكل طبيعي عن طريق تحديد الفولدر / وتحديد المف , 

<"link  rel=" stylesheet" type=" text/css" href=" style.css>

الطريقة الثانية Internal Style

في تلك الطريق يتم كتابة أكواد لــ CSS في اعلي صفحة الــ HTML , ويتم تفضيل تلك الطريق للمبتدئين  للأبتعاد عن خطأ تحديد مسار الملف الخارجي وسهولة أكتشاف الأخطاء في نفس الصفحة بعيدأ عن تعدد الصفحات في البداية , ولكن يفضل عند التعمق في المجال استخدام الطريقة الأولي نظراً لسهولة تنظيم الملفات, والأن بكل بساطة يمكننا اضافة أوامر CSS في نفس صفحة HTML بدون اي استدعاء لملفات خارجية  .

بالتحديد يتم كتابة أكواد Css بين وسم ومكان وضع الكود بالتحديد يكون في نهاية وسم head , وهذا نظراً لتنفيذ أكواد الــ css ومن ثم تحميل الصفحة, لأن عملية تحميل الصفحة تبدأ من اول الملف الي نهاية الملف

<"link  rel=" stylesheet" type=" text/css" href=" style.css>


الطريقة الثالثة Inline Style

هي طريقة قمنا بتنفيذها في بعض دروس الــ HTML , وهي كتابة أكواد الــ CSS في داخل الوسم الذي نريد تصميمة  ,وهي طريقة سهلة وبسيطة ,بحيث يكون العنصر وأوامر التصميم الخاصة بة في مكان واحد ,وفيما يلي قمنا بتغيير لون العنوان الي اللون الاخضر نتيجة استخدام الخاصية color, وفي نفس الوقت قمنا يتغيير حجم الخط الي 30px نتيجة أستخدام الخاصية font-size المسؤولة عن تغيير حجم الخط 

<h1 style="color:green;font-size:30px;" > Heading </h1>

ماذا يحدث لو استخدمنا التصميم في أكثر من مكان ؟

يمكنك أن تستخدم الثلاث طرق سوياً لأضافة التصميم للموقع الخاص بك ,بحيث أنة يمكنك استخدام الطريقة الأولي مع الطريقة الثانية مع الطريقة الثالثة ,وسنفترض بأنك قمت بأضافة تصميم للوسم h1 في ملف خارجي وقمت بأضافة نفس التصميم في اعلي صفحة html ,ونفس الأمر في داخل الوسم نفسة , في تلك الحالة سوف يختار المتصفح التصميم الموجود في الوسم نفسة ,لأن الترتيب الخاص بقوة التأثير يوجد بالترتيب في الطريقة الثالثة ومن ثم الثانية ومن ثم الأولي ,ولتوضيح الفكرة سوف نفترض وجود صور في الموقع قمت بأعطائها طول وعرض بأستخدام الطريقة الأولي وهي الملف الخارجي ,ونفس الأمر بين وسم style في أعلي الصفحة وهي الطريقة الثانية ولكن مع تغيير المقاسات الخاصة بالطول والعرض ,ونفس الأمر داخل وسم الصورة نفسة مع طول وعرض مختلف عن الأول والثاني , في تلك الحالة سوف يتم تنفيذ الطول والعرض الموجودين داخل الوسم نفسة وهي الطريقة الثالثة .


أساسيات التضمين الألوان الخلفيات الحدود الهوامش الهوامش الداخلية العرض والأرتفاع الصناديق حدود خارجية النصوص الخطوط الأيقونات