أوراق الأنماط

```wiki

أوراق الأنماط

أوراق الأنماط (Cascading Style Sheets أو CSS) هي لغة تستخدم لوصف مظهر مستند مكتوب بلغة ترميز، مثل HTML. لا تحدد أوراق الأنماط محتوى المستند، بل تتحكم في كيفية عرض هذا المحتوى في المتصفح. تعتبر أوراق الأنماط جزءًا أساسيًا من تصميم الويب الحديث، وتسمح بفصل تصميم الموقع عن هيكله، مما يجعل الصيانة والتحديث أسهل بكثير. في سياق MediaWiki، تلعب أوراق الأنماط دورًا حاسمًا في تخصيص مظهر الواجهة، وتعديل الأنماط الافتراضية، وإنشاء تجربة مستخدم فريدة.

لماذا نستخدم أوراق الأنماط؟

فصل المحتوى عن التصميم: تسمح أوراق الأنماط بفصل محتوى صفحة الويب (المكتوب بلغة HTML) عن طريقة عرض هذا المحتوى (الألوان، الخطوط، التنسيق). هذا يجعل من السهل تحديث تصميم الموقع دون الحاجة إلى تغيير هيكل HTML.
إعادة الاستخدام: يمكن استخدام نفس ورقة الأنماط لتنسيق صفحات ويب متعددة، مما يضمن تناسق المظهر عبر الموقع بأكمله.
سهولة الصيانة: عندما يكون التصميم منفصلاً عن المحتوى، يصبح من الأسهل إجراء تغييرات على التصميم دون التأثير على المحتوى.
زيادة سرعة التحميل: يمكن تخزين أوراق الأنماط مؤقتًا بواسطة المتصفح، مما يعني أن الصفحات اللاحقة التي تستخدم نفس ورقة الأنماط سيتم تحميلها بشكل أسرع.
التكيف مع الأجهزة المختلفة: باستخدام تصميم متجاوب (Responsive Design)، يمكن لأوراق الأنماط تكييف مظهر الموقع مع أحجام الشاشات المختلفة، مثل أجهزة الكمبيوتر المكتبية والأجهزة اللوحية والهواتف الذكية. وهذا أمر بالغ الأهمية في عصرنا الحالي حيث يتصفح المستخدمون الإنترنت من خلال مجموعة متنوعة من الأجهزة.

طرق تضمين أوراق الأنماط

هناك ثلاث طرق رئيسية لتضمين أوراق الأنماط في مستند HTML (وبالتالي في صفحات MediaWiki):

1. أوراق الأنماط المضمنة (Inline Styles): يتم تحديد الأنماط مباشرة داخل عناصر HTML باستخدام سمة `style`. هذه الطريقة أقل شيوعًا لأنها تجعل من الصعب صيانة التصميم.

  مثال:

هذا نص باللون الأزرق.

2. أوراق الأنماط الداخلية (Internal Stylesheets): يتم تحديد الأنماط داخل قسم `<style>` في رأس المستند HTML. هذه الطريقة مناسبة لتنسيق صفحة واحدة فقط.

  مثال:
  
  <head>
  <style>
  p {
  color: blue;
  font-size: 16px;
  }
  </style>
  </head>
  <body>

هذا نص باللون الأزرق.

  </body>

3. أوراق الأنماط الخارجية (External Stylesheets): يتم تعريف الأنماط في ملف منفصل بامتداد `.css`، ويتم ربطه بمستند HTML باستخدام عنصر `<link>`. هذه هي الطريقة الأكثر شيوعًا والأفضل للمشاريع الكبيرة.

  مثال:
  
  <head>
  <link rel="stylesheet" href="style.css">
  </head>
  <body>

هذا نص سيتم تنسيقه بواسطة ملف style.css.

  </body>
  
  وفي ملف `style.css`:
  
  p {
  color: blue;
  font-size: 16px;
  }

في MediaWiki، غالبًا ما يتم استخدام أوراق الأنماط الخارجية عن طريق تعديل ملفات CSS الموجودة أو إضافة ملفات CSS جديدة إلى مجلدات الموارد.

بناء جملة أوراق الأنماط

تتكون قاعدة أوراق الأنماط من جزأين رئيسيين:

المحدد (Selector): يحدد العنصر أو العناصر HTML التي سيتم تطبيق الأنماط عليها.
الإعلان (Declaration): يحدد الأنماط التي سيتم تطبيقها على العنصر المحدد. يتكون الإعلان من خاصية وقيمة.

مثال: p {

 color: blue;
 font-size: 16px;

}

في هذا المثال:

`p` هو المحدد، ويحدد جميع عناصر الفقرة (`
`).
`color: blue;` هو الإعلان الأول، ويحدد لون النص باللون الأزرق.
`font-size: 16px;` هو الإعلان الثاني، ويحدد حجم الخط بـ 16 بكسل.

أنواع المحددات

هناك عدة أنواع من المحددات في CSS:

محدد العنصر (Element Selector): يحدد جميع عناصر HTML من نوع معين. (مثل `p`, `h1`, `div`)
محدد الفئة (Class Selector): يحدد جميع العناصر التي تحتوي على فئة معينة. (يستخدم النقطة `.`) (مثل `.highlight`)
محدد المعرف (ID Selector): يحدد عنصرًا واحدًا فقط يحتوي على معرف معين. (يستخدم العلامة `#`) (مثل `#header`)
محدد السمة (Attribute Selector): يحدد العناصر بناءً على سماتها وقيمها. (مثل `[type="text"]`)
المحددات المركبة (Combinators): تسمح بتحديد العناصر بناءً على علاقاتها ببعضها البعض (مثل المساحة، `>`، `+`).

خصائص CSS الشائعة

هناك المئات من خصائص CSS المختلفة التي يمكن استخدامها لتنسيق عناصر HTML. إليك بعض الخصائص الأكثر شيوعًا:

`color`: لون النص.
`font-size`: حجم الخط.
`font-family`: نوع الخط.
`background-color`: لون الخلفية.
`width`: عرض العنصر.
`height`: ارتفاع العنصر.
`margin`: المسافة حول العنصر.
`padding`: المسافة داخل العنصر.
`border`: حدود العنصر.
`text-align`: محاذاة النص.
`display`: كيفية عرض العنصر (مثل `block`, `inline`, `none`).
`position`: موضع العنصر (مثل `static`, `relative`, `absolute`, `fixed`).

التتالي (Cascading)

يشير مصطلح "Cascading" في CSS إلى كيفية تحديد الأنماط التي سيتم تطبيقها على عنصر HTML عندما تكون هناك قواعد متعددة تطبق على هذا العنصر. تتبع CSS قواعد محددة لحل التعارضات بين الأنماط:

1. الأهمية (Importance): الأنماط المحددة باستخدام `!important` لها الأولوية على الأنماط الأخرى. (يجب استخدامها بحذر). 2. التحديد (Specificity): تعتبر المحددات الأكثر تحديدًا (مثل المحددات التي تستخدم المعرفات) أكثر أهمية من المحددات الأقل تحديدًا (مثل المحددات التي تستخدم عناصر HTML). 3. ترتيب المصدر (Source Order): إذا كانت الأنماط لها نفس الأهمية والتحديد، فسيتم تطبيق النمط الأخير الذي تم تعريفه في المصدر.