CSS

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث

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

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

ما هي لغة 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 بقراءة:

الانتقالات

الخاصية الوصف
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> الذي يُمثِّل تدرجًا لونيًا بين لونين أو أكثر.

أنواع البيانات الفرعية:

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 لها معانٍ مختلفة للخاصيات التي يمكن أن ترث القيم والتي لا يمكن أن ترث القيم.

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

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

مجلوبة من "https://wiki.hsoub.com/index.php?title=CSS&oldid=32460"