wesamdev

افلام هندية$type=sticky$count=4$show=home

$show=home

|روبوتات_$type=slider$source=random-posts$snippet=hide$cate=20$show=home

|اضافات بلوجر$type=three$m=0$rm=0$h=400$c=3$show=home

$show=home

wesamdev

بنية شيفرات

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

بنية شيفرات

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

تُستخدَم CSS من أغلبية مواقع الويب لإنشاء صفحات ويب جذابة وواجهات سهلة الاستخدام لتطبيقات الويب، وتُستعمَل عادةً مع لغتَيHTML و JavaScript.

الغرض الرئيسي من لغة 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>.
<linkhref="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 ودوالها، منظمةً حسب وظيفتها ليسهل عليك الوصول إلى مبتغاك.

  


الألوان


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


الخلفيات


  1. background 

    الخاصية  background المختصرة في CSS تسمح لنا بتعديل خيارات تنسيق الخلفية كلها دفعةً واحدةً، بما في ذلك اللون أو الصورة، والمبدأ والحجم، وطريقة التكرار، وغير ذلك من الميزات.

    يمكن استخدام الخاصية background لضبط قيم خاصية أو أكثر من الخاصيات الآتية: background-clip، و background-color، و background-image، و background-origin، وbackground-position، و background-repeat، و background-size، و background-attachment.

  2. background-attachment

    تُحدِّد إذا كان موضع الصورة (المُحدَّدة عبر الخاصية background-image) ثابتًا (fixed) ضمن إطار العرض (viewport) أو كان سيُمرَّر عند التمرير في العنصر (أو الصفحة) الحاوي له.

  3. background-blend-mode

    تصف كيف يجب أن تمتزج صور الخلفية مع بعضها بعضًا ومع لون الخلفية المُحدَّد للعنصر .

  4. background-clip 

    تُحدِّد كيف أين ستتوقف خلفية العنصر على حدود العنصر، سواءً كانت الخلفية لونًا <color> أو صورةً <image>.

  5. background-color

    تضبط لون الخلفية لأحد العناصر، ويكون لون الخلفية قيمةً لونيةً<color>.

  6. background-image 

    تضبط صورةً أو أكثر على أنها خلفية للعنصر.

  7. background-origin 

    تُحدِّد مبدأ صورة الخلفية المُحدَّدة عبر الخاصية background-image.

  8. background-position 

    تضبط الموضع المبدئي لكل صورة خلفية، وذلك نسبةً إلى المبدأ المُعرَّف في الخاصية background-origin.

  9. background-repeat 

    تُعرِّف كيف ستتكرر صورة الخلفية؛ إذ يمكن أن تتكرر صورة الخلفية على المحور الأفقي، أو على المحور الرأسي، أو على كلا المحوري، ويمكن ألّا تتكرر أبدًا.

  10. background-size 

    تُحدِّد أبعاد صورة الخلفية للعنصر؛ ويمكن أن تُترَك الأبعاد الابتدائية للصورة، أو تُغيّر إلى أبعاد جديدة، أو يمكن ملء المساحة المتوافرة بها مع الحفاظ على نسبة الأبعاد.

  11. box-shadow 

    تصف تأثير الظلال على العنصر، ويمكن إضافة ظل أو أكثر باستخدام هذه الخاصية.

 


الإطارات



  1. border

    الخاصية border في CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات التي تتحكم بإطار العنصر في آنٍ واحد، وهي: border-color و border-style و border-width، وكما في جميع الخاصيات المختصرة، أيّ قيمة غير مُحدِّدة سيُعاد ضبطها إلى قيمتها الابتدائية، أضف إلى ذلك أنَّ الخاصية border لا يمكن أن تُستخدَم لتحديد قيمة للخاصية border-image وإنما ستضبِط قيمتها إلى القيمة الابتدائية none.

  2. border-bottom

    الخاصية border-bottom في CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات border-bottom-color و border-bottom-style و border-bottom-width، هذه الخاصيات تصف كيفية عرض الإطار border السفلي للعنصر.

  3. border-bottom-color

    تُحدِّد لون الإطار السفلي الخاص بالعنصر. لاحظ أنَّه في أغلبية الحالات يُفضَّل استخدام خاصيات CSS المختصرة مثل border-color أو border-bottom.

  4. border-bottom-style

    تُحدِّد شكل خط الإطار السفلي الخاص بالعنصر.

  5. border-bottom-width

    تضبط عرض الإطار السفلي للعنصر.

  6. border-color

    تُحدِّد لون إطار العنصر على جميع وجوهه: العلوي (border-top-color) والأيمن (border-right-color) والسفلي (border-bottom-color) والأيسر (border-left-color).

  7. border-image

    تسمح برسم صورة على إطار العنصر، وهذا يجعل إنشاء عناصر لها مظهر مخصص أمرًا سهلًا. ستُستخدَم الخاصية border-image بدلًا من أشكال الإطارات التي يمكن تعريفها عبر الخاصية border-style.

  8. border-image-outset

    تُحدِّد كم ستمتد صورة الإطار بعد الحافة الخارجية للإطار.

  9. border-image-repeat

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

  10. border-image-slice

    تُقسِّم الصورة المُحدَّدة عبر الخاصية border-image-source إلى تسع مناطق: الأركان الأربعة، والحواف الأربع، والوسط.

  11. border-image-source

    تُعرِّف صورةً <image> لتُستخدَم بدلًا من الإطار، وإذا ضُبِطَت هذه الخاصية إلى none، فسيُستخدَم الشكل المُعرَّف في الخاصية border-style.

  12. border-image-width

    تُعرِّف عرض صورة الإطار بتحديد بعدها عن حافة الإطار الخارجية، وإذا كانت قيمة الخاصية border-image-width أكبر من قيمة الخاصية border-width، فستمتد صورة الإطار إلى ما بعد حافة الحاشية (padding) أو حافة المحتوى (content).

  13. border-left

    الخاصية border-left في CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات border-left-color و border-left-style و border-left-width، هذه الخاصيات تصف كيفية عرض الإطارborder الأيسر للعنصر.

  14. border-left-color

    تُحدِّد لون الإطار الأيسر الخاص بالعنصر. لاحظ أنَّه في أغلبية الحالات يُفضَّل استخدام خاصيات CSS المختصرة مثل border-color أو border-left.

  15. border-left-style

    تُحدِّد شكل خط الإطار الأيسر الخاص بالعنصر.

  16. border-left-width

    تضبط عرض الإطار الأيسر للعنصر.

  17. border-right

    الخاصية border-right في CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات border-right-color و border-right-style و border-right-width، هذه الخاصيات تصف كيفية عرض الإطار border الأيمن للعنصر.

  18. border-right-color

    تُحدِّد لون الإطار الأيمن الخاص بالعنصر. لاحظ أنَّه في أغلبية الحالات يُفضَّل استخدام خاصيات CSS المختصرة مثل border-color أو border-right.

  19. border-right-style

    تُحدِّد شكل خط الإطار الأيمن الخاص بالعنصر.

  20. border-right-width

    تضبط عرض الإطار الأيمن للعنصر.

  21. border-style

    تُحدِّد شكل خط الإطار الخاص بالعنصر لجميع وجوهه (الأيمن والأيسر والعلوي والسفلي).

  22. border-top

    الخاصية border-top في CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات border-top-color و border-top-style و border-top-width، هذه الخاصيات تصف كيفية عرض الإطارborder العلوي للعنصر.

  23. border-top-color

    تُحدِّد لون الإطار العلوي الخاص بالعنصر. لاحظ أنَّه في أغلبية الحالات يُفضَّل استخدام خاصيات CSS المختصرة مثل border-color أو border-top.

  24. border-top-style

    تُحدِّد شكل خط الإطار العلوي الخاص بالعنصر.

  25. border-top-width

    تضبط عرض الإطار العلوي للعنصر.

  26. border-width

    الخاصية border-width المختصرة في CSS تضبط عرض إطار العنصر على جميع وجوهه: العلوي (border-top-width) والأيمن (border-right-width) والسفلي (border-bottom-width) والأيسر (border-left-width).

 


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


  1. border-bottom-left-radius

    تضبط تدوير الركن السفلي الأيسر من العنصر.

  2. border-bottom-right-radius

    تضبط تدوير الركن السفلي الأيمن من العنصر.

  3. border-radius

    تسمح لمطوري الويب بتعريف طريقة تدوير أركان الإطار، ويمكن تحديد قيمة واحدة لجعل الأركان دائريةً، أو قيمتين لجعلها على شكل قطع ناقص.

  4. border-top-left-radius

    تضبط تدوير الركن العلوي الأيسر من العنصر.

  5. border-top-right-radius

    تضبط تدوير الركن العلوي الأيمن من العنصر.

  


موضع العناصر


  1. bottom

    الخاصية bottom في CSS تساهم في تحديد الموضع الرأسي لأحد العناصر التي يمكن أن يتغير مكانها (positioned elements)، وليس لهذه الخاصية تأثير في العناصر التي لا يمكن أن يتغير مكانها (non-positioned elements).

  2. clear

    تُحدِّد إذا كان العنصر يمكن أن يكون بجوار العناصر العائمة (floating elements) المجاورة له أو يجب أن يُحرَّك إلى الأسفل (يسمى هذا الفعل بالمصطلح clear)؛ يمكن تطبيق هذه الخاصية على العناصر العائمة وغير العائمة على حدٍ سواء.

  3. display

    تُحدِّد ما هو نوع صندوق العرض الذي سيستخدم مع العنصر. تؤخذ قيمة الخاصية display في HTML من مواصفة HTML أو من صفحة الأنماط الافتراضية في المتصفح أو التابعة للمستخدم، أما القيمة الافتراضية لها في XML هي inline.

  4. float

    تُحدِّد أنَّ العنصر يجب أن يوضع على يسار أو يمين الحاوية التي ينتمي إليها، مما يسمح للنص والعناصر السطرية بالالتفاف حول العنصر، وسيُزال هذا العنصر من الهيكل التنظيمي (flow) العادي للصفحة، لكنه سوف يبقى جزءًا منه (على عكس العناصر ذات الموضع المطلق [absolute]).

  5. left

    الخاصية left في CSS تساهم في تحديد الموضع الأفقي لأحد العناصر التي يمكن أن يتغير مكانها (positioned elements)، وليس لهذه الخاصية تأثير في العناصر التي لا يمكن أن يتغير مكانها (non-positioned elements).

  6. position

    تصف كيف يجب أن يتموضع العنصر في المستند، والخاصيات top و right و bottom و left تُحدِّد المكان النهائي لتلك العناصر.

  7. right

    الخاصية right في CSS تساهم في تحديد الموضع الأفقي لأحد العناصر التي يمكن أن يتغير مكانها (positioned elements)، وليس لهذه الخاصية تأثير في العناصر التي لا يمكن أن يتغير مكانها (non-positioned elements).

  8. top

    الخاصية top في CSS تساهم في تحديد الموضع الرأسي لأحد العناصر التي يمكن أن يتغير مكانها (positioned elements)، وليس لهذه الخاصية تأثير في العناصر التي لا يمكن أن يتغير مكانها (non-positioned elements).

  9. z-index

    تُحدِّد ترتيب العناصر التي يمكن أن يتغير مكانها (positioned elements) على المحور Z، فعندما تتداخل العناصر فستُحدِّد قيمة هذه الخاصية ما هو العنصر الذي سيظهر أعلى بقية العناصر، والعنصر الذي له قيمة z-index أكبر ما يمكن سيظهر في الأعلى

 


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

    خصائص الصندوق
  1. box-sizing

    تُستخدم لتعديل النموذج الصندوقي الافتراضي في CSS (أي CSS box model) المستخدم لحساب عرض وارتفاع العناصر.

  2. height

    تُحدِّد ارتفاع أحد العناصر، وتستخدم هذه الخاصية افتراضيًا لتحديد ارتفاع منطقة المحتوى، لكن إن كانت الخاصية box-sizing مضبوطة إلى border-box فستُحدِّد ارتفاع العنصر بدءًا من الحافة الخارجية للإطار.

  3. max-height

    تضبط الارتفاع الأقصى للعنصر، وهي تمنع القيمة المستخدمة (used value) للخاصية height من أن تتجاوز القيمة المُحدَّدة في الخاصية max-height.

  4. max-width

    تضبط العرض الأقصى للعنصر، وهي تمنع القيمة المستخدمة (used value) للخاصية width من أن تتجاوز القيمة المُحدَّدة في الخاصية max-width.

  5. min-height

    تضبط الارتفاع الأدنى للعنصر، وهي تمنع القيمة المستخدمة (used value) للخاصية height من أن تقل عن القيمة المُحدَّدة في الخاصية min-height.

  6. min-width

    تضبط العرض الأدنى للعنصر، وهي تمنع القيمة المستخدمة (used value) للخاصية width من أن تقل عن القيمة المُحدَّدة في الخاصية min-width.

  7. visibility

    تسمح بإظهار أو إخفاء عنصر دون التأثير بتخطيط المستند، أي أنَّ المساحة ستُحجَز للعناصر سواءً كانت مرئيةً أو لا، ويمكن استخدام هذه الخاصية أيضًا لإخفاء أو إظهار الأعمدة في جدول <table>.

  8. width

    تُحدِّد عرض أحد العناصر، وتستخدم هذه الخاصية افتراضيًا لتحديد عرض منطقة المحتوى (content area)، لكن إن كانت الخاصية box-sizing مضبوطة إلى border-boxفستُحدِّد عرض العنصر بدءًا من الحافة الخارجية للإطار.

   


الهوامش


  1. margin

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

  2. margin-bottom

    تضبط الهامش في الطرف السفلي من العنصر، والقيم الموجبة ستؤدي إلى إبعاد العنصر عمّا جاوره، والقيم السالبة ستقربه منها.

  3. margin-left

    تضبط الهامش في الطرف الأيسر من العنصر، والقيم الموجبة ستؤدي إلى إبعاد العنصر عمّا جاوره، والقيم السالبة ستقربه منها.

  4. margin-right

    تضبط الهامش في الطرف الأيمن من العنصر، والقيم الموجبة ستؤدي إلى إبعاد العنصر عمّا جاوره، والقيم السالبة ستقربه منها.

  5. margin-top

    تضبط الهامش في الطرف العلوي من العنصر، والقيم الموجبة ستؤدي إلى إبعاد العنصر عمّا جاوره، والقيم السالبة ستقربه منها.

  


الحواشي


  1. padding

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

  2. padding-bottom

    تضبط الحاشية (padding) في الطرف السفلي للعنصر؛ وعلى نقيض الهوامش margin، لا يجوز استخدام القيم السالبة للحواشي. ويمكن استخدام الخاصية المختصرة padding لضبط جميع الحواشي على الأطراف الأربعة لأحد العناصر في قاعدة واحدة.

  3. padding-left

    تضبط الحاشية (padding) في الطرف الأيسر للعنصر؛ وعلى نقيض الهوامش margin، لا يجوز استخدام استخدام القيم السالبة للحواشي. ويمكن استخدام الخاصية المختصرة padding لضبط جميع الحواشي على الأطراف الأربعة لأحد العناصر في قاعدة واحدة.

  4. padding-right

    تضبط الحاشية (padding) في الطرف الأيمن للعنصر؛ وعلى نقيض الهوامش margin، لا يجوز استخدام استخدام القيم السالبة للحواشي. ويمكن استخدام الخاصية المختصرة padding لضبط جميع الحواشي على الأطراف الأربعة لأحد العناصر في قاعدة واحدة.

  5. padding-top

    تضبط الحاشية (padding) في الطرف العلوي للعنصر؛ وعلى نقيض الهوامش margin، لا يجوز استخدام استخدام القيم السالبة للحواشي. ويمكن استخدام الخاصية المختصرة padding لضبط جميع الحواشي على الأطراف الأربعة لأحد العناصر في قاعدة واحدة.

  


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


  1. overflow

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

  2. overflow-x

    تُحدِّد إن كان سيتم اقتصاص (clip) المحتوى، أو سيُعرَض شريط تمرير (scroll bar)، أو سيُعرَض ما يزيد من محتوى العنصر الكتلي على يمينه أو يساره.

  3. overflow-y

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

  


تخطيط Flex Box


  1. align-content

    تُعرِّف طريقة توزيع المتصفح للمسافة بين العناصر وحولها على امتداد المحور الثانوي من حاوية flex.

  2. align-items

    تُعرِّف طريقة توزيع المتصفح للمسافة بين العناصر وحولها على امتداد المحور الثانوي من حاوية flex. فهي تعمل كالخاصية justify-content لكن في الاتجاه المعامد.

  3. align-self

    تضبط محاذاة عناصر flex في السطر الحالي متجاوزةً قيمة الخاصية align-items، وإذا كانت حاشية margin أحد العناصر في المحور المعامد مضبوطةً إلى autoفسيتم تجاهل الخاصية align-self.

  4. flex

    تُحدِّد كيف سيتمدد أو يتقلص أحد عناصر flex لكي يملأ المساحة المتوافرة في حاوية flex. هذه الخاصية المختصرة تضبط الخاصيات flex-grow و flex-shrinkو flex-basis.

  5. flex-basis

    تُحدِّد القياس الرئيسي (main size) لأحد عناصر flex، وهذه الخاصية تضبط قياس صندوق المحتوى (content box) إلا إذا حُدِّدَ غير ذلك باستخدام الخاصية box-sizing.

  6. flex-direction

    تُعرِّف ما هو المحور الرئيسي (main axis) في حاوية flex وما اتجاهه (عادي أم معكوس).

  7. flex-flow

    تستعمل لضبط قيمة الخاصيتين flex-direction و flex-wrap.

  8. flex-grow

    تُحدِّد معامل التمدد لأحد عناصر flex، وهي تُحدِّد مقدار المساحة التي يجب أن يأخذها العنصر داخل حاوية flex.

  9. flex-shrink

    تُحدِّد معامل التقلص لأحد عناصر flex، وهي تُحدِّد مقدار المساحة التي يجب أن يأخذها العنصر داخل حاوية flex نسبةً إلى بقية العناصر، وذلك في حال كان العرض الافتراضي للعناصر flex أكبر من الحاوية.

  10. flex-wrap

    تُحدِّد فيما إذا كانت عناصر flex يجب أن تكون محتواةً في سطرٍ وحيد أم يمكن التفافها إلى عدِّة أسطر، وإذا سُمِحَ بالالتفاف (wrap) فيمكننا باستخدام هذه الخاصية تحديد ترتيب تكديس الأسطر.

  11.    


  12. justify-content

    تُعرِّف طريقة توزيع المتصفح للمسافة بين العناصر وحولها على امتداد المحور الرئيسي من حاوية flex.

  13. order

    تُحدِّد ترتيب عناصر flex في الحاوية، إذ ستُرتَّب العناصر ترتيبًا تصاعديًا اعتمادًا على قيمة الخاصية order المُسندَة إليها، والعناصر التي لها نفس القيمة ستُرتَّب وفق ورودها في الشيفرة المصدرية

  


الخطوط


  1. font

    الخاصية font في CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات font-style و font-variant و font-weight و font-size و line-height و font-family، وذلك لتحديد الخط المستخدم في العنصر.

  2. font-family

    تُحدِّد قائمةً تحتوي على نوع خط واحد أو أكثر من أنواع الخطوط الخاصة أو العامة، وذلك لتُطبَّق على العنصر.

  3. font-kerning

    تتحكم باستخدام معلومات تآلف الأحرف (kerning information) المُخزّنة في الخط المستخدم.

  4. font-size

    تضبط حجم الخط، وضبط حجم الخط قد يؤدي إلى تغيير حجم عناصر أخرى، لأن حجم الخط سيُستخدَم لحساب قيمة الأطوال <length> ذات الواحدة em و ex.

  5. font-size-adjust

    الخاصية font-size-adjust في CSS تقول أنَّ حجم الخط يجب أن يكون مُختارًا اعتمادًا على ارتفاع الأحرف الصغيرة (lowercase) بدلًا من ارتفاع الأحرف الكبيرة؛ وهذا مُفيدٌ لأنَّ وضوح الخطوط وسهولة قراءتها -خصوصًا إذا كان حجمها صغيرًا- سيُحدَّد بحجم الأحرف ذات الحالة الصغيرة وليس الكبيرة.

  6. font-stretch

    الخاصية font-stretch في CSS تختار نسخةً ضيقةً (condensed) أو عاديةً (normal) أو موسعةً (expanded) من الخط.

  7. font-style

    تُحدِّد إن كان يجب أن يكون شكل الخط عاديًا (normal) أو مائلًا (italic) أو منحرفًا (oblique). وسيختار المتصفح النسخة الأنسب من نوع الخط font-family.

  8. font-weight

    تُحدِّد «وزن» (weight، أو ثخانة) الخط؛ والأوزان المتاحة للاستخدام في خطٍ ما تعتمد على نوع الخط المستخدم font-family، إذ إنَّ بعض الخطوط لا توفِّر إلا نسختين هما normal و bold.

  9. line-height

    تضبط المسافة المستخدم للأسطر، كما في النصوص؛ أما على العناصر الكتلية (block elements) فهي تُحدِّد الارتفاع الأدنى للصناديق النصية (line boxes) ضمن العنصر.

  


النصوص

  1. direction


    تضبط اتجاه النص، ونستخدم القيمة rtl معها للإشارة إلى اللغات التي تُكتَب من اليمين إلى اليسار مثل اللغة العربية، و ltr للغات التي تُكتَب من اليسار إلى اليمين مثل اللغة الإنكليزية. لاحظ أنَّ اتجاه النص يُعرَّف عادةً باستخدام الخاصية dir على عنصر <html> لكامل المستند، وليس باستخدام الخاصية direction.

  2. letter-spacing

    تُحدِّد ما هو التباعد بين الأحرف النصية.

  3. line-break

    تُحدِّد سلوك المتصفح في الانتقال إلى سطرٍ جديد عند التعامل مع علامات الترقيم والرموز.

  4. overflow-wrap

    تُحدِّد إذا كان على المتصفح الانتقال إلى سطر جديد ضمن الكلمات نفسها لمنع النص من تجاوز حدود صندوق المحتوى للعنصر الحاوي عليه. وعلى النقيض من الخاصية word-break، ستنتقل الخاصيةoverflow-wrap إلى سطرٍ جديد إذا لم يتمكن المتصفح من وضع الكلمة في سطرٍ بمفردها دون تجاوز حدود صندوق المحتوى.

  5. tab-size

    تُستعمل لتخصيص عرض محرف الجدولة (tab) الذي له الرمز U+0009 في يونيكود.

  6. text-align

    تصف كيف تكون محاذاة العناصر السطرية مثل النصوص في الحاويات الكتلية؛ لاحظ أنَّ الخاصية text-align لا تتحكم بمحاذاة العناصر الكتلية، وإنما تتحكم بمحاذاة بالمحتوى السطري الموجود داخلها.

  7. text-align-last

    تصف كيف تكون محاذاة آخر سطر نصي.

  8. text-decoration

    تُحدِّد شكل خطوط الزخرفة (decorative lines) المستخدمة على النص؛ وهي خاصيةٌ مختصرة لضبط قيمة أكثر من خاصية عن خطوط الزخرفة بآنٍ واحد، وهي تتضمن text-decoration-line و text-decoration-color و text-decoration-style'.

  9. text-decoration-color

    تُحدِّد لون خطوط الزخرفة (decorative lines) المستخدمة على النص والمضبوطة عبر الخاصية text-decoration-line؛ وهذا يتضمن الأسطر التي تعلو الخط أو تظهر أدناه أو تمر عبره أو الخطوط المموجة (التي تُشير عادةً إلى أنَّ الكلام فيه خطأ إملائي على سبيل المثال)؛ وسيُطبَّق اللون المضبوط عبر هذه الخاصية على جميع خطوط الزخرفة المُحدَّدة على العنصر.

  10. text-decoration-line

    تُحدِّد نوع خطوط الزخرفة (decorative lines) المستخدمة على النص. إذا كنت ستضبط عدِّة خاصيات لتحديد شكل خطوط الزخرفة، فمن المستحسن حينئذٍ استخدام الخاصية المختصرة text-decoration.

  11. text-decoration-style

    تُحدِّد شكل خطوط الزخرفة (decorative lines) المستخدمة على النص (المضبوطة عبر الخاصية text-decoration-line). إذا كنت ستضبط عدِّة خاصيات لتحديد شكل خطوط الزخرفة، فمن المستحسن حينئذٍ استخدام الخاصية المختصرة text-decoration.

  12. text-emphasis

    تُحدِّد علامة التوكيد (emphasis mark) المستخدمة على كل محرف نصي في العنصر باستثناء الفراغات ومحارف التحكم (control chars، مثل محرف السطر الجديد، ومحرف العودة إلى بداية السطر)؛ وهي خاصيةٌ مختصرة لضبط قيمة أكثر من خاصية عن ضبط علاماتkbd التوكيد معًا، وهي تتضمن text-emphasis-style و text-emphasis-color.

  13. text-emphasis-color

    تُحدِّد اللون المستخدم لرسم علامة التوكيد (emphasis mark) المستخدمة على كل محرف نصي في العنصر؛ يمكن ضبط قيمة هذه الخاصية باستعمال الخاصية المختصرة text-emphasis.

  14. text-emphasis-position

    تُحدِّد موضع رسم علامة التوكيد (emphasis mark) المستخدمة على كل محرف نصي في العنصر؛ وقد تؤدي هذه الخاصية إلى تغيير ارتفاع السطر إن لم يتسع لعلامة التوكيد.

  15. text-emphasis-style

    تُحدِّد نوع علامة التوكيد (emphasis mark) المستخدمة على كل محرف نصي في العنصر باستثناء الفراغات ومحارف التحكم (control chars، مثل محرف السطر الجديد، ومحرف العودة إلى بداية السطر)؛ يمكن ضبط قيمة هذه الخاصية باستعمال الخاصية المختصرة text-emphasis.

  16. text-indent

    تُحدِّد مقدار المسافة البدائة التي توضع قبل أسطر النص الموجودة في عنصر كتلي؛ وهذه الخاصية تتحكم بالمسافة البادئة لأوّل سطر افتراضيًا، لكن يمكن استخدام الكلمتين المحجوزتين hanging و each-line لتغيير هذا السلوك (انظر «دعم المتصفحات»).

  17. text-justify

    تُعرِّف طريقة توزيع النص إذا كانت الخاصيةtext-align مضبوطةً إلى القيمة justify.

  18. text-shadow

    تضيف تأثير الظلال على النص، وتقبل تحديد أكثر من ظل (يُفصَل بين قيمها بفاصلة)، وسيُطبَّق الظل على النص وعلى خطوط الزخرفة text-decoration التابعة للعنصر.

  19. text-transform

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

  20. white-space

    الخاصية white-space في CSS تُحدِّد كيف ستُعامل الفراغات ضمن العنصر؛ أما إذا كنتَ تبحث عن طريقة تقسيم الكلمات الطويلة، فانظر إلى خاصية overflow-wrap و word-break.

  21. word-break

    تُحدِّد إذا كان على المتصفح الانتقال إلى سطر جديد ضمن الكلمات نفسها لمنع النص من تجاوز حدود صندوق المحتوى للعنصر الحاوي عليه. وعلى النقيض من الخاصية overflow-wrap، ستنتقل الخاصيةword-break إلى سطرٍ جديد عند المكان الذي كان سيتجاوز النص فيه حدود صندوق المحتوى، حتى لو كان وضع الكلمة في سطرٍ بمفردها سيؤدي إلى عدم تجاوزها حدود صندوق المحتوى.

  22. word-spacing

    تُحدِّد كيف سيكون التباعد بين الكلمات والوسوم.

   


القوائم


  1. counter-increment

    تُزيد أو تُنقِص قيمة أحد عدّادات CSS بقيمة معيّنة، ويمكن إعادة تعيين العدّاد إلى رقم معيّن باستخدام الخاصية counter-reset.

  2. counter-reset

    تُعيد ضبط قيمة أحد عدّادات CSS إلى قيمة معيّنة، ويمكن زيادة أو إنقاص قيمة العداد باستخدام الخاصية counter-increment.

  3. list-style

    الخاصية list-style في CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصياتlist-style-type و list-style-image و list-style-position.

  4. list-style-image

    تُحدِّد صورةً لتُستخدَم للإشارة إلى عناصر القائمة. من المستحسن عادةً استخدام الخاصية المختصرة list-style لضبط قيمة هذه الخاصية.

  5. list-style-position

    تُحدِّد مكان إشارة عناصر القائمة. ومن المستحسن عادةً استخدام الخاصية المختصرة list-style.

  6. list-style-type

    تُحدِّد شكل الإشارة إلى عناصر القائمة.


  

الجداول


  1. border-collapse

    تُحدِّد إذا كان إطار الجدول منفصلًا عن إطار الخلايا (أي لكلٍ واحدٍ منها إطارٌ خاصٌ به) أو كان مدمجًا مع إطار الخلايا (أي تتشارك الخلايا المتجاورة الإطار مع بعضها بعضًا).

  2. border-spacing

    تُحدِّد المسافة بين إطارات خلايا الجداول المتجاورة. لن يكون لهذه الخاصية أثرٌ إلا إذا كانت قيمة الخاصية border-collapse هي separate.

  3. caption-side

    تُحدِّد موضع لافتة الجدول المُعرَّفة عبر العنصر<caption>.

  4. empty-cells

    تُحدِّد كيف يجب أن يعرض المتصفح خلفية وإطر خلايا الجداول <table> التي ليس فيها محتوى ظاهر. لن يكون لهذه الخاصية أثرٌ إلا إذا كانت الخاصية border-collapse مضبوطةً إلى separate.

  5. table-layout

    تُحدِّد الخوارزمية التي تُستخدم لضبط تخطيط خلايا وأسطر وأعمدة الجداول <table>.

  6. vertical-align

    تُحدِّد المحاذاة الرأسية للعناصر السطرية أو خلايا الجداول.

  

الحركات


  1. @keyframes

    القاعدة@keyframes في CSS تتحكم بالخطوات البينية (intermediate steps) في سلسلة حركات CSS عبر تعريف أنماط للإطارات المفتاحية (keyframes)، مما يعطينا تحكمًا كبيرًا في أنماط العنصر في الخطوات البينية بالمقارنة مع الانتقالات transition.

  2. animation

    الخاصية animation في CSS هي خاصية مختصرة تضبط قيم مختلف خاصيات CSS المتعلقة بالحركات وهي animation-name و animation-duration وanimation-timing-function و animation-delay و animation-iteration-count و animation-direction و animation-fill-mode وanimation-play-state.

  3. animation-delay

    تُحدِّد متى ستبدأ الحركة، ويمكنك تأخير بدء الحركة فترةً من الزمن، أو البدء مباشرةً، أو البدء مباشرةً لكن مع تجاوز جزء من دورة الحركة.

  4. animation-direction

    تُحدِّد إذا كان يجب تشغيل الحركة إلى الأمام (forwards) أو إلى الخلف (backwards) أو التبديل بينهما.

  5. animation-duration

    تُحدِّد الزمن اللازم لإكمال دورة كاملة من الحركة.

  6. animation-fill-mode

    تُحدِّد كيف يجب أن تُطبِّق حركات CSS قيم الخاصيات إلى العنصر قبل وبعد تنفيذ الحركة.

  7. animation-iteration-count

    تُحدِّد عدد مرات تكرار دورة الحركة حتى توقف الحركة، وإذا حُدِّدت أكثر من قيمة فسيتم استخدام القيمة التي تلي القيمة التي طُبِّقَت سابقًا عند إعادة تشغيل الحركة، إلى أن نعود إلى القيمة الأولى بعد استخدام آخر قيمة.

  8. animation-name

    تستعمل لتحديد أسماء الحركات التي ستُطبَّق على العنصر، وكل اسم يجب أن يُشير إلى قاعدة @keyframes التي تُعرِّف قيم الخاصيات اللازمة للحركة.

  9. animation-play-state

    تُحدِّد إذا كانت الحركة تعمل أو متوقفة مؤقتًا، ويمكن الحصول على قيمة هذه الخاصية عبر JavaScript لمعرفة حالة الحركة، ويمكن أيضًا استعمال JavaScript لضبط قيمتها لتوقيف الحركة مؤقتًا أو استئنافها.

  10. animation-timing-function

    تستعمل لوصف كيف ستتأثر القيم الوسطية لخاصيات CSS بالحركة، أي أنها تسمح لك بتحديد ما هو منحني التسارع (acceleration curve) للحركة خلال دورة واحدة.

 

الانتقالات


  1. transition

    خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات transition-property و transition-duration و transition-timing-function و transition-delay.

  2. transition-delay

    تُحدِّد الزمن الذي يجب انتظاره بين وقوع الحدث الذي سيؤدي إلى بدء تأثير الانتقال وبين بداية التأثير.

  3. transition-duration

    تُحدِّد الزمن الذي سيستغرقه تأثير الانتقال للوصول إلى القيمة النهائية للخاصية، والقيمة الافتراضية0sلن تؤدي إلى حدوث تأثير انتقال أبدًا.

  4. transition-property

    تستعمل لتحديد أسماء خاصيات CSS التي ستخضع لتأثير الانتقال.

  5. transition-timing-function

    تستعمل لوصف كيف ستتأثر القيم الوسطية لخاصيات CSS بتأثير الانتقال، أي أنها تسمح لك بتحديد ما هو منحني التسارع (acceleration curve) لتأثير الانتقال، لذا ستكون سرعة التأثير متفاوتة خلال مدته.

  

التحويلات


  1. backface-visibility

    تُحدِّد فيما إذا كان الوجه الخلفي للعنصر ظاهرًا للمستخدم، ويكون الوجه الخلفي للعنصر ذو خلفيةٍ شفافة، ويسمح بعرض صورة معكوسة (mirrored) للوجه الأمامي للعنصر.

  2. perspective

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

  3. perspective-origin

    تُحدِّد الموضع الذي ينظر منه المستخدم إلى العنصر، وتُستخَدم قيمة هذه الخاصية كنقطة التلاشي (vanishing point) من الخاصية perspective.

  4. transform

    تسمح لنا بتحويل شكل العناصر في الفضاء ثنائي أو ثلاثي الأبعاد، وبالتالي يمكن نقل العنصر أو تدويره أو إعادة تحجيمه أو جعله منحرفًا.

  5. transform-origin

    تسمح بتحديد مبدأ الإحداثيات للتحويلات التي ستجرى على العنصر، فمثلًا سيكون مبدأ إحداثيات العنصر الافتراضي عند تطبيق الدالة rotate()‎ هو مركز العنصر.

  6. transform-style

    تُحدِّد إن كانت العناصر الأبناء للعنصر الحالي موجودة في الفضاء ثلاثي الأبعاد أو كانت مسطحةً (flattened) في مستوى العنصر الأب؛ وإذا كانت مسطحةً فهذا يعني أنها لن تكون موجودة في فضاءٍ ثلاثي الأبعاد خاصٍ بها.

 

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


  1. caret-color

    تُحدِّد ما هو لون مؤشر الإدخال النصي (وهي الإشارة التي تظهر للإشارة إلى موضع الحرف النصي الذي سيدخله المستخدم) ضمن عنصر مثل <input> أو أي عنصر آخر له الخاصية contenteditable. الشكل الافتراضي لمؤشر الإدخال هو خطٌ رأسيٌ يومض لتسهيل ملاحظته، ويكون لونه الافتراضي هو الأسود، لكن يمكن تعديله باستخدام هذه الخاصية.

  2. cursor

    تُحدِّد ما هو شكل مؤشر الفأرة الذي سيُعرَض عندما تمر الفأرة فوق العنصر.

  3. outline

    الخاصية outline في CSS هي خاصية مختصرة تُستخدَم لضبط خاصية أو أكثر من الخاصيات outline-style و outline-width و outline-color في آنٍ واحد.

  4. outline-color

    تضبط لون حدود outline العنصر، التي هي الخطوط التي تُرسَم خارج إطار العنصر border. من المستحسن استخدام الخاصية المختصرة outline عند ضبط مظهر حدود العنصر، لأنها تضبط عدِّة خاصيات في آنٍ واحد.

  5. outline-offset

    تضبط المسافة التي تبعد فيها حدودoutline العنصر عن حافته أو إطاره border، والحدود هي الخطوط التي تُرسَم خارج إطار العنصر border. المسافة التي ستوضع بين إطار العنصر وحدوده هي مسافة ذات خلفية شفافة، أي ستُعرَض خلفية العنصر الأب فيها.

  6. outline-style

    تضبط شكل حدود outline العنصر، التي هي الخطوط التي تُرسَم خارج إطار العنصر border. من المستحسن استخدام الخاصية المختصرة outline عند ضبط مظهر حدود العنصر، لأنها تضبط عدِّة خاصيات في آنٍ واحد.

  7. outline-width

    تضبط عرض (أو ثخن) حدود outline العنصر، التي هي الخطوط التي تُرسَم خارج إطار العنصر border. من المستحسن استخدام الخاصية المختصرة outline عند ضبط مظهر حدود العنصر، لأنها تضبط عدِّة خاصيات في آنٍ واحد.

  8. resize

    تُحدِّد إذا كان تغيير حجم العنصر، وفي أيّ اتجاه.

  9. text-overflow

    تُحدِّد ماذا سيحدث عند عدم عرض المحتوى الزائد عن صندوقه، فيمكن أن يتم اقتصاص المحتوى، أو عرض ثلاث نقط (المحرف … رمزه U+2026)، أو عرض سلسلة نصية خاصة.



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


  1. column-count

    تُحدِّد ما هو عدد الأعمدة التي سينقسم العنصر إليها.

  2. column-fill

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

  3. column-gap

    تضبط حجم الفراغ بين الأعمدة في العناصر متعددة الأعمدة (multi-column elements).

  4. column-rule

    الخاصية column-rule المختصرة في CSS تُحدِّد شكل الخط العمودي (rule) الذي سيُرسَم بين الأعمدة في العناصر متعددة الأعمدة. هذه الخاصية ستضبط قيمة الخاصيات column-rule-width و column-rule-style و column-rule-color في خاصيةٍ واحدة.

  5. column-rule-color

    تُحدِّد لون الخط العمودي (rule) الذي سيُرسَم بين الأعمدة في العناصر متعددة الأعمدة.

  6. column-rule-style

    تُحدِّد شكل الخط العمودي (rule) الذي سيُرسَم بين الأعمدة في العناصر متعددة الأعمدة.

  7. column-rule-width

    تُحدِّد عرض (أو ثخن) الخط العمودي (rule) الذي سيُرسَم بين الأعمدة في العناصر متعددة الأعمدة.

  8. column-span

    تسمح بأن يمتد أحد العناصر على جميع الأعمدة وذلك عند ضبط القيمة all لها.

  9. column-width

    تُحدِّد ما هو العرض الأدنى للأعمدة التي سينقسم العنصر إليها، وهذه القيمة سيستعملها المتصفح لمعرفة عدد الأعمدة الكلي.

  10. columns

    خاصية مختصرة تسمح لنا بضبط قيمة الخاصيتين column-width و column-count في آنٍ واحد.

  11. orphans

    تُحدِّد العدد الأدنى للأسطر النصية الموجودة في حاوية كتلية التي يجب أن تظهر في أسفل الصفحة أو العمود. في التنسيق الطباعي، تكون اليتامى (orphans) هي أول سطر من الفقرة الذي يظهر بمفرده في أسفل الصفحة أو العمود.

  12. widows

    تُحدِّد العدد الأدنى للأسطر النصية الموجودة في حاوية كتلية التي يجب أن تظهر في أعلى الصفحة أو العمود. في التنسيق الطباعي، تكون الأرامل (widows) هي آخر سطر من الفقرة الذي يظهر بمفرده في أعلى الصفحة أو العمود.


 

المُرشِّحات


  1. filter

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

   

تخطيط Grid


  1. 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)، وكل ذلك في قاعدة واحدة.

  2. grid-area

    الخاصية grid-area في CSS هي خاصية مختصرة تضبط قيمة الخاصيات grid-row-start و grid-column-start و grid-row-end و grid-column-end، مُحدَّدةً أبعاد عنصر grid وموضعه.

  3. grid-auto-columns

    تضبط أبعاد مسارات الأعمدة المُنشأة ضمنيًا.

  4. grid-auto-flow

    تضبط كيف ستعمل خوارزمية تحديد مواضع عناصر grid التلقائية.

  5. grid-auto-rows

    تضبط أبعاد مسارات الأسطر المُنشأة ضمنيًا.

  6. grid-column

    الخاصية grid-column في CSS هي خاصية مختصرة تضبط قيمة الخاصيتينgrid-column-start و grid-column-end التي تُحدِّد أبعاد عنصر grid ومكانه في العمود.

  7. grid-column-end

    تستعمل لضبط مكان نهاية عنصر grid ضمن عمود grid بتحديد رقم العمود أو الامتداد أو جعل موضع العنصر تلقائيًا.

  8. grid-column-gap

    تُحدِّد المسافة التي تفصل بين الأعمدة في حاوية gird.

  9. grid-column-start

    تستعمل لضبط مكان بداية عنصر grid ضمن عمود grid بتحديد رقم العمود أو الامتداد أو جعل موضع العنصر تلقائيًا.

  10. grid-gap

    الخاصية grid-gap في CSS هي خاصيةٌ مختصرةٌ تضبط قيمة الخاصيتين grid-row-gap و grid-column-gap، وهي تُحدِّد المسافة التي تفصل بين الأسطر والأعمدة في حاوية gird.

  11. grid-row

    الخاصية grid-row في CSS هي خاصية مختصرة تضبط قيمة الخاصيتين grid-row-start و grid-row-end التي تُحدِّد أبعاد عنصر grid ومكانه في السطر.

  12. grid-row-end

    تستعمل لضبط مكان نهاية عنصر grid ضمن سطر grid بتحديد السطر أو الامتداد أو جعل موضع العنصر تلقائيًا.

  13. grid-row-gap

    تُحدِّد المسافة التي تفصل بين الأسطر في حاوية gird.

  14. grid-row-start

    تستعمل لضبط مكان بداية عنصر grid ضمن سطر grid بتحديد السطر أو الامتداد أو جعل موضع العنصر تلقائيًا.

  15. grid-template

    الخاصية grid-template في CSS هي خاصية مختصرة تستعمل لضبط قيم للخاصيات grid-template-rows و grid-template-columns و grid-template-areas.

  16. grid-template-areas

    تضبط أسماء مناطق gird (أي grid areas).

  17. grid-template-columns

    تضبط أسماء وأبعاد مسارات الأعمدة في تخطيط Grid.

  18. grid-template-rows

    تضبط أسماء وأبعاد المسارات السطرية في تخطيط Grid.

  19. repeat()‎

    الدالة repeat()‎ في CSS تُكرِّر جزءًا من قائمة المسارات (track list)، مما يسمح بتعريف عدد كبير من الأعمدة والأسطر التي لها نمط تكرار معيّن بسهولة.


 

المُحدِّدات


  1. محددات الأنواع

    مُحدِّد النوع (type selector) في CSS يُطابِق العناصر وفق اسم العقدة، أي أنه يُحدِّد جميع العناصر التي لها نوع معيّن في المستند.

  2. محددات الأصناف

    مُحدِّد الصنف (class selector) في CSS يُطابِق العناصر وفق قيمة الخاصية class التابعة لها.

  3. محددات المُعرِّفات

    مُحدِّد المُعرِّف (ID selector) في CSS يُطابِق العناصر وفق قيمة الخاصية ID التابعة لها.

  4. المحدد العام

    المُحدِّد العام (universal selector) في CSS يطابق جميع العناصر.

  5. محددات الخاصيات

    مُحدِّد الخاصيات (attribute selector) في CSS يُطابِق العناصر إذ وجدت فيها خاصيةٌ ما أو كانت تلك الخاصية تملك قيمةً معيّنةً.

  6. محددات العناصر الأخوة المتجاورة

    مُحدِّد العناصر الأخوة المتجاورة (adjacent sibling combinator) في CSS رمزه + ويفصل بين مُحدِّدين، ويطُابِق العنصر الثاني إذا أتى مباشرةً بعد العنصر الأول وكان كلا العنصرين ابنًا لعنصر أب مشترك.

  7. محددات العناصر الأخوة

    مُحدِّد العناصر الأخوة العامة (general sibling combinator) في CSS رمزه ~ ويفصل بين مُحدِّدين، ويطُابِق العنصر الثاني إذا أتى بعد العنصر الأول (وليس بالضرورة أن يأتي بعده مباشرةً)، وكان كلا العنصرين ابنًا لعنصر أب مشترك.

  8. محددات العناصر الأبناء

    مُحدِّد العناصر الأبناء (child combinator) في CSS رمزه ‎>‎ ويفصل بين مُحدِّدين، ويطُابِق العنصر الثاني إذا كان ابنًا للعنصر الأول.

  9. محددات العناصر السليلة

    مُحدِّد العناصر السليلة (descendant combinator) في CSS الذي يُمثَّل عادةً بفراغٍ واحد ويفصل بين مُحدِّدين، ويطُابِق العنصر الثاني إذا كان ابنًا للعنصر الأول.

   


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


  1. ‎:active

    العناصر (مثل الأزرار) التي جرى تفعيلها من المستخدم. وعند استخدام الفأرة سيبدأ «تفعيل» العنصر عندما يضغط المستخدم على الزر الرئيسي لها وينتهي عند إفلات الضغط على ذاك الزر.

  2. ‎:checked

    أزرار انتقاء (radio button) أو صناديق تأشير (checkbox) أو خيارات <option> في عنصر<select> تم تحديدها أو انتقاؤها. يمكن أن يُفعِّل المستخدم هذه الحالة بتفعيل أو انتقاء العنصر.

  3. ‎:default

    أي عنصر مُختار افتراضيًا بين مجموعة من العناصر المتعلقة به؛ ويمكن استخدام هذا الصنف الزائف على أيّة أزرار عادية <button> أو أزرار انتقاء (radio button) أو صناديق تأشير (checkbox) أو خيارات <option> في عنصر <select> تم تحديدها أو انتقاؤها.

  4. ‎:disabled

    أي عنصر مُعطَّل، ولا يمكن اختيار أو النقر على العنصر المعطَّل ولا الكتابة فيه، ولا يقبل التركيز (focus)، ويمكن أن يكون العنصر مُفعَّلًا (enabled) أي يمكن اختياره أو النقر عليه أو الكتابة فيه.

  5. ‎:empty

    أي عنصر ليس له أبناء، والأبناء يمكن أن تكون عقد عناصر (element nodes) أو عقدًا نصيةً (text nodes) بما في ذلك الفراغات. لن تؤثر التعليقات على اعتبار العنصر فارغًا أم لا.

  6. ‎:enabled

    أي عنصر مُفعّل، أي يمكن اختياره أو النقر عليه أو الكتابة فيه أو يمكن التركيز عليه (focus).

  7. ‎:first

    يُستعمَل مع القاعدة ‎@page، ويُمثِّل أوّل صفحة من المستند عند طباعته.

  8. ‎:first-child

    أوّل عنصر في مجموعة من العناصر الأخوة (sibling elements).

  9. ‎:first-of-type

    أوّل عنصر من نوعه في مجموعة من العناصر الأخوة.

  10. ‎:fullscreen

    العناصر التي تُعرَض عندما يكون المتصفح في وضع ملء الشاشة.

  11. ‎:focus

    العناصر (مثل عناصر النماذج) التي استقبل التركيز (foucs)، ويُفعَّل التركيز إذا ضغط المستخدم أو لمس أحد العناصر أو وصل إليه عبر مفتاح tab على لوحة المفاتيح.

  12. ‎:hover

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

  13. ‎:indeterminate

    أيّة نماذج تكون حالتها غير معروفة (indeterminate).

  14. ‎:in-range

    أيّة عناصر<input> التي تكون قيمتها ضمن المجال المسموح المُحدَّد عبر الخاصيتينmin و max.

  15. ‎:invalid

    أيّة عناصر <input>أو <form> التي فشل التحقق من صحة محتوياتها.

  16. ‎:lang()‎

    العناصر اعتمادًا على لغة تلك العناصر.

  17. ‎:last-child

    آخر عنصر في مجموعة من العناصر الأخوة (sibling elements).

  18. ‎:last-of-type

    آخر عنصر من نوعه في مجموعة من العناصر الأخوة.

  19. ‎:left

    يُستعمَل مع القاعدة ‎@page، ويُمثِّل الصفحات اليسارية (left hand pages) من المستند عند طباعته.

  20. ‎:link

    عنصرٌ لم تتم زيارته من قبل، ويُطابِق جميع عناصر <a> و <area> و <link> التي لها الخاصية hrefولم تتم زيارتها بعد.

  21. ‎:not()‎

    العناصر التي لا تُطابِق مُحدِّدًا أو أكثر، يسمى هذا الصنف أيضًا بصنف النفي الزائف (negation pseudo-class).

  22. ‎:nth-child()‎

    عنصرٌ أو أكثر بناءً على موقعه ضمن مجموعة من العناصر الأخوة (siblings).

  23. ‎:nth-last-child()‎

    عنصرٌ أو أكثر بناءً على موقعه ضمن مجموعة من العناصر الأخوة (siblings)، وذلك بدءًا من نهاية المجموعة.

  24. ‎:nth-last-of-type()‎

    عنصرٌ أو أكثر من نوعٍ معيّن بناءً على موقعه ضمن مجموعة من العناصر الأخوة (siblings). بدءًا من النهاية إلى البداية.

  25. ‎:only-child

    عنصرٌ لا يملك أيّة عناصر أخوة (siblings)، وهذا المُحدِّد يماثل ‎:first-child:last-child أو ‎‎:nth-‎child(1):nth-last-child(1)‎‎‎ لكن درجة التحديد له أقل.

  26. ‎:only-of-type

    عنصرٌ لا يملك أيّة عناصر أخوة (siblings) من نفس نوعه.

  27. ‎:optional

    أيّة عناصر<input> أو <select> أو <textarea> التي لم تُضبَط الخاصية requiredعليها.

  28. ‎:out-of-range

    أيّة عناصر<input> التي لا تكون قيمتها ضمن المجال المسموح المُحدَّد عبر الخاصيتينmin و max.

  29. ‎:read-only

    أي عنصر فيه محتوى نصي لا يمكن للمستخدم تعديله.

  30. ‎:read-write

    أي عنصر فيه محتوى نصي يمكن للمستخدم تعديله.

  31. ‎:required

    أيّة عناصر<input> أو <select> أو <textarea> التي ضُبِطَت الخاصية requiredعليها.

  32. ‎:right

    يُستعمَل مع القاعدة ‎@page، ويُمثِّل الصفحات اليمينية (right hand pages) من المستند عند طباعته.

  33. ‎:root

    العنصر الجذر في شجرة المستند، أي أنَّه يُطابِق العنصر <html> في مستندات HTML، وهو مكافئ للمُحدِّد html إلا أنَّ درجة التحديد له أعلى.

  34. ‎:target

    عنصرٌ فريدٌ يُطابِق مُعرِّفه id قسمًا من رابط URL.

  35. ‎:valid

    أيّة عناصر <input>أو <form> التي نجح المتصفح بالتحقق من صحة محتوياتها.

  36. ‎:visited

    عنصرٌ تمت زيارته من قبل، ولأسباب تابعة للخصوصية، إنَّ عدد الخاصيات التي يمكن تغيير قيمتها باستخدام هذا المُحدِّد قليلةٌ جدًا.

    


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


  1. ‎::after‎

    هو آخر عنصر ابن للعنصر المُحدَّد، ويستخدَم عادةً لإضافة محتوى تزييني للعنصر باستخدام الخاصية content، وهو عنصرٌ سطريٌ افتراضيًا.

  2. ‎::backdrop

    هو صندوقٌ يُعرَض مباشرةً تحت أيّ عنصر معروض في وضع ملء الشاشة.

  3. ‎::before

    هو أوّل عنصر ابن للعنصر المُحدَّد، ويستخدَم عادةً لإضافة محتوى تزييني للعنصر باستخدام الخاصية content، وهو عنصرٌ سطريٌ افتراضيًا.

  4. ‎::first-letter

    يؤدي إلى تطبيق الأنماط على أوّل حرف من أوّل سطر من العناصر الكتلية (block-level elements)، شرط ألّا يسبقها محتوى آخر (مثل الصور أو الجداول السطرية).

  5. ‎::first-line

    يؤدي إلى تطبيق الأنماط على أوّل سطر من العناصر الكتلية (block-level elements)، لاحظ أنَّ طول أوّل سطر يختلف تبعًا لعدة عوامل بما في ذلك عرض العنصر وعرض المستند وحجم الخط.

  6. ‎::placeholder 

    يُمثِّل النص البديل في أحد عناصر النماذج <form>.

  7. ‎::selection

    يُمثِّل نصًّا في المستند الذي حدده المستخدم (باستخدام المؤشر مثلًا).


    

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


  1. angle

    نوع البيانات <angle> في CSS يستعمل لتمثيل القيم الزاويّة بالدرجات (degrees) أو بالغراد (grad) أو بالراديان (radians) أو بالدورات (turns)، ويمكن استخدام هذا النوع في التدرجات اللونية <gradient> وبعض دوالtransform.

  2. blend-mode

    نوع البيانات <blend-mode> في CSS يستعمل لوصف كيف يجب أن تمتزج الألوان عند تداخل طبقات الخلفات مع بعضها بعضًا. فلكل بكسل من بكسلات الطبقة التي طُبِّق عليها نمط الامتزاج، فسيأخذ اللون من الخلفية ومن الأمامية، وستُجرى عملية حسابية عليه، ويُعاد لونٌ جديدٌ سيستخدم مكان تداخل الطبقات.

  3. color value

    نوع البيانات <color> في CSS يستعمل لتمثيل لون في مجال ألوان sRGB.

  4. custom-ident

    نوع البيانات <custom-ident> في CSS يستعمل لتمثيل المُعرِّفات (identifiers) التي أنشأها المستخدم، وهذا النوع حساس لحالة الأحرف، ولا يُسمَح باستخدام بعض القيم في مواضع معيّنة منعًا للالتباس.

  5. gradient

    نوع البيانات <gradient> في CSS هو نوعٌ خاصٌ من الصور <image> الذي يُمثِّل تدرجًا لونيًا بين لونين أو أكثر.

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

    • linear-gradient
    • radial-gradient
    • repeating-linear-gradient
    • repeating-radial-gradient
  6. image

    نوع البيانات <image> في CSS يستعمل لتمثيل صورة ثنائية الأبعاد؛ وهنالك نوعان من الصور: الصور التقليدية التي يُشار إليها عادةً باستخدام رابط URL، والصور المولّدة ديناميكيًا، مثل التدرجات اللونية <gradient>.

  7. integer

    نوع البيانات <integer> في CSS هو نوعٌ خاصٌ من <number> الذي يُمثِّل الأعداد الصحيحة، سواءً كانت موجبة أو سالبةً؛ وتستُعمَل الأعداد الصحيحة في الكثير من خاصيات CSS مثل column-count و grid-column و grid-row وz-index.

  8. length

    نوع البيانات <length> في CSS يستعمل لتمثيل القيم الطولية، فعدد كبير من خاصيات CSS تقبل بقيم ذات النوع <length>، مثل width و margin وpadding و font-size و border-width و text-shadow.

  9. number

    نوع البيانات <number> في CSS يُمثِّل القيم العددية، سواءً كانت أعدادًا صحيحةً (integer) أو أعدادًا عشريةً.

  10. percentage

    نوع البيانات <percentage> في CSS يستعمل لتمثيل النسب المئوية، إذ يقبل عددٌ كبيرٌ من خاصيات CSS القيمَ كنسبٍ مئوية، وتُستخدَم عادةً لتعريف أحد الأبعاد نسبةً إلى أبعاد العنصر الأب. أمثلة عن الخاصيات التي تقبل نوع البيانات <percentage>: الخاصية width و margin و padding و font-size.

  11. resolution

    نوع البيانات <resolution> في CSS يستعمل لوصف دقة الشاشة في media queries، ودقة الشاشة تعني كثافة البكسلات في جهاز العرض.

  12. string

    نوع البيانات <string> في CSS يُمثِّل سلسلةً من المحارف، ويمكن استخدام السلاسل النصية في الكثير من خاصيات CSS، مثل content و font-family وquotes.

  13. time

    نوع البيانات <time> يُمثِّل قيمةً زمنيةً يُعبَّر عنها بالثانية أو بالملي ثانية، وتُستَخدم في خاصية animation و transition وغيرهما.

  14. timing-function

    نوع البيانات <timing-function> يشير إلى الدوال الرياضية التي تصف سرطة تغيير القيم أحادية البعد في الحركات، وهذا ما يسمح بتغيير سرعة الحركات خلال فترة الحركة.

  15. url

    نوع البيانات <url> في CSS يُشير إلى أحد الموارد (resources)، مثل الصور أو الخطوط، وتُستخدَم روابط URL في الكثير من الخاصيات، مثل background-image و cursor و list-style.


   

قواعد @


  1. ‎@charset

    تُحدِّد ترميز المحرف المستخدم في صفحة الأنماط، ويجب أن تكون أوّل تعليمة في الملف ولا يسبقها أي محرف، وإذا حُدِّدَت أكثر من قاعدة ‎@charset في الملف نفسه فلن تؤخذ إلا أوّل قاعدة، ولا يمكن أن تُستعمَل هذه القاعدة في الخاصية style على عناصر HTML أو داخل العنصر<style>.

  2. ‎@font-face

    تسمح للمطورين بتحديد خطوط خاصة لعرض النص الموجود في صفحات الويب، وذلك بالسماح للمطورين بتعريف خطوط خاصة بهم، والقاعدة ‎@font-face أدت إلى فتح المجال أمام المطورين لاستخدام أي خطٍ يشاؤون بدل أن يكونوا محدودين ببعض الخطوط المثبتة على حاسوب الزوار.

  3. ‎@import

    تسمح للمطورين باستيراد قواعد التنسيق من صفحات الأنماط الأخرى، وهذا النوع من القواعد يجب أن يسبق جميع قواعد CSS الأخرى، ما عدا قواعد ‎@charset.

  4. ‎@keyframes

    تتحكم بالخطوات البينية (intermediate steps) في سلسلة حركات CSS عبر تعريف أنماط للإطارات المفتاحية (keyframes)، مما يعطينا تحكمًا كبيرًا في أنماط العنصر في الخطوات البينية بالمقارنة مع الانتقالات transition.

  5. ‎@media

    يمكن أن تستعمل لتطبيق الأنماط بناءً على شروط معيّنة (تسمى media queries)، التي تختبر نوع الجهاز، وخصائصه، وبيئة التشغيل.

  6. ‎@page

    تُستعمَل لتعديل بعض خاصيات CSS عند طباعة المستخدم، أي لا يمكنك تغيير جميع خاصيات CSS مع هذه القاعدة، إذ تستطيع تغيير الهوامش margin واليتامى orphans والأرامل widows، وسيتم تجاهل محاولة تغيير خاصيات CSS الأخرى.

  7. ‎@supports

    تسمح لنا بتعريف قواعد بناءً على دعم المتصفح لميزات مُعيّنة في CSS.

  


 متفرقات


  1. ‎--*‎

    أسماء الخاصيات التي تُسبَق بشرطتين --، مثل ‎--example-name، تُمثِّل الخاصيات المخصصة (custom properties) التي تُسنَد لها قيمة يمكن إعادة استخدامها في المستند عبر الدالة var()‎.

  2. attr()‎

    الدالة attr()‎ في CSS تُستعمَل للحصول على قيمة إحدى خاصيات العنصر المُحدَّد واستخدامها في أنماط CSS، ويمكن استعمالها أيضًا على العناصر الزائفة (pseudo-elements) وفي هذه الحالة ستُستخدَم قيمة خاصية العنصر الأصل.

  3. calc()‎

    الدالة calc()‎ في CSS تسمح بإجراء عمليات حسابية عند تحديد قيم خاصيات CSS، ويمكن استخدامها في أي موضع يُسمَح فيه باستخدام أنواع البيانات<length> و <percentage> و <angle> و <time> و <number> و<integer>.

  4. inherit

    الكلمة المحجوزة inherit في CSS تؤدي إلى جعل العنصر يأخذ القيمة المحسوبة لهذه الخاصية من العنصر الأب، ويمكن تطبيق هذه القيمة على جميع خاصيات CSS بما في ذلك خاصية all المختصرة.

  5. initial

    الكلمة المحجوزة initial في CSS تُطبِّق القيمة الابتدائية للخاصية على العنصر، ويمكن استخدام على جميع خاصيات CSS، بما في ذلك خاصية all المختصرة.

  6. unset

    الكلمة المحجوزة unset في CSS تُعيد ضبط قيمة الخاصية إلى قيمتها المورثة إن ورثت القيمة من العنصر الأب، أو إلى قيمتها الابتدائية إن لم ترثها؛ بصياغة أخرى، ستسلك هذه الكلمة المحجوزة سلوك inherit في الحالة الأولى، وسلوك initial في الحالة الثانية، ويمكن استخدام على جميع خاصيات CSS، بما في ذلك خاصية all المختصرة.

  7. var()‎

    الدالة var()‎ في CSS تُستخدم لتضمين قيمة خاصية مخصصة بدلًا من قيمة إحدى الخاصيات الأخرى.

  8. will-change

    الخاصية will-change في CSS تسمح للمطورين بأخبار المتصفحات ما هي التغييرات المتوقع إجراؤها على العنصر، لكي يتمكن المتصفح من ضبط تحسينات الأداء قبل حدوث التغيير، وهذه التحسينات ستزيد من استجابة الصفحة عبر القيام بالحسابات اللازمة قبل وقوع التغيير.


     

القيم في CSS


  1. القيمة الفعلية

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

  2. القيمة المحسوبة

    القيمة المحسوبة (computed value) لإحدى خاصيات CSS تُحسَب من القيمة المُحدَّدة.

  3. القيمة المُحدَّدة

    القيمة المُحدَّدة (specified value) لإحدى خاصيات CSS هي القيمة المضبوطة لتلك الخاصية، سواءً من صفحة الأنماط مباشرةً، أو من العنصر الأب.

  4. القيمة المستخدمة

    القيمة المستخدمة (used value) لإحدى خاصيات CSS هي القيمة النهائية لتلك الخاصية بعد إجراء جميع الحسابات اللازمة.

  5. القيمة الابتدائية

    القيمة الابتدائية (initial value) التي نضعها في صفحات جميع خاصيات CSS لها معانٍ مختلفة للخاصيات التي يمكن أن ترث القيم والتي لا يمكن أن ترث القيم.

إذا أعجبك المقال أو كان مفيدًا - ضع "أعجبني". اشترك في المدونة اوشارك برأيك في التعليقات! أراك لاحقا

COMMENTS

BLOGGER
الاسم

اخبار,45,اداة للكمبيوتر,7,اضافات بلوجر,88,افلام اجنبي,9,افلام روسية,32,افلام عربي مترجمة الي الروسية,1,افلام قديمة,2,افلام هندي,8,البرمجة,8,الجديد في التكنولوجيا,46,العاب,9,النمر,7,اليوتيوب,16,اندرويد,15,اندرويد استوديو,3,برامج كمبيوتر,11,بلوجر,8,تركيا,6,تصميم,3,تطبيقات,20,جافاسكريبت,3,حوادث,5,حول العالم,65,حيوانات,25,خلفيات,1,دروس HTML| بالعربية,2,روبوتات,8,روسيا,60,سياحة,4,سيارات,12,سياسة,17,شروحات,34,شريط الاخبار,1,صحتي,2,طائرات,22,فن,35,قناة الوعي نور,4,قناة قعدة تاريخ,8,قوالب بلوجر,3,كتب الكترونية,7,مالتي ميديا,6,متصفح,2,محليات,4,مسلسل لعبة الحبار,1,مسلسلات اجنبية,2,مسلسلات رمضان 2022,1,مسلسلات رمضان 2120,1,مصر والعرب,2,معدات حربية,34,معدات زراعية,6,مقالات,101,مواصلات النقل,1,مواقع للتصميم,14,وثائقي,14,وسوم بلوجر,2,ويندوز,15,Antivirus,3,Button,1,c++,1,css,37,HTML,11,wesam,2,
rtl
item
Wesam: بنية شيفرات
بنية شيفرات
تتألف شيفرة CSS من مجموعة من القواعد (rules)، والتي تتألف بدورها من مُحدِّد (selector) ثم قائمة بالخاصيات والقيم المُسنَدة إليها. فمثلًا لو أردنا تحدي
https://blogger.googleusercontent.com/img/a/AVvXsEjtu3sbW78zoOweLa5IpVBBTZjV0x6wyPZFjtagWndabRDFmnBTy0m1k3Xv5PIjwHd9SRQA6_INSQNp6d-MzQOQHMhlqoiPKrFlIFYkpkYCdQKa52nW3bAIuQQ0GWz2lL1CyGs9EwvbtEP2XEsbohLD54Dv5lxq7cVI7U0Vdpaqk3tYtxCepjBhEfoK=s16000
https://blogger.googleusercontent.com/img/a/AVvXsEjtu3sbW78zoOweLa5IpVBBTZjV0x6wyPZFjtagWndabRDFmnBTy0m1k3Xv5PIjwHd9SRQA6_INSQNp6d-MzQOQHMhlqoiPKrFlIFYkpkYCdQKa52nW3bAIuQQ0GWz2lL1CyGs9EwvbtEP2XEsbohLD54Dv5lxq7cVI7U0Vdpaqk3tYtxCepjBhEfoK=s72-c
Wesam
https://www.wesamdev.com/2021/08/CSS-code-structure.html
https://www.wesamdev.com/
https://www.wesamdev.com/
https://www.wesamdev.com/2021/08/CSS-code-structure.html
true
1297279864306511161
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content