📗 الفصل الثاني: طرق ربط CSS بصفحات HTML
🎯 الهدف من هذا الفصل:
أن تفهم كيف تجعل كود CSS يعمل على صفحة HTML، وما الفرق بين كل طريقة في الاستخدام والتأثير.
🔹 أولاً: الربط الخارجي (External CSS)
هذه هي الطريقة الأفضل والأكثر استخدامًا في المواقع الاحترافية.
الفكرة أنك تفصل التنسيق تمامًا عن المحتوى، بحيث:
ملف HTML يحتوي على النصوص والعناصر فقط.
ملف CSS يحتوي على التنسيقات الخاصة بها.
✳️ طريقة التنفيذ:
أنشئ ملف HTML باسم index.html.
أنشئ ملف CSS باسم style.css.
اربط بينهم بهذا الكود داخل وسم <head> في HTML:
<link rel="stylesheet" href="style.css">
🔧 مثال عملي:
🔸 ملف HTML:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<title>مثال على الربط الخارجي</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>مرحبًا بكم في موقعي</h1>
<p>هذا مثال على تنسيق خارجي باستخدام CSS.</p>
</body>
</html>
🔸 ملف style.css:
body {
background-color: #f3f3f3;
font-family: Arial, sans-serif;
}
h1 {
color: darkblue;
text-align: center;
}
p {
color: #444;
font-size: 18px;
}
🔹 النتيجة:
الصفحة تظهر بخلفية رمادية فاتحة، وعنوان أزرق في المنتصف، وفقرة نصها رمادي.
🔹 ثانيًا: الربط الداخلي (Internal CSS)
هذه الطريقة تُستخدم عندما تريد تنسيق صفحة واحدة فقط،
ولا تحتاج أن يكون التنسيق مشتركًا بين صفحات متعددة.
✳️ الطريقة:
تكتب كود CSS داخل وسم <style> الموجود داخل وسم <head>.
🔧 مثال عملي:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<title>مثال على CSS داخلي</title>
<style>
body {
background-color: #eef;
}
h1 {
color: green;
text-align: center;
}
p {
color: black;
}
</style>
</head>
<body>
<h1>مرحبًا بكم!</h1>
<p>هذا مثال على تنسيق داخلي باستخدام CSS.</p>
</body>
</html>
🔹 النتيجة:
الخلفية بنفسجية فاتحة، والعنوان أخضر في المنتصف.
🔹 ثالثًا: الربط الداخلي المباشر (Inline CSS)
في هذه الطريقة نكتب التنسيق داخل العنصر نفسه في وسمي HTML باستخدام خاصية style.
لكن كما قلنا سابقًا، لا يُفضل استخدامها إلا في حالات بسيطة أو تجريبية.
🔧 مثال:
<h1 style="color:red; text-align:center;">مرحبًا بك!</h1>
<p style="color:blue;">هذا نص بلون أزرق.</p>
🔹 النتيجة:
العنوان أحمر، والفقرة زرقاء.
🔸 مقارنة بين الطرق الثلاث:
الطريقة مكان كتابة CSS الأفضلية الاستخدام
External في ملف مستقل للمواقع الكبيرة ومتعددة الصفحات
Internal داخل <style> في الصفحة
للصفحات البسيطة أو التجارب
Inline داخل العنصر مباشرة
للتعديلات السريعة فقط
🧩 ملاحظات مهمة:
لو استخدمت أكثر من طريقة في نفس الصفحة، فالأقرب للعنصر هو اللي له الأولوية.
مثلًا:
Inline له أعلى أولوية.
بعده Internal.
ثم External.
(وهاي الطريقة نسميها CSS Specificity وسوف نشرحها لاحقًا بالتفصيل.)
لو أخطأت في كتابة الرابط داخل <link>, التنسيق ماراح يشتغل.
تأكد إن اسم الملف والمسار صحيح تمامًا.
لا تتردد في التواصل معنا للمزيد من التفاصيل:
📱 واتساب: 07745368501
💬 تليكرام: @qimim_platform
3July 19, 2026 44
