الأساسيات

ما هي CSS؟ : تُعد "أوراق الأنماط المتتالية" (CSS) لغةً لتنسيق الصفحات تُستخدم لتطبيق الأنماط (styles) على عناصر HTML. وتُستخدم CSS لتحديد الألوان، وصور الخلفية، وتخطيطات الصفحة (layouts)، وغيرها.

البنية الأساسية لقاعدة سي.اس.اس Basic Anatomy of a CSS Rule : تتكون قاعدة CSS من جزأين رئيسيين: المُحدِّد (Selector) وكتلة الإعلان (Declaration block). المُحدِّد هو نمط يُستخدم في CSS لتحديد عناصر HTML معينة واستهدافها بغرض تطبيق التنسيق عليها، بينما تقوم كتلة الإعلان بتطبيق مجموعة من التنسيقات على المُحدِّد (أو المُحدِّدات) المعني.

إليك الصيغة العامة لقاعدة CSS:

selector  {
property: value;
}
                    

عنصر meta name="viewport" : يزوّد هذا العنصر meta المتصفح بتعليمات حول كيفية التحكم في أبعاد الصفحة (page's dimensions) ومقياس عرضها عبر الأجهزة المختلفة، ولا سيما الهواتف المحمولة والأجهزة اللوحية.

أنماط المتصفح الافتراضية Default Browser Styles : تُطبَّق أنماط المتصفح الافتراضية على كل عنصر من عناصر HTML؛ وعادةً ما تشمل هذه الأنماط خصائص مثل الهوامش (margins) والهوامش الداخلية (paddings) الافتراضية.

سي.اس.اس المضمّن Inline CSS : تُكتب هذه الأنماط مباشرةً داخل عنصر HTML باستخدام السمة style. وفي معظم الحالات، لن تستخدم هذا النوع من CSS نظراً لمبدأ فصل المهام (separation of concerns).

إليك مثال على سي.اس.اس المضمن (Inline CSS) :

<p style="color: red;">هذه فقرة حمراء.</p>
                    

معاينة:

سي.اس.اس الداخلية Internal CSS : تُكتب هذه الأنماط داخل وسوم <style> الموجودة في قسم الرأس head من مستند HTML. قد يكون هذا الأسلوب مفيداً عند إنشاء أمثلة برمجية قصيرة، ولكنك عادةً لن تحتاج إلى استخدام CSS الداخلي.

سي.اس.اس الخرجي External CSS : تُكتب أنماط التنسيق (styles) هذه في ملف CSS منفصل وتُربط بمستند HTML باستخدام عنصر link الموجود في قسم الرأس head. وفي معظم المشاريع، ستعتمد على ملف CSS خارجي بدلاً من استخدام CSS الداخلي أو المضمّن (inline).

خاصية width : تحدد هذه الخاصية عرض العنصر. وفي حال عدم تحديد العرض، تُضبط القيمة الافتراضية على auto؛ مما يتيح للمتصفح تحديد عرض العنصر بناءً على محتواه (its content)، وعنصره الأب (its parent)، ونوع العرض (display type).

خاصية min-width : تحدد هذه الخاصية الحد الأدنى لعرض العنصر.

خاصية max-width : تحدد هذه الخاصية الحد الأقصى لعرض العنصر.

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

خاصية min-height : تحدد هذه الخاصية الحد الأدنى لارتفاع العنصر.

خاصية max-height : تحدد هذه الخاصية الحد الأقصى لارتفاع العنصر.

مُركِّب العناصر التابعة Descendant Combinator : يُستخدم هذا المُركِّب لاستهداف العناصر التي تُعد تابعةً لعنصر أبٍ مُحدَّد (specified parent element). يستهدف المثال التالي جميع عناصر القائمة li الموجودة داخل عناصر القائمة غير المرتبة ul.

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

<ul>
 <li>مثال رقم 1</li>
 <li>مثال رقم 2</li>
 <li>مثال رقم 3</li>
</ul>
                        

ul li  {
  background-color: yellow;
}
                        

معاينة:

مُركِّب الابن Child Combinator (>) : يُستخدم هذا المُركِّب لاختيار العناصر التي تُعد أبناءً مباشرةً (direct children) لعنصر أبٍ مُحدَّد (specified parent element). يستهدف المثال التالي جميع عناصر p التي تُمثّل أبناءً مباشرةً للعنصر الذي يحمل الفئة (class) المسماة container.

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

<div class="container">
 <p>سيتم تنسيق هذا.</p>

 <div>
  <p>لن يتم تطبيق تنسيق على هذا.</p>
 </div>
</div>
                        

.container > p  {
  background-color: black;
  color: white;
}
                        

معاينة:

مُركِّب الأخ التالي Next-sibling Combinator (+) : يختار هذا المُركِّب العنصر الذي يلي مباشرةً عنصراً شقيقاً محدداً. سيقوم المثال التالي باختيار عنصر الفقرة p الذي يلي مباشرةً عنصر العنوان h2.

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

<h2>أنا عنوان فرعي</h2>

<p>سيحصل عنصر الفقرة هذا على خلفية حمراء.</p>
                        

h2 + p  {
  background-color: red;
}
                        

معاينة:

مُجمِّع الأشقاء اللاحقين Subsequent-sibling Combinator (~) : يختار هذا المُركِّب جميع الأشقاء (العناصر التي تشترك في نفس العنصر الأب) لعنصرٍ مُحدَّدٍ والذين يقعون بعده. سيُطبِّق المثال التالي التنسيق على عنصر الفقرة الثاني فقط؛ لأنه العنصر الوحيد الذي يُعد شقيقاً لعنصر القائمة غير المرتبة ul ويشترك معه في نفس العنصر الأب.

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

<div class="container">
 <p>لن يتم تطبيق تنسيق على هذا.</p>
 <ul>
  <li>مثال رقم 1</li>
  <li>مثال رقم 2</li>
  <li>مثال رقم 3</li>
 </ul>
 <p>سيتم تنسيق هذا.</p>
</div>
<p>لن يتم تطبيق تنسيق على هذا.</p>
                        

ul ~ p  {
  background-color: green;
}
                        

معاينة:

خاصية margin : تُستخدم هذه الخاصية لإضافة مسافة (space) خارج العنصر، وتحديداً بين حدود العنصر والعناصر المحيطة به.

خاصية padding : تُستخدم هذه الخاصية لإضافة مساحة (space) داخل العنصر، بين المحتوى والحدود الخاصة به.

إختصار الهامش (margin Shorthand) : يمكنك تحديد قيمة واحدة إلى أربع قيم لضبط جوانب الهامش (margin sides). تُطبَّق قيمة واحدة (One value) على الجوانب الأربعة؛ وتُحدِّد قيمتان (two values) الهامش العلوي top والسفلي bottom، ثم الأيمن right والأيسر left ؛ وتُحدِّد ثلاث قيم (three values) الهامش العلوي top، والأفقي (الأيمن والأيسر) (right and left )، ثم السفلي bottom؛ بينما تُحدِّد أربع قيم (four values) الهوامش العلوية top، واليمنى right، والسفلية bottom، واليسرى left على التوالي.

إختصار الهوامش الداخلية (padding Shorthand) : يمكنك تحديد قيمة واحدة إلى أربع قيم لضبط هوامش الداخلية (padding) للجهات المختلفة. تُطبَّق قيمة واحدة (One value) على الجهات الأربع؛ وتُحدِّد قيمتان (two values) الجهتين العلوية والسفلية (top and bottom)، ثم اليمنى واليسرى (right and left)؛ وتُحدِّد ثلاث قيم (three values) الجهة العلوية top، والجهة الأفقية (اليمنى واليسرى) (right and left)، ثم الجهة السفلية bottom؛ بينما تُحدِّد أربع قيم (four values) الجهات: العلوية top، واليمنى right، والسفلية bottom، واليسرى left بالترتيب.

خصوصية سي.اس.اس المضمنة Inline CSS Specificity : تتمتع CSS المضمنة بأعلى درجات الخصوصية؛ لأنها تُطبَّق مباشرةً على العنصر، وتتفوق بذلك على أي تنسيقات CSS داخلية أو خارجية. وتبلغ قيمة الخصوصية لأنماط CSS المضمنة (1, 0, 0, 0).

خصوصية سي.اس.اس الداخلية Internal CSS Specificity : تُعرَّف CSS الداخلية داخل عنصر style في قسم head من مستند HTML، وتكون درجة خصوصيتها أقل من تلك الخاصة بأنماط CSS المضمنة (Inline styles). وتشترك كل من CSS الداخلية والخارجية في مستوى الخصوصية نفسه، حيث يتحدد هذا المستوى بناءً على المُحدِّدات (selectors) المستخدمة، وليس بناءً على موقع الكود.

خصوصية سي.اس.اس الخارجية External CSS Specificity : يتم ربط ملفات CSS الخارجية عبر عنصر link في قسم الرأس head، وتُكتب في ملفات منفصلة بامتداد .css. ومثل CSS الداخلية، تتحدد درجة الخصوصية بناءً على المُحدِّدات (selectors) المستخدمة. وعندما تتساوى قاعدتان في درجة الخصوصية، فإن ترتيب ورود الكود هو الذي يحسم الأمر؛ حيث تكون الأولوية للقاعدة التي تظهر لاحقاً في المستند. وتوفر ملفات CSS الخارجية أفضل مستوى من سهولة الصيانة للمشاريع الكبيرة.

المحدد الشامل Universal Selector (*) : هو نوع خاص من مُحدِّدات CSS يطابق أي عنصر في المستند. وغالباً ما يُستخدم لتطبيق نمط (style) على جميع العناصر الموجودة في الصفحة، مما قد يكون مفيداً لإعادة ضبط الأنماط أو توحيدها عبر المتصفحات المختلفة. يتميز هذا المُحدِّد بأدنى قيمة "تخصيص" (specificity) مقارنةً بغيره من المُحدِّدات؛ إذ يساهم بالقيمة 0 في جميع أجزاء قيمة التخصيص (0, 0, 0, 0).

مُحدِّدات النوع Type Selectors : تستهدف هذه المُحدِّدات العناصر بناءً على اسم الوسم (tag name) الخاص بها. وتتميز مُحدِّدات النوع بدرجة تخصيص (specificity) منخفضة نسبياً مقارنةً بالمُحدِّدات الأخرى؛ إذ تبلغ قيمة التخصيص لمُحدِّد النوع (0, 0, 0, 1).

مُحدِّدات الفئة Class Selectors : تُعرَّف هذه المُحدِّدات باستخدام نقطة (.) تليها تسمية الفئة. وتبلغ قيمة التحديد (specificity) لمُحدِّد الفئة (0, 0, 1, 0)؛ وهذا يعني أن مُحدِّدات الفئة يمكنها تجاوز مُحدِّدات النوع (type selectors)، ولكن يمكن تجاوزها هي نفسها بواسطة مُحدِّدات المُعرِّف (ID selectors) والأنماط المضمنة (inline styles).

مُحدِّدات المعرّف ID Selectors : تُعرَّف مُحدِّدات المعرّف برمز التجزئة (#) متبوعًا باسم المعرّف. تتميز مُحدِّدات المعرّف بدرجة عالية من التحديد، أعلى من مُحدِّدات النوع ومُحدِّدات الفئة، ولكنها أقل من الأنماط المضمنة. قيمة التحديد لمُحدِّد المعرّف هي (0, 1, 0, 0).

الكلمة المفتاحية (!important keyword) : تُستخدم لمنح قاعدة تنسيقٍ ما أعلى درجات الأولوية، مما يتيح لها تجاوز أي إعلانات أخرى لنفس الخاصية. فعند استخدامها، يُجبر المتصفح على تطبيق التنسيق المحدد بغض النظر عن مستوى التخصيص (specificity) الخاص بالمحددات الأخرى. ينبغي توخي الحذر عند استخدام !important؛ لأنها قد تجعل صيانة كود CSS وتصحيح الأخطاء فيه أكثر صعوبة.

خوارزمية التتابع Cascade Algorithm : خوارزمية تُستخدم لتحديد قواعد CSS التي سيتم تطبيقها عند وجود أنماط متعددة تستهدف العنصر نفسه؛ وهي تضمن استخدام الأنماط الأنسب بناءً على مجموعة من القواعد المحددة بوضوح.

الوراثة في سي.اس.اس CSS Inheritance : هي العملية التي تنتقل من خلالها الأنماط من العناصر الأب (parent elements) إلى العناصر الابن (child elements). تتيح لك الوراثة (Inheritance) تحديد الأنماط على مستوى أعلى في شجرة المستند (document tree) وتطبيقها على عناصر متعددة دون الحاجة إلى تحديدها بشكل صريح لكل عنصر على حدة.