العودة إلى الدورة

الدرس 4: ربط CSS: ملفات الأنماط الداخلية

إتقان CSS: من الصفر إلى الاحتراف في 100 درس

4. ربط CSS: ملفات الأنماط الداخلية

الطريقة الثانية لربط CSS هي استخدام ملف أنماط داخلي (Internal Stylesheet)، والمعروف أيضاً باسم CSS المضمن (Embedded CSS).

كيف تعمل ملفات الأنماط الداخلية

يتم تعريف الأنماط الداخلية داخل عنصر <style> الذي يوضع داخل قسم <head> في مستند HTML الخاص بك.

html

صفحتي المنسقة داخلياً

يتم تنسيق الصفحة بأكملها باستخدام القواعد المحددة أعلاه.

الإيجابيات والسلبيات

الإيجابيات:

  • سريعة وسهلة: مريحة لتنسيق صفحة HTML واحدة بسرعة.
  • طلبات HTTP أقل: لا يحتاج المتصفح إلى تنزيل ملف منفصل.

السلبيات:

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

أفضل حالة استخدام: التجارب الصغيرة المكونة من صفحة واحدة أو العروض التوضيحية حيث تكون الموارد الخارجية غير مريحة.