مدخل إلى أوراق الأنماط المتتالية (CSS)

أوراق الأنماط المتتالية (Cascading Style Sheets أو CSS اختصارًا) هي لغة تُستخدم لوصف كيفيّة عرض المستندات للمستخدمين. تُكتب هذه المستندات في لغة رُماز مثل HTML.

css-intro (1).png

المستند هو مجموعة من المعلومات التي تهيكل باستخدام لغة رُماز (markup language).

يُقصّد بعرض المستند للمستخدم تحويله إلى صيغة مُفيدة للجمهور، فالمتصفحات مثل Firefox وChrome وInternet Explorer مًصمّمة بحيث تعرض المستندات للمستخدمين مرئيًّا، مثلًا: على شاشة حاسوب أو جهاز إسقاط (projector) أو طابعة.

سنتعرض خلال هذه السلسلة إلى المواضيع التالية:

مدخل إلى أوراق الأنماط المتتالية (CSS) (هذا الدرس).
آلية عمل تعليمات CSS داخل المتصفحات.
المحددات (Selectors) في CSS.
كيفية كتابة تعليمات CSS يسهل قراءتها.
تنسيق نصوص صفحات الويب باستخدام CSS.
التعامل مع الألوان في CSS.
إضافة محتوى إلى صفحة ويب باستخدام CSS.
تنسيق القوائم (Lists) في CSS.
تعرف على الصناديق (Boxes) في CSS.
رصف العناصر (Layout) في CSS.
الجداول (Tables) في CSS.
التعامل مع أجهزة العرض المختلفة والمطبوعات في CSS.

أمثلة

صفحة الويب هذه الّتي تقرأها هي مُستند. تُهيكل المعلومات التي تشاهدها في صفحة ويب باستخدام لغة HTML (اختصارًا لـHyperText Markup Language).
مرُبعات الحوار في التطبيقات هي أيضًا مُستندات، وقد تكون مُهيكلة باستخدام لغة رماز مثل XUL (اختصارًا لـXML User Interface Language)، والتي قد تجدها في بعض برامج Mozilla.

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

تفاصيل أكثر

كلمة المستند لا تعني ما تعنيه كلمة "ملفّ"، إلّا أنّه يمكن حفظ المستندات ضمن ملفّات.

المستند الذي تقرأه الآن لم يُحفَظ في ملفّ، بل يُجلب من قاعدة بيانات على الخادم والذي بدوره يولّد المستند بجمع أجزائه من عدّة ملفّات. مهما يكن الأمر، فإنّك في هذه السّلسلة ستتعامل مع مستندات محفوظة في ملفّات.

بإمكانك إيجاد معلومات أكثر عن المستندات ولغات الرُماز في مواقع أخرى من شبكة مطوّري Mozilla:

اللغة	الوظيفة
HTML	لصفحات الويب
XML	للصفحات المُهيكلة بشكل عامّ
SVG	للرسوم
XUL	لواجهات برامج Mozilla

سنطّلع على أمثلة من هذه اللغات في الجزء الثّاني من السلسلة.

تفاصيل أكثر

يُدعى البرنامج الذي يعرض المستندات على المستخدم في المصطلحات الرسميّة لـCSS بوكيل المستخدم (user agent أو UA). المتصفّح ليس إلّا واحدًا من وكلاء المستخدم، فلا تقتصر CSS على المتصفّحات أو العرض المرئيّ، ولكنّنا في الجزء الأوّل من السّلسلة لن نتعامل إلّا مع CSS في المتصفّح.

للاطّلاع على التعاريف الرسمية للمصطلحات في CSS، انظر Definitions في وصف CSS من قبل جمعيّة W3C المسؤولة عن تعيين المعايير القياسيّة للويب.

لنبدأ العمل: إنشاء مستند

أنشئ مجلّدًا جديدًا في جهازك لحفظ وتنظيم تمارين هذه السّلسلة.
افتح محرّر النصوص وأنشئ ملفًّا نصيًّا جديدًا، سنقوم بكتابة المستند في هذا الملف خلال التمارين القليلة التالية.
انسخ والصق HTML أدناه. احفظ الملف باسم doc1.html.

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>Sample document</title>
 </head>

 <body>
   <p>
     <strong>C</strong>ascading
     <strong>S</strong>tyle
     <strong>S</strong>heets
   </p>
 </body>
</html>

افتح علامة تبويب أو نافذة جديدة في متصفّحك، ثم افتح الملف الذي أنشأته. من المُفترض أن ترى النّص وحروفه الأولى بخطّ عريض، كهذه الصّورة:

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

المستند الآن لا يستخدم CSS، وهذا ما سنفعله في الخطوة التالية.

لماذا نستخدم CSS؟

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

لللأسلوب الأخير عدّة محاسن، ففصل التنسيقات عن الرُماز:

يقلّل من التكرار
يُسهل الصّيانة
يسمح بإجراء تغيير على نطاق الموقع كاملًا من مكان واحد

مثال

يمكنك مثلًا حفظ معلومات التنسيقات في ملفات مشتركة بين كلّ الصّفحات، فعندما يُربَط مستند بورقة أنماط تُحدّد لون العناوين الثانويّة (h2)، بإمكانك استخدام هذا التنسيق في كل صفحات الموقع بالإشارة إلى هذه الورقة.

عندما يعرض مستخدم صفحة ويب، يقوم المتصفح بجلب معلومات التنسيق في الوقت نفسه.

عندما يطبع مستخدم صفحة ويب، بإمكانك توفير معلومات تنسيق مختلفة تُسهّل من قراءة الصّفحة المطبوعة.

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

تفاصيل أكثر

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

لنعمل: إنشاء ورقة أنماط

أنشئ ملفًّا نصيًّا آخر بجوار الملف السابق doc1.html.
احفظ الملف باسم style1.css. سيحوي هذا الملف وصف التنسيقات.
في ملفّ CSS، انسخ والصق السّطر التالي ثمّ احفظ الملف:
```
strong {color: red;}
```

ربط المستند بورقة الأنماط

لربط المستند بورقة الأنماط، عدّل ملفّ HTML، أضف السّطر التالي في موقعه:

<link rel="stylesheet" href="style1.css">

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>Sample document</title>
 <link rel="stylesheet" href="style1.css">
 </head>
 <body>
   <p>
     <strong>C</strong>ascading
     <strong>S</strong>tyle
     <strong>S</strong>heets
   </p>
 </body>
</html>