مرجع خصائص CSS الشامل بالعربي
هذا المرجع يحتوي على قائمة شاملة لخصائص CSS الأكثر استخداماً، مرتبة حسب وظيفتها لمساعدتك في العثور على الخاصية المناسبة لتنسيق عناصر موقعك.
الألوان والخلفيات
| الخاصية | الوصف |
|---|---|
color |
تحدد لون النص داخل العنصر. |
background-color |
تحدد لون خلفية العنصر. |
background-image |
تحدد صورة كخلفية للعنصر. |
background-size |
تتحكم في حجم صورة الخلفية (مثل: cover, contain). |
background-repeat |
تحدد ما إذا كانت صورة الخلفية ستتكرر أم لا. |
opacity |
تحدد مستوى شفافية العنصر (من 0 إلى 1). |
النصوص والخطوط
| الخاصية | الوصف |
|---|---|
font-family |
تحدد نوع الخط المستخدم للنص. |
font-size |
تحدد حجم الخط (بـ px, rem, em, إلخ). |
font-weight |
تحدد سمك الخط (مثل: bold, normal). |
text-align |
تحدد محاذاة النص (مثل: center, right, left). |
text-decoration |
تضيف زخرفة للنص (مثل الخط السفلي underline أو إزالته none). |
line-height |
تحدد المسافة بين الأسطر. |
letter-spacing |
تحدد المسافة بين الحروف. |
نموذج الصندوق (Box Model)
| الخاصية | الوصف |
|---|---|
width / height |
تحدد عرض وارتفاع العنصر. |
padding |
تحدد المسافة الداخلية بين المحتوى والحدود. |
margin |
تحدد المسافة الخارجية بين العنصر والعناصر الأخرى. |
border |
تحدد سمك وشكل ولون حدود العنصر. |
border-radius |
تستخدم لعمل زوايا دائرية للعنصر. |
box-shadow |
تضيف ظلاً حول صندوق العنصر. |
box-sizing |
تحدد كيفية حساب العرض والارتفاع (يفضل استخدام border-box). |
التخطيط والتموضع
| الخاصية | الوصف |
|---|---|
display |
تحدد نوع عرض العنصر (مثل: block, inline, flex, grid, none). |
position |
تحدد طريقة تموضع العنصر (مثل: relative, absolute, fixed, sticky). |
top, right, bottom, left |
تحدد إزاحة العنصر المتموضع. |
z-index |
تحدد ترتيب تكدس العناصر فوق بعضها. |
overflow |
تحدد ما يحدث للمحتوى الزائد عن حجم العنصر. |
float |
تستخدم لجعل العنصر يطفو لليمين أو اليسار (قديم نوعاً ما). |
مرونة الصناديق (Flexbox)
| الخاصية | الوصف |
|---|---|
flex-direction |
تحدد اتجاه العناصر داخل حاوية flex (مثل: row, column). |
justify-content |
تحدد محاذاة العناصر على المحور الرئيسي. |
align-items |
تحدد محاذاة العناصر على المحور المتقاطع. |
flex-wrap |
تحدد ما إذا كانت العناصر ستنتقل لسطر جديد أم لا. |
gap |
تحدد المسافة بين العناصر داخل الحاوية. |