جاري التحميل...

طرق إضافة CSS

قد تكتب قواعد CSS سليمة تمامًا ومع ذلك لا يتغيّر شيء في الصفحة، لأن المتصفّح لم يحمّلها أصلًا. في هذه الجلسة ستتعرّف على ثلاث طرق شائعة لربط CSS بصفحة HTML، وعلى الطريقة التي ينبغي أن تجعلها خيارك الافتراضي.

كيف تضيف CSS إلى صفحة HTML؟

هناك ثلاث طرق: ورقة أنماط خارجية (ملف .css تربطه من داخل head)، أو كتلة <style> داخلية في head، أو الخاصية style المضمَّنة في عنصر واحد. وفي المواقع الحقيقية والمشاريع متعددة الصفحات، ابدأ بملف .css خارجي.

الطرق الثلاث في لمحة

استعن بهذا الجدول لتختار الطريقة المناسبة قبل أن تبدأ الكتابة. ستجد في الأقسام التالية مثالًا قصيرًا لكل طريقة.

📊 طرق إضافة CSS

الطريقة أين توضع إعادة الاستخدام بين الصفحات أفضل استخدام عملي
ورقة أنماط خارجية ملف .css منفصل مع <link> في head ممتازة الخيار الافتراضي للمشاريع ولهذه الدورة
CSS داخلي <style> … </style> في head الصفحة صفحة واحدة فقط العروض التجريبية السريعة والتمارين في ملف واحد
CSS مضمَّن style="…" في عنصر HTML واحد لا توجد تعديل مؤقت سريع لعنصر واحد (باعتدال)

ورقة الأنماط الخارجية (الخيار الافتراضي الموصى به)

احتفظ بـ HTML وCSS في ملفين منفصلين. في head أشِر إلى ورقة الأنماط بعنصر link؛ فيجلب المتصفّح ملف CSS ويطبّق قواعده.

ربط ورقة أنماط خارجية

html
HTML Code 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How To — External CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 class="hero">Styled from styles.css</h1>
</body>
</html>

اكتب القواعد في ملف styles.css بجوار ملف HTML (وإن كان الملف في مجلد فرعي فعدّل href ليطابق المسار):

ملف styles.css الخارجي

css
CSS Code 
.hero {
color: #0f766e;
font-family: Georgia, serif;
}

لماذا تتفوّق الورقة الخارجية في العمل الحقيقي

  • ورقة أنماط واحدة تكفي لتنسيق عدة صفحات HTML
  • تغيّر الشكل دون أن تبحث عن الأنماط بين وسوم الصفحة
  • يستطيع المتصفّح تخزين ملف .css مؤقتًا فلا يحمّله من جديد في كل صفحة
  • لا تنسَ rel="stylesheet" ومسار href الصحيح؛ فخطأ صغير في المسار يترك الصفحة بلا تنسيق دون أي رسالة خطأ

CSS الداخلي (<style> في head)

في صفحة تدريب واحدة يمكنك كتابة القواعد داخل عنصر <style> في head. استخدمنا هذا النمط في جلستَي المقدمة وSyntax ليبقى HTML وCSS في ملف واحد.

كتلة style داخلية

html
HTML Code 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How To — Internal CSS</title>
<style>
.hero {
color: #1d4ed8;
}
</style>
</head>
<body>
<h1 class="hero">Styled from a style block</h1>
</body>
</html>

متى لا بأس بالـ CSS الداخلي

الـ CSS الداخلي مناسب للعروض التجريبية والواجبات التي يجب تسليمها في ملف واحد، لكنه لا يتحمّل نموّ المشروع: فنسخ كتلة <style> نفسها إلى كل صفحة يجعل النسخ تتباعد مع الوقت، ويصبح كل تحديث متعبًا. انتقل إلى الملف الخارجي بمجرد أن يصبح لديك أكثر من صفحة، أو عندما تريد فصلًا أنظف بين الشكل والمحتوى.

CSS المضمَّن (الخاصية style)

في الطريقة المضمَّنة تكتب التصريحات مباشرةً على العنصر نفسه بالخاصية style. لا محدّد ولا ملف منفصل؛ العنصر الذي يحمل الخاصية هو وحده الذي يتأثر.

الخاصية style المضمَّنة

html
HTML Code 
<h1 style="color: #b45309; font-size: 1.75rem;">Styled inline</h1>

استخدمه باعتدال

الأنماط المضمَّنة سريعة لتجربة عابرة، لكنها تخلط الشكل بالمحتوى، ويصعب إعادة استخدامها، كما يصعب تجاوزها لاحقًا حين يدخل التتابع (cascade) والأسبقية (specificity) في الحسبان. فضّل الأصناف (classes) في ورقة أنماط. ستتعرّف على قواعد حلّ التعارض في الجلسات القادمة؛ أما الآن فاعتبر المضمَّن استثناءً لا عادة.

أيّ طريقة تختار؟

  • بناء موقع أو تنفيذ مشاريع هذه الدورة: ورقة أنماط خارجية
  • ملف عرض قصير في الصف: <style> الداخلي مقبول
  • تغيير عنصر واحد لثوانٍ أثناء تتبّع خطأ: المضمَّن يفيد، ثم انقل القاعدة إلى ورقة الأنماط
    يجوز الجمع بين الطرق. وحين تُضبط الخاصية نفسها في أكثر من موضع، يحسم المتصفّح الأمر وفق قواعد التتابع (نشرحها لاحقًا). عادة عملية جيدة: ضع الأنماط الدائمة في الملف الخارجي، ولا توزّع الخاصية نفسها على الطرق الثلاث.

جرّبها بنفسك

  1. أنشئ الملفين howto.html وstyles.css في المجلد نفسه.
  2. في howto.html أضف head يحتوي <link rel="stylesheet" href="styles.css">، وأضف في body العنوان: <h1 class="hero">How-to practice</h1>.
  3. في styles.css اكتب: .hero { color: #0f766e; } ثم افتح ملف HTML في المتصفّح.
  4. غيّر اللون إلى #1d4ed8، واحفظ ملف CSS، ثم حدّث الصفحة؛ يجب أن يتغيّر لون العنوان.
  5. أضف مؤقتًا style="color: #b45309;" إلى h1 وحدّث الصفحة، ثم احذف الخاصية ليعود التحكم إلى ورقة الأنماط.

أخطاء شائعة

  • وضع <link rel="stylesheet" …> في body بحكم العادة — مكانه head مع بقية بيانات المستند
  • خطأ مطبعي في href (مثل style.css بدل styles.css) فلا يُحمَّل الملف وتبقى الصفحة بلا تنسيق
  • نسيان rel="stylesheet" في عنصر link
  • لصق كتلة <style> كاملة في كل صفحة بدل مشاركة ملف خارجي واحد
  • الاعتماد على style المضمَّن لكل لون وخط — فيمتلئ HTML بالتفاصيل ويصعب صونه

الخلاصة

  • ثلاث طرق: ورقة أنماط خارجية، و<style> داخلي، والخاصية style المضمَّنة
  • الأصل في الصفحات الحقيقية: ملف خارجي مع <link rel="stylesheet" href="…"> في head
  • الداخلي يناسب التمرين في ملف واحد، والمضمَّن للتعديلات العابرة النادرة
  • خطأ في المسار أو غياب rel من أشهر أسباب «عدم ظهور أثر» للأنماط
  • تدرّب بربط ملف .css حقيقي، ثم غيّر قيمة وحدّث الصفحة

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓
8
الأسئلة
🎯
70%
للنجاح
♾️
∞
الوقت
🔄
∞
المحاولات

📝 التعليمات

  • اقرأ كل سؤال بعناية
  • اختر أفضل إجابة لكل سؤال
  • يمكنك إعادة الاختبار عدة مرات كما تريد
  • سيتم عرض تقدمك في الأعلى
الموضوع 1 من 1
Css درس تعليمي