تقدم لكم مدونه python0303 ملخص لأهم اكواد css لافادتكم

اهم اكواد لغة CSS

لغة HTML هي التي تصف المحتوى للمتصفح ف ما أهمية لغة CSS ؟ لغة CSS هي التي تتحكم في كيفية ظهور المحتوى على المتصفح من حيث حجم الخط او اللون ... الخ.

وهنا سوف أقوم بشرح اهم اكواد CSS التي يمكن ان نستخدمها اثناء تعلم لغة HTML

وهنا سوف أقوم بشرح اهم اكواد CSS التي يمكن ان نستخدمها اثناء تعلم لغة HTML

1- التحكم في حجم الخط

font-size: 18px;

2- التحكم في لون الخط

color: red;

3- التحم في لون خلفية العنصر

background-color: blue;

4- التحكم في مكان الخط

text-align: center;

:هذة هي اهم الاكواد

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

الخاصية	الوصف
`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-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)، أو سيُعرَض ما يزيد من محتوى العنصر الكتلي فوقه أو تحته.

الخاصية	الوصف
`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) ضمن العنصر.

الخاصية	الوصف
`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) هي آخر سطر من الفقرة الذي يظهر بمفرده في أعلى الصفحة أو العمود.

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

القائمة الرئيسية

الصفحات

ملخص اهم اكواد CSS عربي

تقدم لكم مدونه python0303 ملخص لأهم اكواد css لافادتكم

اهم اكواد لغة CSS

1- التحكم في حجم الخط

2- التحكم في لون الخط

3- التحم في لون خلفية العنصر

4- التحكم في مكان الخط

ما هي لغة CSS؟

استخدام لغة CSS

الألوان

الخلفيات

الإطارات

شكل الإطار

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

موضع العناصر

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

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

الهوامش

الحواشي

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

تخطيط Flex Box

الخطوط

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

القوائم

الجداول

الحركات

الانتقالات

التحويلات

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

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

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

المُرشِّحات

تخطيط Grid

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

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

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

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

قواعد @

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

القيم في لغة CSS

أخر المواضيع من قسم : ملخصات css مهمة

تعليقات

إرسال تعليق

الخاصية	الوصف
`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)، مما يسمح بتعريف عدد كبير من الأعمدة والأسطر التي لها نمط تكرار معيّن بسهولة.

الخاصية	الوصف
محددات الأنواع	مُحدِّد النوع (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.

العنصر	الوصف
`‎--*‎`	أسماء الخاصيات التي تُسبَق بشرطتين `--`، مثل `‎--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 تسمح للمطورين بأخبار المتصفحات ما هي التغييرات المتوقع إجراؤها على العنصر، لكي يتمكن المتصفح من ضبط تحسينات الأداء قبل حدوث التغيير، وهذه التحسينات ستزيد من استجابة الصفحة عبر القيام بالحسابات اللازمة قبل وقوع التغيير.

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