🎨 مرجع خصائص CSS بالعربي

display

خاصية طريقة العرض

خاصية display تحدد كيف يتصرف العنصر في التخطيط: كتلة، سطري، صندوق مرن flex، شبكة grid، أو مخفي تمامًا.

position

خاصية تموضع العنصر

خاصية position تخرج العنصر من التدفق الطبيعي وتموضعه: نسبيًا، مطلقًا داخل أب، مثبتًا بالشاشة، أو لاصقًا عند التمرير.

justify-content

خاصية توزيع المحور الرئيسي

خاصية justify-content توزع أبناء حاوية flex أو grid على طول المحور الرئيسي: بداية، وسط، نهاية، أو بمسافات متساوية.

align-items

خاصية محاذاة المحور المتعامد

خاصية align-items تحاذي أبناء حاوية flex/grid على المحور المتعامد — رأسيًا في الصف الافتراضي: أعلى، وسط، أسفل، أو تمدد.

flex-direction

خاصية اتجاه الصندوق المرن

خاصية flex-direction تحدد محور حاوية flex: صف أفقي (الافتراضي) أو عمود رأسي — ومعها ينقلب عمل justify وalign.

grid-template-columns

خاصية أعمدة الشبكة

خاصية grid-template-columns ترسم أعمدة شبكة grid — ومع repeat وminmax وauto-fit تبني شبكات متجاوبة بسطر واحد بلا أي media query.

gap

خاصية المسافة بين العناصر

خاصية gap تضع مسافات بين أبناء flex أو grid من الحاوية نفسها — وداعًا لهوامش الأبناء وحواف «العنصر الأخير» الشاذة.

z-index

خاصية ترتيب الطبقات

خاصية z-index تقرر أي العناصر المتراكبة يظهر فوق الآخر — وتعمل فقط على العناصر ذات position أو داخل سياقات تراص.

overflow

خاصية فائض المحتوى

خاصية overflow تقرر مصير المحتوى الذي يتجاوز حجم حاويته: يظهر خارجها، يُقص، أو يكسب شريط تمرير.

flex-wrap

خاصية التفاف الصندوق المرن

خاصية flex-wrap تسمح لعناصر flex بالنزول لسطر جديد عند الضيق بدل الانضغاط القسري — نصف التجاوب بكلمة واحدة.

margin

خاصية الهامش الخارجي

خاصية margin تصنع مسافة خارج حدود العنصر تبعده عن جيرانه — وmargin-inline: auto وصفة توسيط الكتل الشهيرة.

padding

خاصية الحشوة الداخلية

خاصية padding تصنع مسافة داخل العنصر بين حدوده ومحتواه — هي التي تعطي الأزرار والبطاقات «مساحة التنفس».

border

خاصية الإطار

خاصية border ترسم إطارًا حول العنصر بثلاث صفات: سمك ونمط ولون — أساس البطاقات والحقول والفواصل.

border-radius

خاصية الزوايا الدائرية

خاصية border-radius تدوّر زوايا العنصر — من لمسة نعومة للبطاقات حتى الدائرة الكاملة للصور الشخصية بقيمة 50%.

box-shadow

خاصية ظل الصندوق

خاصية box-shadow تضيف ظلًا يمنح العنصر عمقًا وارتفاعًا عن الصفحة — سلاح البطاقات العائمة وحالات الهفر.

width / height

خاصيتا الأبعاد

width وheight تحددان أبعاد العنصر — والاحتراف في معرفة متى تتركهما للمحتوى ومتى تقيدهما بـ max وmin.

max-width

خاصية الحد الأقصى للعرض

خاصية max-width تمنع العنصر من تجاوز عرض معين مع بقائه مرنًا تحته — العمود الفقري لكل تخطيط متجاوب ومقروء.

box-sizing

خاصية حساب أبعاد الصندوق

خاصية box-sizing: border-box تجعل width شاملة للحشوة والحدود — السطر الذي يبدأ به كل مشروع CSS عاقل.

color

خاصية لون النص

خاصية color تلوّن النص — وتورَّث لكل الأبناء، وقيمتها currentColor سر الأيقونات التي تتلون مع نصها تلقائيًا.

font-size

خاصية حجم الخط

خاصية font-size تحدد حجم النص — وبوحدة rem تحترم إعدادات المستخدم، وبدالة clamp تتدرج مع الشاشة بلا قفزات.

font-family

خاصية عائلة الخط

خاصية font-family تحدد خط النص بقائمة بدائل تنتهي بعائلة عامة — واختيار الخط العربي الجيد نصف هوية موقعك.

font-weight

خاصية وزن الخط

خاصية font-weight تضبط سماكة الحرف من 100 الرفيع حتى 900 الأسود — سلاح الهرمية البصرية الأول.

line-height

خاصية ارتفاع السطر

خاصية line-height تضبط التباعد الرأسي بين أسطر النص — أكبر مؤثر منفرد في راحة القراءة، وللعربية وصفة أوسع.

text-align

خاصية محاذاة النص

خاصية text-align تحاذي النص داخل حاويته — وقيمتاها المنطقيتان start/end تجعلان موقعك ثنائي الاتجاه بلا تعديل.

text-decoration

خاصية زخرفة النص

خاصية text-decoration ترسم خطوط النص: تسطير الروابط، شطب الأسعار — وأخواتها الحديثة تضبط لون الخط وسمكه وبعده.

text-shadow

خاصية ظل النص

خاصية text-shadow تضيف ظلًا أو توهجًا للحروف — إنقاذ النص فوق الصور، وتوهجات النيون للعناوين.

direction

خاصية اتجاه الكتابة

خاصية direction تقلب اتجاه النص والتخطيط rtl/ltr — لكن الصواب المعماري وضع dir على HTML واستعمال الخصائص المنطقية.

white-space

خاصية معالجة الفراغات

خاصية white-space تتحكم بمصير المسافات وكسور الأسطر: دمجها الافتراضي، حفظها الحرفي للكود، أو منع الالتفاف نهائيًا.

letter-spacing

خاصية تباعد الأحرف

خاصية letter-spacing تباعد بين الأحرف — أنيقة للعناوين اللاتينية الكبيرة، و«خط أحمر» شبه مطلق على النص العربي المتصل.

background-color

خاصية لون الخلفية

خاصية background-color تلوّن خلفية العنصر — وبالشفافية الجزئية تصنع «صبغات» العلامة الأنيقة فوق أي سطح.

background-image

خاصية صورة الخلفية

خاصية background-image تضع صورة أو تدرجًا لونيًا خلفية للعنصر — والتدرجات linear وradial أدوات الجمال الحديثة الأولى.

background-size

خاصية حجم الخلفية

خاصية background-size تتحكم بمقاس صورة الخلفية — وcover الكلمة التي تحل «كيف أملأ القسم بالصورة بلا تشويه؟».

object-fit

خاصية ملاءمة الوسائط

خاصية object-fit تضبط كيف تملأ صورة أو فيديو إطارها المحدد — cover للصور الشخصية وبطاقات بأبعاد موحدة بلا تشويه.

opacity

خاصية الشفافية

خاصية opacity تضبط شفافية العنصر كاملًا من 0 المخفي إلى 1 المعتم — أداة التعطيل البصري وحركات الظهور الأولى.

transition

خاصية الانتقال الناعم

خاصية transition تحوّل تغيّرات القيم من قفزة فجة إلى انسياب ناعم — روح كل هفر أنيق بسطر واحد.

transform

خاصية التحويل الهندسي

خاصية transform تحرّك وتكبّر وتدوّر العنصر دون لمس تخطيط الصفحة — لغة الحركة الأولى بأداء العتاد الرسومي.

animation

خاصية الحركة المفتاحية

خاصية animation تشغّل حركات keyframes متعددة المراحل تعمل وحدها — نبض ودوران وظهور متدرج بلا جافاسكريبت.

cursor

خاصية شكل المؤشر

خاصية cursor تغيّر شكل مؤشر الفأرة فوق العنصر — pointer «اليد» إشارة القابلية للنقر التي يفهمها الجميع غريزيًا.

filter

خاصية المرشحات البصرية

خاصية filter تطبق مؤثرات فوتوشوب حية على العنصر: ضبابية، تدرج رمادي، سطوع — ومعها backdrop-filter لزجاجية الخلفيات.

:hover

محدد حالة التمرير

المحدد الزائف :hover يفعّل تنسيقات لحظة مرور المؤشر — لغة «أنا تفاعلي» الأولى، مع قاعدة ذهبية لأجهزة اللمس.

@media

استعلامات الوسائط

قاعدة @media تطبق تنسيقات بشروط: عرض الشاشة، تفضيل الوضع الداكن، أو تقليل الحركة — بوابة التصميم المتجاوب الرسمية.

--custom-properties

متغيرات CSS

المتغيرات المخصصة --name تخزن قيمًا تعاد بـ var()‎ — أساس أنظمة الألوان والثيمات الحية بلا أي معالج مسبق.

visibility

خاصية الرؤية

خاصية visibility: hidden تخفي العنصر مع إبقاء مساحته محجوزة — ثالث أساليب الإخفاء الثلاثة ولكلٍ موضعه.