CSS

لغة CSS أو صفحات الأنماط (الانسيابية أو المتعاقبة أو المتسلسلة) بالانجليزية: Cascading Style Sheets هي لغة تنسيقية تُستخدَم لوصف التمثيل البصري لمستند ما مكتوب بلغة هيكلية، مثل صفحات HTML أو مستندات XML بما في ذلك ملفات SVG. تُستعمَل عادةً مع لغتَي HTML و JavaScript لإنشاء صفحات وتطبيقات ويب ذات تنسيق جذّاب وواجهات سهلة الاستخدام.

دورة تطوير واجهات المستخدم

• 72 ساعة فيديو تدريبية
• من الصفر دون الحاجة لخبرة مسبقة
• شهادة معتمدة من أكاديمية حسوب
• متابعة أثناء الدورة من فريق مختص

اشترك الآن

ما هي لغة CSS؟

لغة CSS هي لغة تنسيقية كما أشرنا تُستخدم في تنسيق مستندات وملفات مكتوبة بصيغة معينة أو هيكلية، والغرض الرئيسي من لغة CSS هو تمكين الفصل بين شيفرة المحتوى وشيفرة العرض، بما في ذلك التخطيط والألوان والخطوط؛ وهذا الفصل يمكن أنَّ يساعم في تحسين قابلية الوصول ويوفِّر مرونةً في التحكم بخصائص العرض وطريقة تنسيقها اعتمادًا على الجهاز المستخدم.

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

استخدام لغة CSS

تتألف شيفرة CSS من مجموعة من القواعد (rules)، والتي تتألف بدورها من مُحدِّد (selector) ثم قائمة بالخاصيات والقيم المُسنَدة إليها. فمثلًا لو أردنا تحديد جميع الفقرات (العنصر <p>) في مستند HTML وتحويل لونها إلى الأحمر (عبر الخاصية color) فسنكتب الشيفرة الآتية:

p {
  color: red;
}

لاحظ أنَّه يجب «تطبيق» شيفرة لغة CSS على مستند HTML كي تأخذ تأثيرها، ويمكن فعل ذلك بطريقتين:

• ضع شيفرة لغة CSS ضمن العنصر <style> في مستند HTML.

<style type="text/css">
p {
  color: red;
}
</style>

• ضع شيفرة CSS ضمن ملف، ثم حاول تضمينه عبر العنصر <link>.

<link href="style.css" rel="stylesheet" type="text/css">

نُظِّم هذا الدليل بتخصيص صفحة لكل خاصية من خاصيات لغة CSS، أي يمكن زيارة الصفحة CSS/property للحصول على معلومات حول الخاصية property. فللحصول على معلومات عن الخاصية background نزور الصفحة CSS/background، ولمعرفة تفاصيل الخاصية border-top-right-radius نزور الصفحة CSS/border-top-right-radius. أما الأصناف الزائفة مثل ‎:visited فتكون على الشكل CSS/:visited.

يحتوي هذا القسم على قائمة بخاصيات لغة CSS ودوالها، منظمةً حسب وظيفتها ليسهل عليك الوصول إلى مبتغاك.

الألوان

الخاصية	الوصف
color	تضبط القيمة اللونية للأمامية (foreground) للمحتوى النصي للعنصر وللزخرفة النصية (text decorations)، وستضبط أيضًا قيمة الكلمة المحجوزة currentColor، والتي يمكن أن تستخدم كقيمة غير مباشرة في الخاصيات الأخرى التي لا تأخذ لونها من الخاصية color مباشرةً (مثل الخاصيةborder-color).
opacity	تحديد درجة شفافية أحد العناصر، أي مدى ظهور المحتوى الذي يقع وراءه.

الخلفيات

الخاصية	الوصف
background	الخاصية background المختصرة في لغة CSS تسمح لنا بتعديل خيارات تنسيق الخلفية كلها دفعةً واحدةً، بما في ذلك اللون أو الصورة، والمبدأ والحجم، وطريقة التكرار، وغير ذلك من الميزات. يمكن استخدام الخاصية background لضبط قيم خاصية أو أكثر من الخاصيات الآتية: background-clip، و background-color، و background-image، و background-origin، وbackground-position، و background-repeat، و background-size، و background-attachment.
background-attachment	تُحدِّد إذا كان موضع الصورة (المُحدَّدة عبر الخاصية background-image) ثابتًا (fixed) ضمن إطار العرض (viewport) أو كان سيُمرَّر عند التمرير في العنصر (أو الصفحة) الحاوي له.
background-blend-mode	تصف كيف يجب أن تمتزج صور الخلفية مع بعضها بعضًا ومع لون الخلفية المُحدَّد للعنصر.
background-clip	تُحدِّد كيف أين ستتوقف خلفية العنصر على حدود العنصر، سواءً كانت الخلفية لونًا <color> أو صورةً <image>.
background-color	تضبط لون الخلفية لأحد العناصر، ويكون لون الخلفية قيمةً لونيةً <color>.
background-image	تضبط صورةً أو أكثر على أنها خلفية للعنصر.
background-origin	تُحدِّد مبدأ صورة الخلفية المُحدَّدة عبر الخاصية background-image.
background-position	تضبط الموضع المبدئي لكل صورة خلفية، وذلك نسبةً إلى المبدأ المُعرَّف في الخاصية background-origin.
background-repeat	تُعرِّف كيف ستتكرر صورة الخلفية؛ إذ يمكن أن تتكرر صورة الخلفية على المحور الأفقي، أو على المحور الرأسي، أو على كلا المحوري، ويمكن ألّا تتكرر أبدًا.
background-size	تُحدِّد أبعاد صورة الخلفية للعنصر؛ ويمكن أن تُترَك الأبعاد الابتدائية للصورة، أو تُغيّر إلى أبعاد جديدة، أو يمكن ملء المساحة المتوافرة بها مع الحفاظ على نسبة الأبعاد.
box-shadow	تصف تأثير الظلال على العنصر، ويمكن إضافة ظل أو أكثر باستخدام هذه الخاصية.

الإطارات

شكل الإطار

الخاصية	الوصف
border	الخاصية border في لغة CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات التي تتحكم بإطار العنصر في آنٍ واحد، وهي: border-color و border-style و border-width، وكما في جميع الخاصيات المختصرة، أيّ قيمة غير مُحدِّدة سيُعاد ضبطها إلى قيمتها الابتدائية، أضف إلى ذلك أنَّ الخاصية border لا يمكن أن تُستخدَم لتحديد قيمة للخاصية border-image وإنما ستضبِط قيمتها إلى القيمة الابتدائية none.
border-bottom	الخاصية border-bottom في لغة CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات border-bottom-color و border-bottom-style و border-bottom-width، هذه الخاصيات تصف كيفية عرض الإطار border السفلي للعنصر.
border-bottom-color	تُحدِّد لون الإطار السفلي الخاص بالعنصر. لاحظ أنَّه في أغلبية الحالات يُفضَّل استخدام خاصيات لغة CSS المختصرة مثل border-color أو border-bottom.
border-bottom-style	تُحدِّد شكل خط الإطار السفلي الخاص بالعنصر.
border-bottom-width	تضبط عرض الإطار السفلي للعنصر.
border-color	تُحدِّد لون إطار العنصر على جميع وجوهه: العلوي (border-top-color) والأيمن (border-right-color) والسفلي (border-bottom-color) والأيسر (border-left-color).
border-image	تسمح برسم صورة على إطار العنصر، وهذا يجعل إنشاء عناصر لها مظهر مخصص أمرًا سهلًا. ستُستخدَم الخاصية border-image بدلًا من أشكال الإطارات التي يمكن تعريفها عبر الخاصية border-style.
border-image-outset	تُحدِّد كم ستمتد صورة الإطار بعد الحافة الخارجية للإطار.
border-image-repeat	تُعرِّف كيفية عرض الجزء الأوسط من صورة الإطار لكي تُطابِق أبعاد الإطار. ويمكن استخدام قيمة واحدة لهذه الخاصية لضبط سلوك جميع الحواف، أو يمكن تحديد قيمتين لضبط سلوك الحواف الأفقية والرأسية كلًا على حدة.
border-image-slice	تُقسِّم الصورة المُحدَّدة عبر الخاصية border-image-source إلى تسع مناطق: الأركان الأربعة، والحواف الأربع، والوسط.
border-image-source	تُعرِّف صورةً <image> لتُستخدَم بدلًا من الإطار، وإذا ضُبِطَت هذه الخاصية إلى none، فسيُستخدَم الشكل المُعرَّف في الخاصية border-style.
border-image-width	تُعرِّف عرض صورة الإطار بتحديد بعدها عن حافة الإطار الخارجية، وإذا كانت قيمة الخاصية border-image-width أكبر من قيمة الخاصية border-width، فستمتد صورة الإطار إلى ما بعد حافة الحاشية (padding) أو حافة المحتوى (content).
border-left	الخاصية border-left في لغة CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات border-left-color و border-left-style و border-left-width، هذه الخاصيات تصف كيفية عرض الإطارborder الأيسر للعنصر.
border-left-color	تُحدِّد لون الإطار الأيسر الخاص بالعنصر. لاحظ أنَّه في أغلبية الحالات يُفضَّل استخدام خاصيات لغة CSS المختصرة مثل border-color أو border-left.
border-left-style	تُحدِّد شكل خط الإطار الأيسر الخاص بالعنصر.
border-left-width	تضبط عرض الإطار الأيسر للعنصر.
border-right	الخاصية border-right في لغة CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات border-right-color و border-right-style و border-right-width، هذه الخاصيات تصف كيفية عرض الإطار border الأيمن للعنصر.
border-right-color	تُحدِّد لون الإطار الأيمن الخاص بالعنصر. لاحظ أنَّه في أغلبية الحالات يُفضَّل استخدام خاصيات لغة CSS المختصرة مثل border-color أو border-right.
border-right-style	تُحدِّد شكل خط الإطار الأيمن الخاص بالعنصر.
border-right-width	تضبط عرض الإطار الأيمن للعنصر.
border-style	تُحدِّد شكل خط الإطار الخاص بالعنصر لجميع وجوهه (الأيمن والأيسر والعلوي والسفلي).
border-top	الخاصية border-top في لغة CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات border-top-color و border-top-style و border-top-width، هذه الخاصيات تصف كيفية عرض الإطارborder العلوي للعنصر.
border-top-color	تُحدِّد لون الإطار العلوي الخاص بالعنصر. لاحظ أنَّه في أغلبية الحالات يُفضَّل استخدام خاصيات لغة CSS المختصرة مثل border-color أو border-top.
border-top-style	تُحدِّد شكل خط الإطار العلوي الخاص بالعنصر.
border-top-width	تضبط عرض الإطار العلوي للعنصر.
border-width	الخاصية border-width المختصرة في CSS تضبط عرض إطار العنصر على جميع وجوهه: العلوي (border-top-width) والأيمن (border-right-width) والسفلي (border-bottom-width) والأيسر (border-left-width).

الأركان المدورة

الخاصية	الوصف
border-bottom-left-radius	تضبط تدوير الركن السفلي الأيسر من العنصر.
border-bottom-right-radius	تضبط تدوير الركن السفلي الأيمن من العنصر.
border-radius	تسمح لمطوري الويب بتعريف طريقة تدوير أركان الإطار، ويمكن تحديد قيمة واحدة لجعل الأركان دائريةً، أو قيمتين لجعلها على شكل قطع ناقص.
border-top-left-radius	تضبط تدوير الركن العلوي الأيسر من العنصر.
border-top-right-radius	تضبط تدوير الركن العلوي الأيمن من العنصر.

موضع العناصر

الخاصية	الوصف
bottom	الخاصية bottom في لغة CSS تساهم في تحديد الموضع الرأسي لأحد العناصر التي يمكن أن يتغير مكانها (positioned elements)، وليس لهذه الخاصية تأثير في العناصر التي لا يمكن أن يتغير مكانها (non-positioned elements).
clear	تُحدِّد إذا كان العنصر يمكن أن يكون بجوار العناصر العائمة (floating elements) المجاورة له أو يجب أن يُحرَّك إلى الأسفل (يسمى هذا الفعل بالمصطلح clear)؛ يمكن تطبيق هذه الخاصية على العناصر العائمة وغير العائمة على حدٍ سواء.
display	تُحدِّد ما هو نوع صندوق العرض الذي سيستخدم مع العنصر. تؤخذ قيمة الخاصية display في HTML من مواصفة HTML أو من صفحة الأنماط الافتراضية في المتصفح أو التابعة للمستخدم، أما القيمة الافتراضية لها في XML هي inline.
float	تُحدِّد أنَّ العنصر يجب أن يوضع على يسار أو يمين الحاوية التي ينتمي إليها، مما يسمح للنص والعناصر السطرية بالالتفاف حول العنصر، وسيُزال هذا العنصر من الهيكل التنظيمي (flow) العادي للصفحة، لكنه سوف يبقى جزءًا منه (على عكس العناصر ذات الموضع المطلق [absolute]).
left	الخاصية left في لغة CSS تساهم في تحديد الموضع الأفقي لأحد العناصر التي يمكن أن يتغير مكانها (positioned elements)، وليس لهذه الخاصية تأثير في العناصر التي لا يمكن أن يتغير مكانها (non-positioned elements).
position	تصف كيف يجب أن يتموضع العنصر في المستند، والخاصيات top و right و bottom و left تُحدِّد المكان النهائي لتلك العناصر.
right	الخاصية right في لغة CSS تساهم في تحديد الموضع الأفقي لأحد العناصر التي يمكن أن يتغير مكانها (positioned elements)، وليس لهذه الخاصية تأثير في العناصر التي لا يمكن أن يتغير مكانها (non-positioned elements).
top	الخاصية top في لغة CSS تساهم في تحديد الموضع الرأسي لأحد العناصر التي يمكن أن يتغير مكانها (positioned elements)، وليس لهذه الخاصية تأثير في العناصر التي لا يمكن أن يتغير مكانها (non-positioned elements).
z-index	تُحدِّد ترتيب العناصر التي يمكن أن يتغير مكانها (positioned elements) على المحور Z، فعندما تتداخل العناصر فستُحدِّد قيمة هذه الخاصية ما هو العنصر الذي سيظهر أعلى بقية العناصر، والعنصر الذي له قيمة z-index أكبر ما يمكن سيظهر في الأعلى.

النموذج الصندوقي Box model

خصائص الصندوق

الخاصية	الوصف
box-sizing	تُستخدم لتعديل النموذج الصندوقي الافتراضي في لغة CSS (أي CSS box model) المستخدم لحساب عرض وارتفاع العناصر.
height	تُحدِّد ارتفاع أحد العناصر، وتستخدم هذه الخاصية افتراضيًا لتحديد ارتفاع منطقة المحتوى، لكن إن كانت الخاصية box-sizing مضبوطة إلى border-box فستُحدِّد ارتفاع العنصر بدءًا من الحافة الخارجية للإطار.
max-height	تضبط الارتفاع الأقصى للعنصر، وهي تمنع القيمة المستخدمة (used value) للخاصية height من أن تتجاوز القيمة المُحدَّدة في الخاصية max-height.
max-width	تضبط العرض الأقصى للعنصر، وهي تمنع القيمة المستخدمة (used value) للخاصية width من أن تتجاوز القيمة المُحدَّدة في الخاصية max-width.
min-height	تضبط الارتفاع الأدنى للعنصر، وهي تمنع القيمة المستخدمة (used value) للخاصية height من أن تقل عن القيمة المُحدَّدة في الخاصية min-height.
min-width	تضبط العرض الأدنى للعنصر، وهي تمنع القيمة المستخدمة (used value) للخاصية width من أن تقل عن القيمة المُحدَّدة في الخاصية min-width.
visibility	تسمح بإظهار أو إخفاء عنصر دون التأثير بتخطيط المستند، أي أنَّ المساحة ستُحجَز للعناصر سواءً كانت مرئيةً أو لا، ويمكن استخدام هذه الخاصية أيضًا لإخفاء أو إظهار الأعمدة في جدول <table>.
width	تُحدِّد عرض أحد العناصر، وتستخدم هذه الخاصية افتراضيًا لتحديد عرض منطقة المحتوى (content area)، لكن إن كانت الخاصية box-sizing مضبوطة إلى border-boxفستُحدِّد عرض العنصر بدءًا من الحافة الخارجية للإطار.

الهوامش

الخاصية	الوصف
margin	الخاصية margin المختصرة في لغة CSS تضبط الهوامش في الأطراف الأربعة للعنصر، ويمكن استخدام هذه الخاصية بدلًا من ضبط الهوامش فرادى باستخدام margin-top و margin-right وmargin-bottom و margin-left.
margin-bottom	تضبط الهامش في الطرف السفلي من العنصر، والقيم الموجبة ستؤدي إلى إبعاد العنصر عمّا جاوره، والقيم السالبة ستقربه منها.
margin-left	تضبط الهامش في الطرف الأيسر من العنصر، والقيم الموجبة ستؤدي إلى إبعاد العنصر عمّا جاوره، والقيم السالبة ستقربه منها.
margin-right	تضبط الهامش في الطرف الأيمن من العنصر، والقيم الموجبة ستؤدي إلى إبعاد العنصر عمّا جاوره، والقيم السالبة ستقربه منها.
margin-top	تضبط الهامش في الطرف العلوي من العنصر، والقيم الموجبة ستؤدي إلى إبعاد العنصر عمّا جاوره، والقيم السالبة ستقربه منها.

الحواشي

الخاصية	الوصف
padding	الخاصية padding المختصرة في لغة CSS تضبط الحاشية (padding) في الأطراف الأربعة للعنصر، ويمكن استخدام هذه الخاصية بدلًا من ضبط الحواشي فرادى باستخدام padding-top وpadding-right و padding-bottom و padding-left.
padding-bottom	تضبط الحاشية (padding) في الطرف السفلي للعنصر؛ وعلى نقيض الهوامش margin، لا يجوز استخدام القيم السالبة للحواشي. ويمكن استخدام الخاصية المختصرة padding لضبط جميع الحواشي على الأطراف الأربعة لأحد العناصر في قاعدة واحدة.
padding-left	تضبط الحاشية (padding) في الطرف الأيسر للعنصر؛ وعلى نقيض الهوامش margin، لا يجوز استخدام استخدام القيم السالبة للحواشي. ويمكن استخدام الخاصية المختصرة padding لضبط جميع الحواشي على الأطراف الأربعة لأحد العناصر في قاعدة واحدة.
padding-right	تضبط الحاشية (padding) في الطرف الأيمن للعنصر؛ وعلى نقيض الهوامش margin، لا يجوز استخدام استخدام القيم السالبة للحواشي. ويمكن استخدام الخاصية المختصرة padding لضبط جميع الحواشي على الأطراف الأربعة لأحد العناصر في قاعدة واحدة.
padding-top	تضبط الحاشية (padding) في الطرف العلوي للعنصر؛ وعلى نقيض الهوامش margin، لا يجوز استخدام استخدام القيم السالبة للحواشي. ويمكن استخدام الخاصية المختصرة padding لضبط جميع الحواشي على الأطراف الأربعة لأحد العناصر في قاعدة واحدة.

اقتصاص المحتوى

الخاصية	الوصف
overflow	تُحدِّد إن كان سيتم اقتصاص (clip) المحتوى، أو سيُعرَض شريط تمرير (scroll bar)، أو سيُعرَض ما يزيد من محتوى العنصر الكتلي عند تجاوزه أبعاد الحاوية الكتلية التي هو فيها.
overflow-x	تُحدِّد إن كان سيتم اقتصاص (clip) المحتوى، أو سيُعرَض شريط تمرير (scroll bar)، أو سيُعرَض ما يزيد من محتوى العنصر الكتلي على يمينه أو يساره.
overflow-y	تُحدِّد إن كان سيتم اقتصاص (clip) المحتوى، أو سيُعرَض شريط تمرير (scroll bar)، أو سيُعرَض ما يزيد من محتوى العنصر الكتلي فوقه أو تحته.

تخطيط Flex Box

الخاصية	الوصف
align-content	تُعرِّف طريقة توزيع المتصفح للمسافة بين العناصر وحولها على امتداد المحور الثانوي من حاوية flex.
align-items	تُعرِّف طريقة توزيع المتصفح للمسافة بين العناصر وحولها على امتداد المحور الثانوي من حاوية flex. فهي تعمل كالخاصية justify-content لكن في الاتجاه المعامد.
align-self	تضبط محاذاة عناصر flex في السطر الحالي متجاوزةً قيمة الخاصية align-items، وإذا كانت حاشية margin أحد العناصر في المحور المعامد مضبوطةً إلى autoفسيتم تجاهل الخاصية align-self.
flex	تُحدِّد كيف سيتمدد أو يتقلص أحد عناصر flex لكي يملأ المساحة المتوافرة في حاوية flex. هذه الخاصية المختصرة تضبط الخاصيات flex-grow و flex-shrinkو flex-basis.
flex-basis	تُحدِّد القياس الرئيسي (main size) لأحد عناصر flex، وهذه الخاصية تضبط قياس صندوق المحتوى (content box) إلا إذا حُدِّدَ غير ذلك باستخدام الخاصية box-sizing.
flex-direction	تُعرِّف ما هو المحور الرئيسي (main axis) في حاوية flex وما اتجاهه (عادي أم معكوس).
flex-flow	تستعمل لضبط قيمة الخاصيتين flex-direction و flex-wrap.
flex-grow	تُحدِّد معامل التمدد لأحد عناصر flex، وهي تُحدِّد مقدار المساحة التي يجب أن يأخذها العنصر داخل حاوية flex.
flex-shrink	تُحدِّد معامل التقلص لأحد عناصر flex، وهي تُحدِّد مقدار المساحة التي يجب أن يأخذها العنصر داخل حاوية flex نسبةً إلى بقية العناصر، وذلك في حال كان العرض الافتراضي للعناصر flex أكبر من الحاوية.
flex-wrap	تُحدِّد فيما إذا كانت عناصر flex يجب أن تكون محتواةً في سطرٍ وحيد أم يمكن التفافها إلى عدِّة أسطر، وإذا سُمِحَ بالالتفاف (wrap) فيمكننا باستخدام هذه الخاصية تحديد ترتيب تكديس الأسطر.
justify-content	تُعرِّف طريقة توزيع المتصفح للمسافة بين العناصر وحولها على امتداد المحور الرئيسي من حاوية flex.
order	تُحدِّد ترتيب عناصر flex في الحاوية، إذ ستُرتَّب العناصر ترتيبًا تصاعديًا اعتمادًا على قيمة الخاصية order المُسندَة إليها، والعناصر التي لها نفس القيمة ستُرتَّب وفق ورودها في الشيفرة المصدرية.

الخطوط

الخاصية	الوصف
font	الخاصية font في لغة CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات font-style و font-variant و font-weight و font-size و line-height و font-family، وذلك لتحديد الخط المستخدم في العنصر.
font-family	تُحدِّد قائمةً تحتوي على نوع خط واحد أو أكثر من أنواع الخطوط الخاصة أو العامة، وذلك لتُطبَّق على العنصر.
font-kerning	تتحكم باستخدام معلومات تآلف الأحرف (kerning information) المُخزّنة في الخط المستخدم.
font-size	تضبط حجم الخط، وضبط حجم الخط قد يؤدي إلى تغيير حجم عناصر أخرى، لأن حجم الخط سيُستخدَم لحساب قيمة الأطوال <length> ذات الواحدة em و ex.
font-size-adjust	الخاصية font-size-adjust في لغة CSS تقول أنَّ حجم الخط يجب أن يكون مُختارًا اعتمادًا على ارتفاع الأحرف الصغيرة (lowercase) بدلًا من ارتفاع الأحرف الكبيرة؛ وهذا مُفيدٌ لأنَّ وضوح الخطوط وسهولة قراءتها -خصوصًا إذا كان حجمها صغيرًا- سيُحدَّد بحجم الأحرف ذات الحالة الصغيرة وليس الكبيرة.
font-stretch	الخاصية font-stretch في لغة CSS تختار نسخةً ضيقةً (condensed) أو عاديةً (normal) أو موسعةً (expanded) من الخط.
font-style	تُحدِّد إن كان يجب أن يكون شكل الخط عاديًا (normal) أو مائلًا (italic) أو منحرفًا (oblique). وسيختار المتصفح النسخة الأنسب من نوع الخط font-family.
font-weight	تُحدِّد «وزن» (weight، أو ثخانة) الخط؛ والأوزان المتاحة للاستخدام في خطٍ ما تعتمد على نوع الخط المستخدم font-family، إذ إنَّ بعض الخطوط لا توفِّر إلا نسختين هما normal و bold.
line-height	تضبط المسافة المستخدم للأسطر، كما في النصوص؛ أما على العناصر الكتلية (block elements) فهي تُحدِّد الارتفاع الأدنى للصناديق النصية (line boxes) ضمن العنصر.

تنسيق النصوص في لغة CSS

الخاصية	الوصف
direction	تضبط اتجاه النص، ونستخدم القيمة rtl معها للإشارة إلى اللغات التي تُكتَب من اليمين إلى اليسار مثل اللغة العربية، و ltr للغات التي تُكتَب من اليسار إلى اليمين مثل اللغة الإنكليزية. لاحظ أنَّ اتجاه النص يُعرَّف عادةً باستخدام الخاصية dir على عنصر <html> لكامل المستند، وليس باستخدام الخاصية direction.
letter-spacing	تُحدِّد ما هو التباعد بين الأحرف النصية.
line-break	تُحدِّد سلوك المتصفح في الانتقال إلى سطرٍ جديد عند التعامل مع علامات الترقيم والرموز.
overflow-wrap	تُحدِّد إذا كان على المتصفح الانتقال إلى سطر جديد ضمن الكلمات نفسها لمنع النص من تجاوز حدود صندوق المحتوى للعنصر الحاوي عليه. وعلى النقيض من الخاصية word-break، ستنتقل الخاصيةoverflow-wrap إلى سطرٍ جديد إذا لم يتمكن المتصفح من وضع الكلمة في سطرٍ بمفردها دون تجاوز حدود صندوق المحتوى.
tab-size	تُستعمل لتخصيص عرض محرف الجدولة (tab) الذي له الرمز U+0009 في يونيكود.
text-align	تصف كيف تكون محاذاة العناصر السطرية مثل النصوص في الحاويات الكتلية؛ لاحظ أنَّ الخاصية text-align لا تتحكم بمحاذاة العناصر الكتلية، وإنما تتحكم بمحاذاة بالمحتوى السطري الموجود داخلها.
text-align-last	تصف كيف تكون محاذاة آخر سطر نصي.
text-decoration	تُحدِّد شكل خطوط الزخرفة (decorative lines) المستخدمة على النص؛ وهي خاصيةٌ مختصرة لضبط قيمة أكثر من خاصية عن خطوط الزخرفة بآنٍ واحد، وهي تتضمن text-decoration-line و text-decoration-color و text-decoration-style.
text-decoration-color	تُحدِّد لون خطوط الزخرفة (decorative lines) المستخدمة على النص والمضبوطة عبر الخاصية text-decoration-line؛ وهذا يتضمن الأسطر التي تعلو الخط أو تظهر أدناه أو تمر عبره أو الخطوط المموجة (التي تُشير عادةً إلى أنَّ الكلام فيه خطأ إملائي على سبيل المثال)؛ وسيُطبَّق اللون المضبوط عبر هذه الخاصية على جميع خطوط الزخرفة المُحدَّدة على العنصر.
text-decoration-line	تُحدِّد نوع خطوط الزخرفة (decorative lines) المستخدمة على النص. إذا كنت ستضبط عدِّة خاصيات لتحديد شكل خطوط الزخرفة، فمن المستحسن حينئذٍ استخدام الخاصية المختصرة text-decoration.
text-decoration-style	تُحدِّد شكل خطوط الزخرفة (decorative lines) المستخدمة على النص (المضبوطة عبر الخاصية text-decoration-line). إذا كنت ستضبط عدِّة خاصيات لتحديد شكل خطوط الزخرفة، فمن المستحسن حينئذٍ استخدام الخاصية المختصرة text-decoration.
text-emphasis	تُحدِّد علامة التوكيد (emphasis mark) المستخدمة على كل محرف نصي في العنصر باستثناء الفراغات ومحارف التحكم (control chars، مثل محرف السطر الجديد، ومحرف العودة إلى بداية السطر)؛ وهي خاصيةٌ مختصرة لضبط قيمة أكثر من خاصية عن ضبط علامات التوكيد معًا، وهي تتضمن text-emphasis-style و text-emphasis-color.
text-emphasis-color	تُحدِّد اللون المستخدم لرسم علامة التوكيد (emphasis mark) المستخدمة على كل محرف نصي في العنصر؛ يمكن ضبط قيمة هذه الخاصية باستعمال الخاصية المختصرة text-emphasis.
text-emphasis-position	تُحدِّد موضع رسم علامة التوكيد (emphasis mark) المستخدمة على كل محرف نصي في العنصر؛ وقد تؤدي هذه الخاصية إلى تغيير ارتفاع السطر إن لم يتسع لعلامة التوكيد.
text-emphasis-style	تُحدِّد نوع علامة التوكيد (emphasis mark) المستخدمة على كل محرف نصي في العنصر باستثناء الفراغات ومحارف التحكم (control chars، مثل محرف السطر الجديد، ومحرف العودة إلى بداية السطر)؛ يمكن ضبط قيمة هذه الخاصية باستعمال الخاصية المختصرة text-emphasis.
text-indent	تُحدِّد مقدار المسافة البدائة التي توضع قبل أسطر النص الموجودة في عنصر كتلي؛ وهذه الخاصية تتحكم بالمسافة البادئة لأوّل سطر افتراضيًا، لكن يمكن استخدام الكلمتين المحجوزتين hanging و each-line لتغيير هذا السلوك (انظر «دعم المتصفحات»).
text-justify	تُعرِّف طريقة توزيع النص إذا كانت الخاصيةtext-align مضبوطةً إلى القيمة justify.
text-shadow	تضيف تأثير الظلال على النص، وتقبل تحديد أكثر من ظل (يُفصَل بين قيمها بفاصلة)، وسيُطبَّق الظل على النص وعلى خطوط الزخرفة text-decoration التابعة للعنصر.
text-transform	تُحدِّد ما هي حالة الأحرف التي سيُعرَض فيها العنصر؛ إذ يمكن استخدام هذه الخاصية لجعل الأحرف كلها بالحالة الكبيرة، أو بالحالة الصغيرة، أو جعل أوّل حرف من كل كلمة كبيرًا. يجدر بالذكر أنَّ هذه الخاصية ليس لها أثر على النصوص العربية.
white-space	الخاصية white-space في لغة CSS تُحدِّد كيف ستُعامل الفراغات ضمن العنصر؛ أما إذا كنتَ تبحث عن طريقة تقسيم الكلمات الطويلة، فانظر إلى خاصية overflow-wrap و word-break.
word-break	تُحدِّد إذا كان على المتصفح الانتقال إلى سطر جديد ضمن الكلمات نفسها لمنع النص من تجاوز حدود صندوق المحتوى للعنصر الحاوي عليه. وعلى النقيض من الخاصية overflow-wrap، ستنتقل الخاصيةword-break إلى سطرٍ جديد عند المكان الذي كان سيتجاوز النص فيه حدود صندوق المحتوى، حتى لو كان وضع الكلمة في سطرٍ بمفردها سيؤدي إلى عدم تجاوزها حدود صندوق المحتوى.
word-spacing	تُحدِّد كيف سيكون التباعد بين الكلمات والوسوم.

القوائم

الخاصية	الوصف
counter-increment	تُزيد أو تُنقِص قيمة أحد عدّادات لغة CSS بقيمة معيّنة، ويمكن إعادة تعيين العدّاد إلى رقم معيّن باستخدام الخاصية counter-reset.
counter-reset	تُعيد ضبط قيمة أحد عدّادات لغة CSS إلى قيمة معيّنة، ويمكن زيادة أو إنقاص قيمة العداد باستخدام الخاصية counter-increment.
list-style	الخاصية list-style في لغة CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصياتlist-style-type و list-style-image و list-style-position.
list-style-image	تُحدِّد صورةً لتُستخدَم للإشارة إلى عناصر القائمة. من المستحسن عادةً استخدام الخاصية المختصرة list-style لضبط قيمة هذه الخاصية.
list-style-position	تُحدِّد مكان إشارة عناصر القائمة. ومن المستحسن عادةً استخدام الخاصية المختصرة list-style.
list-style-type	تُحدِّد شكل الإشارة إلى عناصر القائمة.

الجداول

الخاصية	الوصف
border-collapse	تُحدِّد إذا كان إطار الجدول منفصلًا عن إطار الخلايا (أي لكلٍ واحدٍ منها إطارٌ خاصٌ به) أو كان مدمجًا مع إطار الخلايا (أي تتشارك الخلايا المتجاورة الإطار مع بعضها بعضًا).
border-spacing	تُحدِّد المسافة بين إطارات خلايا الجداول المتجاورة. لن يكون لهذه الخاصية أثرٌ إلا إذا كانت قيمة الخاصية border-collapse هي separate.
caption-side	تُحدِّد موضع لافتة الجدول المُعرَّفة عبر العنصر<caption>.
empty-cells	تُحدِّد كيف يجب أن يعرض المتصفح خلفية وإطر خلايا الجداول <table> التي ليس فيها محتوى ظاهر. لن يكون لهذه الخاصية أثرٌ إلا إذا كانت الخاصية border-collapse مضبوطةً إلى separate.
table-layout	تُحدِّد الخوارزمية التي تُستخدم لضبط تخطيط خلايا وأسطر وأعمدة الجداول <table>.
vertical-align	تُحدِّد المحاذاة الرأسية للعناصر السطرية أو خلايا الجداول.

الحركات

الخاصية	الوصف
‎@keyframes	القاعدة ‎@keyframes في لغة CSS تتحكم بالخطوات البينية (intermediate steps) في سلسلة حركات CSS عبر تعريف أنماط للإطارات المفتاحية (keyframes)، مما يعطينا تحكمًا كبيرًا في أنماط العنصر في الخطوات البينية بالمقارنة مع الانتقالات transition.
animation	الخاصية animation في لغة CSS هي خاصية مختصرة تضبط قيم مختلف خاصيات لغة CSS المتعلقة بالحركات وهي animation-name و animation-duration وanimation-timing-function و animation-delay و animation-iteration-count و animation-direction و animation-fill-mode وanimation-play-state.
animation-delay	تُحدِّد متى ستبدأ الحركة، ويمكنك تأخير بدء الحركة فترةً من الزمن، أو البدء مباشرةً، أو البدء مباشرةً لكن مع تجاوز جزء من دورة الحركة.
animation-direction	تُحدِّد إذا كان يجب تشغيل الحركة إلى الأمام (forwards) أو إلى الخلف (backwards) أو التبديل بينهما.
animation-duration	تُحدِّد الزمن اللازم لإكمال دورة كاملة من الحركة.
animation-fill-mode	تُحدِّد كيف يجب أن تُطبِّق حركات لغة CSS قيم الخاصيات إلى العنصر قبل وبعد تنفيذ الحركة.
animation-iteration-count	تُحدِّد عدد مرات تكرار دورة الحركة حتى توقف الحركة، وإذا حُدِّدت أكثر من قيمة فسيتم استخدام القيمة التي تلي القيمة التي طُبِّقَت سابقًا عند إعادة تشغيل الحركة، إلى أن نعود إلى القيمة الأولى بعد استخدام آخر قيمة.
animation-name	تستعمل لتحديد أسماء الحركات التي ستُطبَّق على العنصر، وكل اسم يجب أن يُشير إلى قاعدة ‎@keyframes التي تُعرِّف قيم الخاصيات اللازمة للحركة.
animation-play-state	تُحدِّد إذا كانت الحركة تعمل أو متوقفة مؤقتًا، ويمكن الحصول على قيمة هذه الخاصية عبر JavaScript لمعرفة حالة الحركة، ويمكن أيضًا استعمال JavaScript لضبط قيمتها لتوقيف الحركة مؤقتًا أو استئنافها.
animation-timing-function	تستعمل لوصف كيف ستتأثر القيم الوسطية لخاصيات لغة CSS بالحركة، أي أنها تسمح لك بتحديد ما هو منحني التسارع (acceleration curve) للحركة خلال دورة واحدة.
يمكنك الاستزادة حول موضوع الحركات والتحريك عبر لغة CSS بقراءة: الكشف عن دعم المتصفحات لحركات CSS استخدام حركات CSS حركات CSS: نصائح وحيل

الانتقالات

الخاصية	الوصف
transition	خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات transition-property و transition-duration و transition-timing-function و transition-delay.
transition-delay	تُحدِّد الزمن الذي يجب انتظاره بين وقوع الحدث الذي سيؤدي إلى بدء تأثير الانتقال وبين بداية التأثير.
transition-duration	تُحدِّد الزمن الذي سيستغرقه تأثير الانتقال للوصول إلى القيمة النهائية للخاصية، والقيمة الافتراضية 0s لن تؤدي إلى حدوث تأثير انتقال أبدًا.
transition-property	تستعمل لتحديد أسماء خاصيات لغة CSS التي ستخضع لتأثير الانتقال.
transition-timing-function	تستعمل لوصف كيف ستتأثر القيم الوسطية لخاصيات لغة CSS بتأثير الانتقال، أي أنها تسمح لك بتحديد ما هو منحني التسارع (acceleration curve) لتأثير الانتقال، لذا ستكون سرعة التأثير متفاوتة خلال مدته.

التحويلات

الخاصية	الوصف
backface-visibility	تُحدِّد فيما إذا كان الوجه الخلفي للعنصر ظاهرًا للمستخدم، ويكون الوجه الخلفي للعنصر ذو خلفيةٍ شفافة، ويسمح بعرض صورة معكوسة (mirrored) للوجه الأمامي للعنصر.
perspective	تُستخدَم لتفعيل الفضاء ثلاثي الأبعاد في العنصر، لكي نتمكن من وضع العناصر الأبناء في ذاك الفضاء، وتسمح هذه الخاصية لنا بإضفاء شعور بالعمق إلى العنصر، بجعل العناصر الأقرب إلى المستخدم تبدو وأكبر، والعناصر الأبعد تبدو أصغر.
perspective-origin	تُحدِّد الموضع الذي ينظر منه المستخدم إلى العنصر، وتُستخَدم قيمة هذه الخاصية كنقطة التلاشي (vanishing point) من الخاصية perspective.
transform	تسمح لنا بتحويل شكل العناصر في الفضاء ثنائي أو ثلاثي الأبعاد، وبالتالي يمكن نقل العنصر أو تدويره أو إعادة تحجيمه أو جعله منحرفًا.
transform-origin	تسمح بتحديد مبدأ الإحداثيات للتحويلات التي ستجرى على العنصر، فمثلًا سيكون مبدأ إحداثيات العنصر الافتراضي عند تطبيق الدالة rotate()‎ هو مركز العنصر.
transform-style	تُحدِّد إن كانت العناصر الأبناء للعنصر الحالي موجودة في الفضاء ثلاثي الأبعاد أو كانت مسطحةً (flattened) في مستوى العنصر الأب؛ وإذا كانت مسطحةً فهذا يعني أنها لن تكون موجودة في فضاءٍ ثلاثي الأبعاد خاصٍ بها.

واجهة المستخدم

الخاصية	الوصف
caret-color	تُحدِّد ما هو لون مؤشر الإدخال النصي (وهي الإشارة التي تظهر للإشارة إلى موضع الحرف النصي الذي سيدخله المستخدم) ضمن عنصر مثل <input> أو أي عنصر آخر له الخاصية contenteditable. الشكل الافتراضي لمؤشر الإدخال هو خطٌ رأسيٌ يومض لتسهيل ملاحظته، ويكون لونه الافتراضي هو الأسود، لكن يمكن تعديله باستخدام هذه الخاصية.
cursor	تُحدِّد ما هو شكل مؤشر الفأرة الذي سيُعرَض عندما تمر الفأرة فوق العنصر.
outline	الخاصية outline في لغة CSS هي خاصية مختصرة تُستخدَم لضبط خاصية أو أكثر من الخاصيات outline-style و outline-width و outline-color في آنٍ واحد.
outline-color	تضبط لون حدود outline العنصر، التي هي الخطوط التي تُرسَم خارج إطار العنصر border. من المستحسن استخدام الخاصية المختصرة outline عند ضبط مظهر حدود العنصر، لأنها تضبط عدِّة خاصيات في آنٍ واحد.
outline-offset	تضبط المسافة التي تبعد فيها حدودoutline العنصر عن حافته أو إطاره border، والحدود هي الخطوط التي تُرسَم خارج إطار العنصر border. المسافة التي ستوضع بين إطار العنصر وحدوده هي مسافة ذات خلفية شفافة، أي ستُعرَض خلفية العنصر الأب فيها.
outline-style	تضبط شكل حدود outline العنصر، التي هي الخطوط التي تُرسَم خارج إطار العنصر border. من المستحسن استخدام الخاصية المختصرة outline عند ضبط مظهر حدود العنصر، لأنها تضبط عدِّة خاصيات في آنٍ واحد.
outline-width	تضبط عرض (أو ثخن) حدود outline العنصر، التي هي الخطوط التي تُرسَم خارج إطار العنصر border. من المستحسن استخدام الخاصية المختصرة outline عند ضبط مظهر حدود العنصر، لأنها تضبط عدِّة خاصيات في آنٍ واحد.
resize	تُحدِّد إذا كان تغيير حجم العنصر، وفي أيّ اتجاه.
text-overflow	تُحدِّد ماذا سيحدث عند عدم عرض المحتوى الزائد عن صندوقه، فيمكن أن يتم اقتصاص المحتوى، أو عرض ثلاث نقط (المحرف … رمزه U+2026)، أو عرض سلسلة نصية خاصة.

تخطيط الأعمدة

الخاصية	الوصف
column-count	تُحدِّد ما هو عدد الأعمدة التي سينقسم العنصر إليها.
column-fill	تُحدِّد كيف يجب تقسيم المحتوى على الأعمدة، فباستخدام هذه الخاصية ستتحكم إذا كان يجب موازنة محتوى الأعمدة أم لا.
column-gap	تضبط حجم الفراغ بين الأعمدة في العناصر متعددة الأعمدة (multi-column elements).
column-rule	الخاصية column-rule المختصرة في لغة CSS تُحدِّد شكل الخط العمودي (rule) الذي سيُرسَم بين الأعمدة في العناصر متعددة الأعمدة. هذه الخاصية ستضبط قيمة الخاصيات column-rule-width و column-rule-style و column-rule-color في خاصيةٍ واحدة.
column-rule-color	تُحدِّد لون الخط العمودي (rule) الذي سيُرسَم بين الأعمدة في العناصر متعددة الأعمدة.
column-rule-style	تُحدِّد شكل الخط العمودي (rule) الذي سيُرسَم بين الأعمدة في العناصر متعددة الأعمدة.
column-rule-width	تُحدِّد عرض (أو ثخن) الخط العمودي (rule) الذي سيُرسَم بين الأعمدة في العناصر متعددة الأعمدة.
column-span	تسمح بأن يمتد أحد العناصر على جميع الأعمدة وذلك عند ضبط القيمة all لها.
column-width	تُحدِّد ما هو العرض الأدنى للأعمدة التي سينقسم العنصر إليها، وهذه القيمة سيستعملها المتصفح لمعرفة عدد الأعمدة الكلي.
columns	خاصية مختصرة تسمح لنا بضبط قيمة الخاصيتين column-width و column-count في آنٍ واحد.
orphans	تُحدِّد العدد الأدنى للأسطر النصية الموجودة في حاوية كتلية التي يجب أن تظهر في أسفل الصفحة أو العمود. في التنسيق الطباعي، تكون اليتامى (orphans) هي أول سطر من الفقرة الذي يظهر بمفرده في أسفل الصفحة أو العمود.
widows	تُحدِّد العدد الأدنى للأسطر النصية الموجودة في حاوية كتلية التي يجب أن تظهر في أعلى الصفحة أو العمود. في التنسيق الطباعي، تكون الأرامل (widows) هي آخر سطر من الفقرة الذي يظهر بمفرده في أعلى الصفحة أو العمود.

توليد محتوى في لغة CSS

الخاصية	الوصف
content	تُستخدَم مع العنصرين الزائفين ‎::before و‎::after لتوليد محتوى في العنصر.
quotes	تُشير إلى الطريقة التي يجب أن يعرض فيها المتصفح علامات الاقتباس.

المُرشِّحات

الخاصية	الوصف
filter	الخاصية filter في لغة CSS تسمح لنا بتطبيق تأثيرات مثل تغيير اللون وتأثير الضبابية على أحد العناصر، وتُستخدَم المُرشِّحات (filters) عمومًا لتعديل طريقة عرض الصور <img> والخلفياتbackground والإطارات border.

تخطيط Grid

الخاصية	الوصف
grid	الخاصية grid المختصرة في لغة CSS تضبط جميع الخاصيات التي تُحدَّد خصائص الشبكة بوضوح (أي grid-template-rows و grid-template-columns وgrid-template-areas)، وجميع الخاصيات التي تُحدِّد خصائص الشبكة ضمنيًا (أي grid-auto-rows و grid-auto-columns و grid-auto-flow)، والخاصيات التي تُضبِط الفراغ بين الأعمدة والأسطر (أي grid-column-gap وgrid-row-gap)، وكل ذلك في قاعدة واحدة.
grid-area	الخاصية grid-area في لغة CSS هي خاصية مختصرة تضبط قيمة الخاصيات grid-row-start و grid-column-start و grid-row-end و grid-column-end، مُحدَّدةً أبعاد عنصر grid وموضعه.
grid-auto-columns	تضبط أبعاد مسارات الأعمدة المُنشأة ضمنيًا.
grid-auto-flow	تضبط كيف ستعمل خوارزمية تحديد مواضع عناصر grid التلقائية.
grid-auto-rows	تضبط أبعاد مسارات الأسطر المُنشأة ضمنيًا.
grid-column	الخاصية grid-column في لغة CSS هي خاصية مختصرة تضبط قيمة الخاصيتينgrid-column-start و grid-column-end التي تُحدِّد أبعاد عنصر grid ومكانه في العمود.
grid-column-end	تستعمل لضبط مكان نهاية عنصر grid ضمن عمود grid بتحديد رقم العمود أو الامتداد أو جعل موضع العنصر تلقائيًا.
grid-column-gap	تُحدِّد المسافة التي تفصل بين الأعمدة في حاوية gird.
grid-column-start	تستعمل لضبط مكان بداية عنصر grid ضمن عمود grid بتحديد رقم العمود أو الامتداد أو جعل موضع العنصر تلقائيًا.
grid-gap	الخاصية grid-gap في لغة CSS هي خاصيةٌ مختصرةٌ تضبط قيمة الخاصيتين grid-row-gap و grid-column-gap، وهي تُحدِّد المسافة التي تفصل بين الأسطر والأعمدة في حاوية gird.
grid-row	الخاصية grid-row في لغة CSS هي خاصية مختصرة تضبط قيمة الخاصيتين grid-row-start و grid-row-end التي تُحدِّد أبعاد عنصر grid ومكانه في السطر.
grid-row-end	تستعمل لضبط مكان نهاية عنصر grid ضمن سطر grid بتحديد السطر أو الامتداد أو جعل موضع العنصر تلقائيًا.
grid-row-gap	تُحدِّد المسافة التي تفصل بين الأسطر في حاوية gird.
grid-row-start	تستعمل لضبط مكان بداية عنصر grid ضمن سطر grid بتحديد السطر أو الامتداد أو جعل موضع العنصر تلقائيًا.
grid-template	الخاصية grid-template في لغة CSS هي خاصية مختصرة تستعمل لضبط قيم للخاصيات grid-template-rows و grid-template-columns و grid-template-areas.
grid-template-areas	تضبط أسماء مناطق gird (أي grid areas).
grid-template-columns	تضبط أسماء وأبعاد مسارات الأعمدة في تخطيط Grid.
grid-template-rows	تضبط أسماء وأبعاد المسارات السطرية في تخطيط Grid.
repeat()‎	الدالة repeat()‎ في لغة CSS تُكرِّر جزءًا من قائمة المسارات (track list)، مما يسمح بتعريف عدد كبير من الأعمدة والأسطر التي لها نمط تكرار معيّن بسهولة.

المُحدِّدات في لغة CSS

الخاصية	الوصف
محددات الأنواع	مُحدِّد النوع (type selector) في لغة CSS يُطابِق العناصر وفق اسم العقدة، أي أنه يُحدِّد جميع العناصر التي لها نوع معيّن في المستند.
محددات الأصناف	مُحدِّد الصنف (class selector) في لغة CSS يُطابِق العناصر وفق قيمة الخاصية class التابعة لها.
محددات المُعرِّفات	مُحدِّد المُعرِّف (ID selector) في لغة CSS يُطابِق العناصر وفق قيمة الخاصية ID التابعة لها.
المحدد العام	المُحدِّد العام (universal selector) في لغة CSS يطابق جميع العناصر.
محددات الخاصيات	مُحدِّد الخاصيات (attribute selector) في لغة CSS يُطابِق العناصر إذ وجدت فيها خاصيةٌ ما أو كانت تلك الخاصية تملك قيمةً معيّنةً.
محددات العناصر الأخوة المتجاورة	مُحدِّد العناصر الأخوة المتجاورة (adjacent sibling combinator) في لغة CSS رمزه + ويفصل بين مُحدِّدين، ويطُابِق العنصر الثاني إذا أتى مباشرةً بعد العنصر الأول وكان كلا العنصرين ابنًا لعنصر أب مشترك.
محددات العناصر الأخوة	مُحدِّد العناصر الأخوة العامة (general sibling combinator) في لغة CSS رمزه ~ ويفصل بين مُحدِّدين، ويطُابِق العنصر الثاني إذا أتى بعد العنصر الأول (وليس بالضرورة أن يأتي بعده مباشرةً)، وكان كلا العنصرين ابنًا لعنصر أب مشترك.
محددات العناصر الأبناء	مُحدِّد العناصر الأبناء (child combinator) في لغة CSS رمزه ‎>‎ ويفصل بين مُحدِّدين، ويطُابِق العنصر الثاني إذا كان ابنًا للعنصر الأول.
محددات العناصر السليلة	مُحدِّد العناصر السليلة (descendant combinator) في لغة CSS الذي يُمثَّل عادةً بفراغٍ واحد ويفصل بين مُحدِّدين، ويطُابِق العنصر الثاني إذا كان ابنًا للعنصر الأول.

الأصناف الزائفة

الصنف	التمثيل
‎:active	العناصر (مثل الأزرار) التي جرى تفعيلها من المستخدم. وعند استخدام الفأرة سيبدأ «تفعيل» العنصر عندما يضغط المستخدم على الزر الرئيسي لها وينتهي عند إفلات الضغط على ذاك الزر.
‎:checked	أزرار انتقاء (radio button) أو صناديق تأشير (checkbox) أو خيارات <option> في عنصر<select> تم تحديدها أو انتقاؤها. يمكن أن يُفعِّل المستخدم هذه الحالة بتفعيل أو انتقاء العنصر.
‎:default	أي عنصر مُختار افتراضيًا بين مجموعة من العناصر المتعلقة به؛ ويمكن استخدام هذا الصنف الزائف على أيّة أزرار عادية <button> أو أزرار انتقاء (radio button) أو صناديق تأشير (checkbox) أو خيارات <option> في عنصر <select> تم تحديدها أو انتقاؤها.
‎:disabled	أي عنصر مُعطَّل، ولا يمكن اختيار أو النقر على العنصر المعطَّل ولا الكتابة فيه، ولا يقبل التركيز (focus)، ويمكن أن يكون العنصر مُفعَّلًا (enabled) أي يمكن اختياره أو النقر عليه أو الكتابة فيه.
‎:empty	أي عنصر ليس له أبناء، والأبناء يمكن أن تكون عقد عناصر (element nodes) أو عقدًا نصيةً (text nodes) بما في ذلك الفراغات. لن تؤثر التعليقات على اعتبار العنصر فارغًا أم لا.
‎:enabled	أي عنصر مُفعّل، أي يمكن اختياره أو النقر عليه أو الكتابة فيه أو يمكن التركيز عليه (focus).
‎:first	يُستعمَل مع القاعدة ‎@page، ويُمثِّل أوّل صفحة من المستند عند طباعته.
‎:first-child	أوّل عنصر في مجموعة من العناصر الأخوة (sibling elements).
‎:first-of-type	أوّل عنصر من نوعه في مجموعة من العناصر الأخوة.
‎:fullscreen	العناصر التي تُعرَض عندما يكون المتصفح في وضع ملء الشاشة.
‎:focus	العناصر (مثل عناصر النماذج) التي استقبل التركيز (foucs)، ويُفعَّل التركيز إذا ضغط المستخدم أو لمس أحد العناصر أو وصل إليه عبر مفتاح tab على لوحة المفاتيح.
‎:hover	العناصر التي يتفاعل المستخدم معها مع جهاز تأشير لكن ليس بالضرورة أن يفعِّلها، ويُفعَّل هذا الصنف الزائف عادةً عندما يمر المستخدم بجهاز التأشير (الفأرة غالبًا) فوق العنصر.
‎:indeterminate	أيّة نماذج تكون حالتها غير معروفة (indeterminate).
‎:in-range	أيّة عناصر<input> التي تكون قيمتها ضمن المجال المسموح المُحدَّد عبر الخاصيتينmin و max.
‎:invalid	أيّة عناصر <input>أو <form> التي فشل التحقق من صحة محتوياتها.
‎:lang()‎	العناصر اعتمادًا على لغة تلك العناصر.
‎:last-child	آخر عنصر في مجموعة من العناصر الأخوة (sibling elements).
‎:last-of-type	آخر عنصر من نوعه في مجموعة من العناصر الأخوة.
‎:left	يُستعمَل مع القاعدة ‎@page، ويُمثِّل الصفحات اليسارية (left hand pages) من المستند عند طباعته.
‎:link	عنصرٌ لم تتم زيارته من قبل، ويُطابِق جميع عناصر <a> و <area> و <link> التي لها الخاصية hrefولم تتم زيارتها بعد.
‎:not()‎	العناصر التي لا تُطابِق مُحدِّدًا أو أكثر، يسمى هذا الصنف أيضًا بصنف النفي الزائف (negation pseudo-class).
‎:nth-child()‎	عنصرٌ أو أكثر بناءً على موقعه ضمن مجموعة من العناصر الأخوة (siblings).
‎:nth-last-child()‎	عنصرٌ أو أكثر بناءً على موقعه ضمن مجموعة من العناصر الأخوة (siblings)، وذلك بدءًا من نهاية المجموعة.
‎:nth-last-of-type()‎	عنصرٌ أو أكثر من نوعٍ معيّن بناءً على موقعه ضمن مجموعة من العناصر الأخوة (siblings). بدءًا من النهاية إلى البداية.
‎:only-child	عنصرٌ لا يملك أيّة عناصر أخوة (siblings)، وهذا المُحدِّد يماثل ‎:first-child:last-child أو ‎‎:nth-‎child(1):nth-last-child(1)‎‎‎ لكن درجة التحديد له أقل.
‎:only-of-type	عنصرٌ لا يملك أيّة عناصر أخوة (siblings) من نفس نوعه.
‎:optional	أيّة عناصر<input> أو <select> أو <textarea> التي لم تُضبَط الخاصية requiredعليها.
‎:out-of-range	أيّة عناصر<input> التي لا تكون قيمتها ضمن المجال المسموح المُحدَّد عبر الخاصيتينmin و max.
‎:read-only	أي عنصر فيه محتوى نصي لا يمكن للمستخدم تعديله.
‎:read-write	أي عنصر فيه محتوى نصي يمكن للمستخدم تعديله.
‎:required	أيّة عناصر<input> أو <select> أو <textarea> التي ضُبِطَت الخاصية requiredعليها.
‎:right	يُستعمَل مع القاعدة ‎@page، ويُمثِّل الصفحات اليمينية (right hand pages) من المستند عند طباعته.
‎:root	العنصر الجذر في شجرة المستند، أي أنَّه يُطابِق العنصر <html> في مستندات HTML، وهو مكافئ للمُحدِّد html إلا أنَّ درجة التحديد له أعلى.
‎:target	عنصرٌ فريدٌ يُطابِق مُعرِّفه id قسمًا من رابط URL.
‎:valid	أيّة عناصر <input>أو <form> التي نجح المتصفح بالتحقق من صحة محتوياتها.
‎:visited	عنصرٌ تمت زيارته من قبل، ولأسباب تابعة للخصوصية، إنَّ عدد الخاصيات التي يمكن تغيير قيمتها باستخدام هذا المُحدِّد قليلةٌ جدًا.

العناصر الزائفة

العنصر	الوصف
‎::after‎	هو آخر عنصر ابن للعنصر المُحدَّد، ويستخدَم عادةً لإضافة محتوى تزييني للعنصر باستخدام الخاصية content، وهو عنصرٌ سطريٌ افتراضيًا.
‎::backdrop	هو صندوقٌ يُعرَض مباشرةً تحت أيّ عنصر معروض في وضع ملء الشاشة.
‎::before	هو أوّل عنصر ابن للعنصر المُحدَّد، ويستخدَم عادةً لإضافة محتوى تزييني للعنصر باستخدام الخاصية content، وهو عنصرٌ سطريٌ افتراضيًا.
‎::first-letter	يؤدي إلى تطبيق الأنماط على أوّل حرف من أوّل سطر من العناصر الكتلية (block-level elements)، شرط ألّا يسبقها محتوى آخر (مثل الصور أو الجداول السطرية).
‎::first-line	يؤدي إلى تطبيق الأنماط على أوّل سطر من العناصر الكتلية (block-level elements)، لاحظ أنَّ طول أوّل سطر يختلف تبعًا لعدة عوامل بما في ذلك عرض العنصر وعرض المستند وحجم الخط.
‎::placeholder	يُمثِّل النص البديل في أحد عناصر النماذج <form>.
‎::selection	يُمثِّل نصًّا في المستند الذي حدده المستخدم (باستخدام المؤشر مثلًا).

أنواع البيانات

نوع البيانات	الوصف
angle	نوع البيانات <angle> في لغة CSS يستعمل لتمثيل القيم الزاويّة بالدرجات (degrees) أو بالغراد (grad) أو بالراديان (radians) أو بالدورات (turns)، ويمكن استخدام هذا النوع في التدرجات اللونية <gradient> وبعض دوالtransform.
blend-mode	نوع البيانات <blend-mode> في لغة CSS يستعمل لوصف كيف يجب أن تمتزج الألوان عند تداخل طبقات الخلفات مع بعضها بعضًا. فلكل بكسل من بكسلات الطبقة التي طُبِّق عليها نمط الامتزاج، فسيأخذ اللون من الخلفية ومن الأمامية، وستُجرى عملية حسابية عليه، ويُعاد لونٌ جديدٌ سيستخدم مكان تداخل الطبقات.
color value	نوع البيانات <color> في CSS يستعمل لتمثيل لون في مجال ألوان sRGB.
custom-ident	نوع البيانات <custom-ident> في لغة CSS يستعمل لتمثيل المُعرِّفات (identifiers) التي أنشأها المستخدم، وهذا النوع حساس لحالة الأحرف، ولا يُسمَح باستخدام بعض القيم في مواضع معيّنة منعًا للالتباس.
gradient	نوع البيانات <gradient> في لغة CSS هو نوعٌ خاصٌ من الصور <image> الذي يُمثِّل تدرجًا لونيًا بين لونين أو أكثر. أنواع البيانات الفرعية: linear-gradient radial-gradient repeating-linear-gradient repeating-radial-gradient
image	نوع البيانات <image> في لغة CSS يستعمل لتمثيل صورة ثنائية الأبعاد؛ وهنالك نوعان من الصور: الصور التقليدية التي يُشار إليها عادةً باستخدام رابط URL، والصور المولّدة ديناميكيًا، مثل التدرجات اللونية <gradient>.
integer	نوع البيانات <integer> في لغة CSS هو نوعٌ خاصٌ من <number> الذي يُمثِّل الأعداد الصحيحة، سواءً كانت موجبة أو سالبةً؛ وتستُعمَل الأعداد الصحيحة في الكثير من خاصيات CSS مثل column-count و grid-column و grid-row وz-index.
length	نوع البيانات <length> في لغة CSS يستعمل لتمثيل القيم الطولية، فعدد كبير من خاصيات CSS تقبل بقيم ذات النوع <length>، مثل width و margin وpadding و font-size و border-width و text-shadow.
number	نوع البيانات <number> في لغة CSS يُمثِّل القيم العددية، سواءً كانت أعدادًا صحيحةً (integer) أو أعدادًا عشريةً.
percentage	نوع البيانات <percentage> في لغة CSS يستعمل لتمثيل النسب المئوية، إذ يقبل عددٌ كبيرٌ من خاصيات CSS القيمَ كنسبٍ مئوية، وتُستخدَم عادةً لتعريف أحد الأبعاد نسبةً إلى أبعاد العنصر الأب. أمثلة عن الخاصيات التي تقبل نوع البيانات <percentage>: الخاصية width و margin و padding و font-size.
resolution	نوع البيانات <resolution> في لغة CSS يستعمل لوصف دقة الشاشة في media queries، ودقة الشاشة تعني كثافة البكسلات في جهاز العرض.
string	نوع البيانات <string> في لغة CSS يُمثِّل سلسلةً من المحارف، ويمكن استخدام السلاسل النصية في الكثير من خاصيات CSS، مثل content و font-family وquotes.
time	نوع البيانات <time> يُمثِّل قيمةً زمنيةً يُعبَّر عنها بالثانية أو بالملي ثانية، وتُستَخدم في خاصية animation و transition وغيرهما.
timing-function	نوع البيانات <timing-function> يشير إلى الدوال الرياضية التي تصف سرطة تغيير القيم أحادية البعد في الحركات، وهذا ما يسمح بتغيير سرعة الحركات خلال فترة الحركة.
url	نوع البيانات <url> في لغة CSS يُشير إلى أحد الموارد (resources)، مثل الصور أو الخطوط، وتُستخدَم روابط URL في الكثير من الخاصيات، مثل background-image و cursor و list-style.

قواعد @

الخاصية	الوصف
‎@charset	تُحدِّد ترميز المحرف المستخدم في صفحة الأنماط، ويجب أن تكون أوّل تعليمة في الملف ولا يسبقها أي محرف، وإذا حُدِّدَت أكثر من قاعدة ‎@charset في الملف نفسه فلن تؤخذ إلا أوّل قاعدة، ولا يمكن أن تُستعمَل هذه القاعدة في الخاصية style على عناصر HTML أو داخل العنصر<style>.
‎@font-face	تسمح للمطورين بتحديد خطوط خاصة لعرض النص الموجود في صفحات الويب، وذلك بالسماح للمطورين بتعريف خطوط خاصة بهم، والقاعدة ‎@font-face أدت إلى فتح المجال أمام المطورين لاستخدام أي خطٍ يشاؤون بدل أن يكونوا محدودين ببعض الخطوط المثبتة على حاسوب الزوار.
‎@import	تسمح للمطورين باستيراد قواعد التنسيق من صفحات الأنماط الأخرى، وهذا النوع من القواعد يجب أن يسبق جميع قواعد CSS الأخرى، ما عدا قواعد ‎@charset.
‎@keyframes	تتحكم بالخطوات البينية (intermediate steps) في سلسلة حركات CSS عبر تعريف أنماط للإطارات المفتاحية (keyframes)، مما يعطينا تحكمًا كبيرًا في أنماط العنصر في الخطوات البينية بالمقارنة مع الانتقالات transition.
‎@media	يمكن أن تستعمل لتطبيق الأنماط بناءً على شروط معيّنة (تسمى media queries)، التي تختبر نوع الجهاز، وخصائصه، وبيئة التشغيل.
‎@page	تُستعمَل لتعديل بعض خاصيات CSS عند طباعة المستخدم، أي لا يمكنك تغيير جميع خاصيات لغة CSS مع هذه القاعدة، إذ تستطيع تغيير الهوامش margin واليتامى orphans والأرامل widows، وسيتم تجاهل محاولة تغيير خاصيات CSS الأخرى.
‎@supports	تسمح لنا بتعريف قواعد بناءً على دعم المتصفح لميزات مُعيّنة في لغة CSS.

متفرقات في لغة CSS

العنصر	الوصف
‎--*‎	أسماء الخاصيات التي تُسبَق بشرطتين --، مثل ‎--example-name، تُمثِّل الخاصيات المخصصة (custom properties) التي تُسنَد لها قيمة يمكن إعادة استخدامها في المستند عبر الدالة var()‎.
attr()‎	الدالة attr()‎ في لغة CSS تُستعمَل للحصول على قيمة إحدى خاصيات العنصر المُحدَّد واستخدامها في أنماط CSS، ويمكن استعمالها أيضًا على العناصر الزائفة (pseudo-elements) وفي هذه الحالة ستُستخدَم قيمة خاصية العنصر الأصل.
calc()‎	الدالة calc()‎ في لغة CSS تسمح بإجراء عمليات حسابية عند تحديد قيم خاصيات CSS، ويمكن استخدامها في أي موضع يُسمَح فيه باستخدام أنواع البيانات<length> و <percentage> و <angle> و <time> و <number> و<integer>.
inherit	الكلمة المحجوزة inherit في لغة CSS تؤدي إلى جعل العنصر يأخذ القيمة المحسوبة لهذه الخاصية من العنصر الأب، ويمكن تطبيق هذه القيمة على جميع خاصيات CSS بما في ذلك خاصية all المختصرة.
initial	الكلمة المحجوزة initial في لغة CSS تُطبِّق القيمة الابتدائية للخاصية على العنصر، ويمكن استخدام على جميع خاصيات CSS، بما في ذلك خاصية all المختصرة.
unset	الكلمة المحجوزة unset في لغة CSS تُعيد ضبط قيمة الخاصية إلى قيمتها المورثة إن ورثت القيمة من العنصر الأب، أو إلى قيمتها الابتدائية إن لم ترثها؛ بصياغة أخرى، ستسلك هذه الكلمة المحجوزة سلوك inherit في الحالة الأولى، وسلوك initial في الحالة الثانية، ويمكن استخدام على جميع خاصيات CSS، بما في ذلك خاصية all المختصرة.
var()‎	الدالة var()‎ في لغة CSS تُستخدم لتضمين قيمة خاصية مخصصة بدلًا من قيمة إحدى الخاصيات الأخرى.
will-change	الخاصية will-change في لغة CSS تسمح للمطورين بأخبار المتصفحات ما هي التغييرات المتوقع إجراؤها على العنصر، لكي يتمكن المتصفح من ضبط تحسينات الأداء قبل حدوث التغيير، وهذه التحسينات ستزيد من استجابة الصفحة عبر القيام بالحسابات اللازمة قبل وقوع التغيير.

القيم في لغة CSS

الخاصية	الوصف
القيمة الفعلية	القيمة الفعلية (actual value) لإحدى خاصيات لغة CSS هي القيمة المستخدمة لتلك الخاصية بعد إجراء أيّة عمليات تقريب لازمة، فمثلًا قد لا يعرض المتصفح الإطاراتborder إلا إذا كانت سماكتها تكافئ رقمًا صحيحًا بواحدة البكسل، لذا قد تُقرِّب تلك السماكة إلى أقرب عدد صحيح قبل تطبيقها.
القيمة المحسوبة	القيمة المحسوبة (computed value) لإحدى خاصيات لغة CSS تُحسَب من القيمة المُحدَّدة.
القيمة المُحدَّدة	القيمة المُحدَّدة (specified value) لإحدى خاصيات لغة CSS هي القيمة المضبوطة لتلك الخاصية، سواءً من صفحة الأنماط مباشرةً، أو من العنصر الأب.
القيمة المستخدمة	القيمة المستخدمة (used value) لإحدى خاصيات لغة CSS هي القيمة النهائية لتلك الخاصية بعد إجراء جميع الحسابات اللازمة.
القيمة الابتدائية	القيمة الابتدائية (initial value) التي نضعها في صفحات جميع خاصيات لغة CSS لها معانٍ مختلفة للخاصيات التي يمكن أن ترث القيم والتي لا يمكن أن ترث القيم.

مصادر ومواصفات

هذا الدليل مستقى من عدّة مصادر؛ وحاولنا في هذا الدليل أخذ المعلومات التقنية المهمة من المعايير والمواصفات لكن مع تبسيطها وإيضاحها بما يلزم ليسهل فهمها:

• مسودة CSS Basic User Interface Level 4.
• مسودة CSS Text Level 4.
• مسودة CSS Color Level 4.
• مسودة CSS Image Values and Replaced Content Level 4.
• مواصفة Media Queries Level 4.
• مواصفة CSS Cascading and Inheritance Level 4.
• مسودة Selectors Level 4.
• مسودة CSS Pseudo-Elements Level 4.
• مواصفة CSS Backgrounds and Borders Module Level 3.
• مواصفة CSS Backgrounds and Borders Module Level 3.
• مسودة CSS basic box model.
• مواصفة CSS Cascading and Inheritance Level 3.
• مواصفة CSS Color Module Level 3.
• مسودة CSS3 Generated and Replaced Content Module.
• مواصفة CSS Fonts Module Level 3.
• مسودة CSS Generated Content for Paged Media Module.
• مواصفة Media Queries.
• مواصفة Multi-column Layout.
• مسودة CSS Paged Media Module Level 3.
• مواصفة Selectors Level 3.
• مسودة CSS Basic User Interface Module Level 3.
• مواصفة CSS Backgrounds and Borders Module Level 3.
• مواصفة CSS Backgrounds and Borders Module Level 3.
• مواصفة ‎CSS Level 2 (Revision 1)‎.
• مواصفة CSS Level 1.
• توثيق CSS في شبكة MDN.
• توثيق CSS في موقع Codrops.