مرجع خصائص 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 تحدد المسافة بين العناصر داخل الحاوية.
المحرر الذكي

اكتب الكود وشاهد النتيجة فوراً

جرب الآن مجاناً
قناة ديف عربي

تابع أحدث الدروس والتحديثات مباشرة على واتساب

انضم الآن