مقدمة إلى CSS

المعرفة الأساسية المطلوبة

قبل المتابعة، يجب أن تكون لديك فهم أساسي للمعارف التالية:

  • HTML
  • XHTML

إذا كنت ترغب في تعلم هذه المشاريع أولاً، يرجى الصفحة الرئيسية زيارة الدروس ذات الصلة.

نظرة عامة على CSS

  • CSS هو اختصار لـ Cascading Style Sheets (Cascading Style Sheets)
  • تعريف النمطكيف يتم عرض عناصر HTML
  • عادة ما يتم حفظ النماذج فيقوائم النمطفي
  • تم إضافة النمط إلى HTML 4.0 من أجلحل مشكلة الفصل بين المحتوى والتعبير
  • جدول النمط الخارجييمكن أن يزيد من كفاءة العمل بشكل كبير
  • عادة ما يتم تخزين القوائم النمطية الخارجية في ملفات CSSفي
  • تعريف عدة نماذج يمكنتداخلللـ

حللت النمط مشكلة شائعة

تم تصميم علامات HTML لتعريف محتوى الوثيقة. من خلال استخدام علامات مثل <h1>، <p>، <table>، كانت الفكرة الأساسية لـ HTML هي التعبير عن معلومات مثل “هذا هو العنوان”، “هذا هو النص”، “هذا هو الجدول”، ويمكن أن تقوم المتصفحات بتصميم التركيب دون استخدام علامات التنسيق.

بسبب إضافة المتصفحات الرئيسية الرئيسيتين (Netscape وInternet Explorer) للعناصر الجديدة وأصناف HTML (مثل علامات النصوص والألوان) إلى معيار HTML، أصبح من الصعب إنشاء مواقع تحتوي على محتوى واضح مستقل عن الطبقة التعبيرية للمحتوى

لحل هذه المشكلة، تولى اتحاد شبكة الويب العالمية (W3C)، هذا الاتحاد غير الربحي المسؤول عن معايير HTML، مهمة تحسين معايير HTML، وأصدر نمطًا جديدًا (Style) خارج HTML 4.0

جميع المتصفحات الرئيسية تدعم قوائم النمط المتداخلة

تزيد قوائم النمط من كفاءة العمل بشكل كبير

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

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

سيتم تراكب النمط المتعدد في

يسمح جدول النمط بتحديد معلومات النمط بطرق متعددة. يمكن تحديد النمط في عنصر HTML المحدد، أو في علامة الرأس لصفحة HTML، أو في ملف CSS الخارجي. حتى يمكن استخدام عدة جداول نمط خارجية داخل نفس ملف HTML.

ترتيب التسلسل

عندما يتم تعريف نفس عنصر HTML بنمطين أو أكثر، أي نمط سيتم استخدامه؟

بشكل عام، جميع النمط تتراكم في جدول نمط افتراضي جديد، حيث يمتلك الرقم 4 الأولوية الأعلى.

  1. إعدادات المتصفح الافتراضية
  2. جدول النمط الخارجي
  3. جدول النمط الداخلي (موجود داخل علامة <head>)
  4. النمط المدمج (داخل عناصر HTML)

لذلك، النمط المدمج (داخل عناصر HTML) له الأولوية الأعلى، مما يعني أنه سيتم تفضيله على النمط المحدد أدناه: النمط المحدد في علامة <head>، النمط المحدد في جدول النمط الخارجي، أو النمط المحدد في المتصفح (القيمة الافتراضية).