توثيق تقني

الفصل 2: كيفية ربط CSS بملف HTML | تطبيق على ربط ملفات خارجية

Written by

Eng~ Rabea Shaban

in

📌 لماذا نربط CSS بملف HTML؟

صفحة الويب تحتاج إلى شيئين:

  • هيكل (Structure): وهو HTML.
  • تنسيق (Style): وهو CSS.

ربط CSS مع HTML ضروري حتى تُطبق التنسيقات على العناصر وتظهر النتيجة للمستخدم بالشكل المطلوب.

💡 طرق ربط CSS بصفحة HTML

1. الربط الخارجي (External CSS) ✅ الأفضل والأكثر استخدامًا

نستخدمه عند فصل التصميم في ملف منفصل. الملف عادة يكون اسمه style.css أو أي اسم آخر.

✅ الخطوات:

  1. أنشئ ملف HTML باسم index.html
  2. أنشئ ملف CSS باسم style.css
  3. داخل <head> من ملف HTML، أضف الكود التالي:
htmlCopy code<link rel="stylesheet" href="style.css">

📦 مثال عملي:

🔹 ملف: index.html

htmlCopy code<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <title>مثال على ربط CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>مرحبًا بك في موقعي</h1>
  <p>هذا مثال على ربط ملف CSS خارجي.</p>
</body>
</html>

🔹 ملف: style.css

cssCopy codebody {
  background-color: #f4f4f4;
  font-family: Arial, sans-serif;
}

h1 {
  color: #0066cc;
  text-align: center;
}

p {
  color: #444;
  text-align: center;
}

🔁 النتيجة:

  • الخلفية باللون الرمادي الفاتح
  • العنوان بلون أزرق ومنتصف الصفحة
  • النص بلون رمادي غامق

🟡 هل يمكن وضع أكثر من ملف CSS؟

نعم، يمكن ربط عدة ملفات CSS في نفس الصفحة:

htmlCopy code<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">

المتصفح يقرأها بالترتيب. لو هناك تعارض، يُطبق الملف الأخير.

❗أين نضع وسم <link> داخل HTML؟

يجب أن يكون داخل <head> قبل غلق الوسم:

htmlCopy code<head>
  <link rel="stylesheet" href="style.css">
</head>

لو تم وضعه في <body> قد يعمل لكنه ليس مفضل من الناحية التقنية.

🛠️ أخطاء شائعة:

الخطأالسببالحل
الملف لا يظهرالمسار خاطئتأكد من اسم المجلد/المسار
التنسيقات لا تعملوسم <link> في مكان خاطئضعه داخل <head>
CSS لا يطبق على عناصر HTMLselector غير صحيحتأكد من أسماء العناصر أو الكلاسات

🎯 متى نستخدم الربط الخارجي؟

  • في المشاريع الكبيرة
  • إذا كانت هناك أكثر من صفحة HTML تستخدم نفس التصميم
  • لو أردت إعادة استخدام نفس التنسيقات في صفحات مختلفة

✍️ تدريب تطبيقي:

المطلوب:

  • صمّم صفحة HTML بسيطة فيها عنوان، فقرة، وزر.
  • أنشئ ملف CSS خارجي يحتوي على:
    • لون خلفية
    • تغيير لون العنوان
    • تغيير شكل الزر (لون + حدود + تأثير hover)

Comments

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

More posts