مرجع خصائص CSS

آخر تحديث: 2026-09-13

مرجع خصائص CSS

Alphabetical list of 153 CSS properties with descriptions.

A
aspect-ratio	تجبر خاصية aspect-ratio العنصر على الحفاظ على نسبة ثابتة بين العرض والارتفاع، مما يلغي الحاجة إلى حيلة النسبة المئوية للـ padding القديمة. قيمتها الافتراضية auto تستخدم النسبة الجوهرية للعنصر، كما في الصور. هي ميزة CSS حديثة نسبيًا تُبسّط بشكل كبير الحاويات المتجاوبة للفيديو والبطاقات.
align-items	تُعرّف الخاصية align-items محاذاة جميع عناصر flex على المحور المتقاطع، وتتحكم في موضعها في الاتجاه العمودي على المحور الرئيسي. قيمتها الافتراضية هي stretch، ما يجعل العناصر تتمدد لملء ارتفاع الحاوية على طول المحور المتقاطع. تُستخدم هذه الخاصية عادةً للتوسيط الرأسي ومحاذاة الأطراف العلوية والسفلية وخط الأساس.
animation	الخاصية animation هي اختصار لـ animation-name و animation-duration و animation-timing-function و animation-delay و animation-iteration-count و animation-direction و animation-fill-mode و animation-play-state. وبالاقتران مع @keyframes، تُعرّف تسلسلات رسوم متحركة متعددة المراحل وقابلة للتكرار والإيقاف المؤقت. وعلى عكس transition، تُشغَّل animation تلقائيًا دون محفّز، ما يجعلها مثالية لأدوات التحميل والعروض الدوّارة والتأثيرات النابضة وغيرها من العناصر البصرية المستمرة.
align-self	تضبط خاصية align-self محاذاة عنصر flex واحد على المحور المتقاطع، متجاوزةً القيمة الافتراضية align-items للحاوية. قيمتها الافتراضية هي auto، التي ترث قيمة align-items للحاوية. وبها يمكن لعنصر واحد أن ينحاز بشكل مختلف عن البقية — مثلًا عنصر واحد مُوسَّط بينما البقية محاذاة للأعلى — وهو مفيد جدًا في أشرطة التنقل وتخطيطات البطاقات.
align-content	تضبط خاصية align-content كيفية محاذاة وتباعد عدة أسطر من عناصر flex على المحور المتقاطع. ولا تؤثر إلا quando ينتج عن الالتفاف (flex-wrap: wrap) أكثر من سطر واحد. تعمل مثل justify-content لكنها تتصرف على المحور المتقاطع وتوزّع المسافة بين الأسطر. وفي سطر واحد لا تفعل الخاصية شيئًا؛ استخدم align-items بدلًا من ذلك.
animation-duration	تضبط خاصية animation-duration المدة التي تستغرقها الحركة لإكمال دورة كاملة واحدة. القيم الأقصر تجعل الحركة أسرع؛ والقيم الأطول تجعلها أبطأ. وهي جزء من اختصار animation، وعند استخدامها بمفردها تتجاوز المدة المعيّنة بالاختصار.
animation-timing-function	تحدد خاصية animation-timing-function كيفية تغيّر سرعة الحركة مع الوقت — سواء كانت بوتيرة ثابتة، أو تبدأ سريعة وتتباطأ، أو تبدو مرنة. ومن خلال التحكم في توزيع الأوقات لأطر البين، تجعل الحركة أكثر واقعية فيزيائياً أو أكثر تنسيقاً، وهي خاصية أساسية لجودة حركة مصقولة.
appearance	تتحكم الخاصية appearance فيما إذا كان العنصر يستخدم المظهر الأصلي للمتصفح — العرض الافتراضي لعناصر التحكم في النموذج. وعند ضبطها على none، يتخلى العنصر عن مظهره الأصلي ويصبح أسلوبه خاضعًا بالكامل لـ CSS، مما يجعلها خاصية أساسية لتخصيص عناصر التحكم في النموذج.
B
box-sizing	تحدد خاصية box-sizing كيفية حساب width و height وهي مفتاح فهم نموذج الصندوق في CSS. القيمة الافتراضية content-box تقيس منطقة المحتوى فقط، مع إضافة padding و border فوقها؛ أما border-box فتتضمن padding و border ضمن العرض والارتفاع المحددين، وهو أكثر بداهة. تُعيّن المشاريع الحديثة border-box عالميًا عادةً.
border	تُعد خاصية border (الاختصار) من أكثر الخصائص استخدامًا في CSS، إذ تتيح تعيين عرض الحدود ونمطها ولونها لعنصر في إعلان واحد. يحيط الحد بالمحتوى داخل الحشو مباشرة، وهو جزء أساسي من نموذج الصندوق. باستخدام border يمكنك إعطاء أي عنصر بسرعة مخططًا مرئيًا.
border-width	تحدد الخاصية border-width سُمك حدود العنصر. يمكنك استخدام الكلمات المفتاحية المعرّفة مسبقاً thin وmedium وthick، أو قيم طول صريحة مثل px أو em. عند استخدامها بمفردها، تتحكم في العرض فقط، وتترك النمط واللون دون تغيير.
border-style	تحدد الخاصية border-style مظهر خط الحد، مثل solid أو dashed أو dotted. وهي مفتاح ظهور الحد من الأساس — فحتى مع تعيين border-width وborder-color، يبقى الحد غير مرئي عندما يكون border-style هو none. يوفر CSS 10 أنماط خط مختلفة للاختيار من بينها.
border-color	تحدد الخاصية border-color لون حدود العنصر. تقبل كل صيغ الألوان في CSS، بما في ذلك أسماء الألوان والقيم الست عشرية وrgb() وrgba() وhsl() وغيرها. عند استخدامها بمفردها، تؤثر في لون الحد فقط، لا في العرض أو النمط.
border-radius	تُدوّر الخاصية border-radius زوايا العنصر الحادة، مما يجعلها إحدى أكثر الخصائص الزخرفية استخداماً في تصميم واجهات المستخدم الحديثة. تقبل قيماً من الطول أو النسب المئوية، وكلما زادت القيمة زاد وضوح التدوير. عندما يصل نصف القطر إلى نصف طول الضلع أو أكثر، يصبح الركن نصف دائرة أو دائرة كاملة.
background-color	تحدد الخاصية background-color لون خلفية العنصر، وهي إحدى أهم الخصائص الأساسية في تصميم الصفحات. تقبل كل قيمة لون في CSS، وتعطي الكلمة المفتاحية transparent خلفية شفافة. الخاصية غير موروثة، وخلفية كل عنصر شفافة افتراضياً.
background	background هي اختصار لخصائص الخلفية، ما يتيح لك تعيين لون الخلفية وصورتها وموضعها وحجمها وتكرارها وغيرها في إعلان واحد. يُبقي الاختصار الكود موجزاً، وأي خاصية فرعية تُحذف تُعاد إلى قيمتها الافتراضية. إنها أحد أكثر الاختصارات استخداماً في CSS.
background-image	تحدد الخاصية background-image صورة خلفية واحدة أو أكثر على العنصر، وتدعم مسارات url() ودوال التدرّج. تُفصل الخلفيات المتعددة بفواصل، وتُرصَّع الصور الأقدم فوق البقية. تُستخدم عادةً مع background-size وbackground-position.
background-position	تحدد الخاصية background-position الموضع الأولي لصورة الخلفية داخل العنصر، وهو افتراضياً الزاوية العلوية اليسرى (0% 0%). تقبل كلمات مفتاحية (left وcenter وright وtop وbottom) وقيم طول ونسباً مئوية. تُستخدم عادةً مع background-image لتموضع الخلفية بدقة.
background-size	تتحكم الخاصية background-size في أبعاد صورة الخلفية، وهي مُدخلة في CSS3. تدعم auto (حجم الصورة الأصيل) وcover (تغطية الحاوية بالكامل) وcontain (عرض الصورة كاملة داخل الحاوية) فضلاً عن قيم صريحة من الطول والنسب المئوية. الخاصية مفيدة جداً في التصميم المتجاوب.
box-shadow	تضيف خاصية box-shadow طبقة واحدة أو أكثر من الظلال حول أو داخل صندوق حدود العنصر، مما يمنح العنصر عمقًا وتدرّجًا هرميًا على الصفحة. وهي خاصية أساسية لتأثيرات واجهة المستخدم الحديثة مثل البطاقات العائمة والأزرار المضغوطة، وتدعم الإزاحة ونصف قطر التمويه ونصف قطر الانتشار واللون.
border-image	تتيح border-image استخدام صورة لرسم حد العنصر بدل خط متصل أو متقطع. تُقطّع الصورة إلى شبكة من تسعة أجزاء (أربع زوايا وأربع حواف ومنطقة مركزية) ويُخطَّط كل جزء إلى منطقة الحد المقابلة. وهي أداة قوية للحدود الزخرفية المعقدة.
background-attachment	تحدد الخاصية background-attachment ما إذا كانت صورة الخلفية تمرر مع الصفحة أم لا. القيمة الافتراضية scroll تعني أن الخلفية تمرر مع محتوى العنصر؛ أما fixed فتثبّت الخلفية في إطار العرض (viewport) مما يولّد تأثيرًا متوازيًا (parallax)؛ وlocal تجعل الخلفية تمرر مع المحتوى الداخلي للعنصر. تُستخدم غالبًا لتأثيرات بصرية.
background-clip	تتحكم الخاصية background-clip في منطقة رسم الخلفية، وتُقرر ضمن أي منطقة من نموذج الصندوق (box model) يُعرض الخلفية (لونًا كان أو صورة). القيمة الافتراضية border-box تمد الخلفية تحت الحدود، وpadding-box تقتصها إلى منطقة الحشو، وcontent-box تعرضها فقط في منطقة المحتوى. وأضاف CSS3 أيضًا القيمة text لتأثيرات قص النص.
background-origin	تحدد الخاصية background-origin منطقة المرجع لتموضع صورة الخلفية، وتُقرر خط الأساس لـ background-position. القيمة الافتراضية padding-box تتموضع الخلفية بالنسبة لمنطقة الحشو، وborder-box بالنسبة لمنطقة الحدود، وcontent-box بالنسبة لمنطقة المحتوى. تُستخدم غالبًا مع background-clip.
background-blend-mode	تضبط الخاصية background-blend-mode وضع المزج بين صور الخلفية لعنصر ما، وبين صور الخلفية ولون الخلفية. تدعم أوضاعًا مثل multiply وscreen وoverlay، بما يشبه مزج الطبقات في Photoshop. أُضيفت في CSS3 وهي ممتازة لتأثيرات بصرية غنية.
backdrop-filter	تطبّق الخاصية backdrop-filter تأثيرات مرشّح (مثل blur أو brightness) على المنطقة خلف العنصر، وهي الطريقة القياسية لإنشاء تأثيرات الزجاج المصنفر. على عكس filter، تؤثر في المحتوى الموجود أسفل العنصر لا في العنصر نفسه. دعم المتصفحات الحديثة جيد، لكن يجب أن يكون خلفية العنصر شفافًا جزئيًا على الأقل لتظهر التأثير.
bottom	تحدد خاصية bottom إزاحة عنصر موضعي من الحافة السفلية لكتلته المحتوية، وتُقاس إلى الأعلى. تُطبَّق فقط على العناصر الموضعية غير الساكنة، وتُستخدم عادةً مع التموضع absolute أو fixed لمحاذاة العناصر إلى الأسفل أو لتمديد ارتفاعها.
backface-visibility	تتحكم خاصية backface-visibility فيما إذا كان العنصر مرئياً عندما يواجه ظهره المشاهد بعد دوران ثلاثي الأبعاد. القيمة الافتراضية visible تعرض محتوى الوجه الأمامي منعكساً على الظهر؛ ومع hidden، يصبح العنصر غير مرئي عندما يواجه ظهره المشاهد. يُستخدم هذا عادةً في قلب البطاقات والمكعبات وغيرها من التأثيرات ثلاثية الأبعاد التي تُميّز بين الوجه والظهر.
box-decoration-break	تتحكم الخاصية box-decoration-break في كيفية عرض زخارف العنصر — مثل الخلفية والحدود والحشو — عند نقطة كسر مثل كسر السطر أو الصفحة. أما القيمة الافتراضية slice فتعرض الزخرفة وكأنها مقطوعة؛ و clone تعرض زخرفة كاملة لكل جزء. وتؤثر أساسًا على مظهر العناصر المضمّنة عبر كسر الأسطر وترقيم صفحات الطباعة.
C
color	تحدد الخاصية color لون المقدمة لنص العنصر، وهي إحدى أكثر خصائص CSS استخداماً. تقبل كلمات مفتاحية للألوان وقيماً ست عشرية وRGB وHSL وصيغ ألوان أخرى كثيرة. تُورَّث الخاصية للعناصر الفرعية، لذا تُعيَّن عادةً على الأصل لتوحيد لون كتلة نصية كاملة.
cursor	تتحكم خاصية cursor في شكل المؤشر المعروض عند مرور مؤشر الماوس فوق عنصر، وهي إشارة بصرية مهمة للتفاعلية. من خلال اختيار أنواع مؤشرات مختلفة — مثل pointer أو text أو not-allowed — يمكنك إخبار المستخدمين في لمحة ما إذا كان العنصر قابلًا للنقر أو للسحب أو معطّلًا.
clear	تتحكم خاصية clear فيما إذا كان يُسمح للعنصر بالجلوس بجانب عناصر عائمة على يساره أو يمينه أو كليهما. عند تعيينها إلى left أو right أو both، ينتقل العنصر أسفل العناصر العائمة ذات الصلة. وهي أداة مهمة لمنع تكسر التخطيط في التخطيطات القائمة على float.
columns	خاصية columns هي الاختصار لـ column-count و column-width، وتقسّم محتوى العنصر إلى عدة أعمدة تلقائيًا، بشكل مشابه لطباعة الصحف. تُستخدم غالبًا لعرض النصوص الطويلة في عدة أعمدة لقراءة أفضل.
column-count	تحدد خاصية column-count عدد الأعمدة التي يُقسَّم إليها محتوى العنصر. وهي جزء من تخطيط CSS متعدد الأعمدة، وتُدمج عادةً مع column-gap و column-rule لإنتاج طباعة متعددة الأعمدة بأسلوب الصحف.
column-gap	تحدد خاصية column-gap المسافة بين الأعمدة في تخطيط متعدد الأعمدة. وبصفتها جزءًا رئيسيًا من تخطيط CSS متعدد الأعمدة، فإن المسافة الجيدة الاختيار تحسّن بشكل ملحوظ قابلية قراءة النص متعدد الأعمدة ومظهره.
column-rule	خاصية column-rule هي اختصار لـ column-rule-width و column-rule-style و column-rule-color، وترسم خطًا بين الأعمدة في تخطيط متعدد الأعمدة. تشبه border، إذ تُصيَّر فقط داخل المسافة بين الأعمدة، مما يعزز الفصل البصري للنص متعدد الأعمدة.
column-span	تحدد خاصية column-span ما إذا كان العنصر يمتد عبر عدة أعمدة. عند تعيينها إلى all، يمتد العنصر عبر كل الأعمدة؛ وتُستخدم عادةً للعناوين أو العناوين الفرعية في تخطيط متعدد الأعمدة لتمييزها بصريًا عن المحتوى المقسّم إلى أعمدة.
column-width	تحدد خاصية column-width العرض المثالي لكل عمود في تخطيط متعدد الأعمدة. يستنتج المتصفح عدد الأعمدة الفعلي من عرض الحاوية وهذه القيمة، ويتدفق المحتوى إلى الأعمدة بشكل متكيّف؛ وهي مناسبة للطباعة المرنة متعددة الأعمدة.
clip-path	تقصّ خاصية clip-path العنصر إلى شكل هندسي محدد — مثل الدائرة أو المضلّع أو القطع الناقص — بحيث يُعرض الجزء الداخل للشكل فقط ويُخفى كل ما هو خارجه. على عكس القص المستطيل التقليدي في overflow: hidden، ينشئ clip-path مناطق مرئية بأي شكل، مما يجعله أداة قوية للتخطيطات الإبداعية والتأثيرات البصرية.
content	تُدرج خاصية content محتوى مُولّدًا قبل العنصر أو بعده وهي مطلوبة من العناصر الزائفة ::before و ::after. يمكنها إدراج سلاسل نصية أو صور أو قيم عدّاد أو قيم سمات، وكثيرًا ما تُستخدم لإضافة محتوى زخرفي أو مسح الطافيات أو عرض عناوين الروابط دون تغيير HTML.
counter-increment	تزيد counter-increment قيمة واحد أو أكثر من عدّادات CSS وهي واحدة من الآليات الأساسية وراء الترقيم التلقائي. في كل مرة يطابق فيها عنصر المحدد، يُزاد العدّاد المحدد بالخطوة المعطاة (1 افتراضيًا). وتحتاج إلى counter-reset ودالة counter() في content لإنتاج ترقيم تلقائي كامل.
counter-reset	تنشئ counter-reset عدّاد CSS جديدًا وتُهيئه بالقيمة المعطاة (0 افتراضيًا). وهي الخطوة الأولى في الترقيم التلقائي وتُضبط عادةً على عنصر أصل. وبالاشتراك مع counter-increment ودالة counter() في content، يمكنها إنتاج أنظمة ترقيم متعددة المستويات معقدة.
caret-color	تضبط الخاصية caret-color لون المؤشر — الخط العمودي الوامض — في العناصر القابلة للتحرير مثل حقول الإدخال ومناطق النص. وتتيح تخصيص لون المؤشر جعل عناصر النموذج متناسقة مع لوحة ألوان الصفحة أو إبراز موضع الإدخال الحالي.
color-scheme	تُخبر الخاصية color-scheme المتصفح بأنظمة الألوان (فاتح/داكن) التي يدعمها العنصر، مما يتيح للمتصفح اختيار ألوان افتراضية مناسبة لعرض عناصر التحكم الأصلية في العنصر مثل أشرطة التمرير وعناصر النموذج. وهي خاصية مهمة للتكيف مع الوضع الداكن.
D
display	تُعرّف خاصية display كيف يُعرض العنصر في الصفحة، سواء تصرف كعنصر على مستوى الكتلة أو عنصر مضمّن أو استخدم نماذج تخطيط حديثة مثل Flex أو Grid. وهي من أكثر الخصائص أساسيةً وقوةً في تخطيط CSS، وقادرة على تغيير سلوك أي عنصر تقريبًا في تدفق المستند.
direction	تحدد خاصية direction في CSS اتجاه كتابة النص — من اليسار إلى اليمين (ltr) أو من اليمين إلى اليسار (rtl). تؤثر بشكل رئيسي على اللغات المكتوبة من اليمين إلى اليسار مثل العربية والعبرية، وتغير أيضًا محاذاة النص وموضع شريط التمرير وتدفق التخطيط. في المواقع متعددة اللغات، يُفضَّل استخدام السمة dir على عنصر HTML بدل خاصية CSS.
E
empty-cells	تتحكم الخاصية empty-cells فيما إذا كانت الخلايا الفارغة (الخلايا التي لا تحتوي على محتوى أو تحتوي فقط على مسافات بيضاء) تعرض حدودها وخلفيتها. القيمة الافتراضية show تعرضها بشكل طبيعي؛ أما hide فتخفيها للحصول على مظهر أنظف. لا تنطبق هذه الخاصية إلا على الجداول التي تحتوي على border-collapse: separate.
F
font	تضبط خاصية الاختصار font في CSS كل الخصائص الفرعية المتعلقة بالخط في إعلان واحد: font-style وfont-variant وfont-weight وfont-stretch وfont-size وline-height وfont-family. تُبقي أوراق الأنماط موجزة، لكن font-size وfont-family إلزاميتان ويجب أن تتبع الخصائص الفرعية ترتيباً ثابتاً.
font-family	تحدد خاصية font-family في CSS قائمة ذات أولوية من أسماء عائلات الخطوط و/أو العائلات العامة للعنصر. يستخدم المتصفح أول خط متاح في القائمة، وينتقل للأسفل في السلسلة عند غياب خط ما.
font-size	تحدد خاصية font-size في CSS حجم النص. تقبل الكلمات الأساسية المطلقة أو الأطوال الثابتة أو الوحدات النسبية مثل em وrem، وهي من أكثر خصائص تنسيق النص استخدامًا.
font-weight	تحدد خاصية font-weight في CSS سُمك النص. تقبل الكلمات الأساسية المسماة بالإضافة إلى القيم الرقمية من 1 إلى 1000، ويُستخدم النص الغامق عادةً للعناوين والتأكيد.
font-style	تحدد خاصية font-style في CSS ما إذا كان النص يُعرض بأسلوب مائل (italic) أو منحرف (oblique). تقبل ثلاث قيم — normal وitalic وoblique — وتُستخدم غالبًا للاقتباسات والتأكيد والتنضيد الخاص.
float	تُخرج الخاصية float العنصر من التدفق العادي وتجعله يطفو يسارًا أو يمينًا حتى تلمس حافته كتلة الاحتواء أو عنصرًا طافيًا آخر. صُممت في الأصل لتطويق النص حول الصور، ثم استُخدمت بكثرة في تخطيطات متعددة الأعمدة؛ وبما أن Flexbox و Grid أصبحا منتشرين الآن، عادت إلى غرضها الأصلي.
flex	الخاصية flex هي الاختصار الأساسي في وحدة CSS Flexible Box Layout. تحدد كيف ينمو عنصر flex ويقلص وكم مساحة يشغل بالنسبة للفضاء المتبقي في الحاوية. وهي اختصار لـ flex-grow و flex-shrink و flex-basis، التي تتحكم في معامل النمو ومعامل التقلص والحجم الأولي على المحور الرئيسي للعنصر. باستخدام flex، يسهل بناء تخطيطات شائعة مثل الأعمدة متساوية العرض والعروض المتدفقة والترتيبات الانسيابية.
flex-direction	تُعرّف الخاصية flex-direction اتجاه المحور الرئيسي في حاوية flex، أي الاتجاه الذي تُرتّب به عناصر flex. افتراضيًا، تُرتّب العناصر أفقيًا من اليسار إلى اليمين (row). يمكن لهذه الخاصية تبديل التخطيط إلى عمودي أو إلى ترتيب معكوس. إنها أبسط عناصر التحكم في الاتجاه في flexbox وتحدد أي محور يؤثر عليه justify-content و align-items.
flex-grow	تضبط الخاصية flex-grow معامل نمو عنصر flex. تقرر مقدار الفضاء المتبقي في الحاوية الذي يمكن للعنصر أن يأخذه. القيمة الافتراضية هي 0، أي لا ينمو العنصر ويحتفظ بحجمه الأصلي. القيم الأكبر تعطي العنصر نصيبًا أكبر: يُوزَّع الفضاء المتبقي بين جميع العناصر بالتناسب مع قيم flex-grow الخاصة بها.
font-variant	تطبّق الخاصية CSS font-variant تأثيرات متغيّرات الخط مثل small-caps، التي تعرض الحروف الصغيرة كحرف كبيرة بحجم مُصغّر. والقيمة small-caps هي الميزة الأكثر دعمًا على نطاق واسع.
font-size-adjust	تحافظ خاصية font-size-adjust في CSS على ثبات الارتفاع-x (ارتفاع الحرف x الصغير) عندما تعود الخطوط إلى بدائلها، مما يمنع قفزة بصرية كبيرة في الحجم عند مزج خطوط مختلفة. وهي خاصية من CSS3.
font-stretch	تحدد خاصية font-stretch في CSS نسخةً مُكثّفةً أو ممتدةً من الخط، من ultra-condensed إلى ultra-expanded عبر تسعة مستويات. ولا يظهر تأثيرها إلا إذا كان الخط يوفر فعليًا نسخة عرض مطابقة.
flex-wrap	تتحكم خاصية flex-wrap فيما إذا كانت عناصر flex تُجبر على سطر واحد أو تلتف إلى عدة أسطر. قيمتها الافتراضية هي nowrap، التي تبقي كل العناصر في سطر واحد حتى لو ضُغطت أو تجاوزت حافة الحاوية. أما ضبط wrap فإنه يسمح للعناصر بالتدفق إلى السطر التالي، وهو أمر مفيد جدًا في التخطيطات المتجاوبة وترتيبات البطاقات متعددة الأعمدة.
flex-flow	flex-flow هو اختصار للخصائص flex-direction و flex-wrap. يحدد اتجاه المحور الرئيسي وما إذا كانت العناصر تلتف في إعلان واحد. وبما أن الخاصيتين تُستخدمان معًا دائمًا تقريبًا، فإن flex-flow يحافظ على الكود أكثر إيجازًا. قيمته الافتراضية هي row nowrap، أي ترتيب أفقي دون التفاف.
flex-shrink	تضبط خاصية flex-shrink معامل الانكماش لعنصر flex، وتقرر مقدار انكماش العنصر عندما لا يكون لدى الحاوية مساحة كافية. قيمتها الافتراضية هي 1، أي أن العناصر تنكمش حسب الحاجة. أما القيمة 0 فتبقي العنصر بحجمه الأصلي حتى عندما ينفد الفضاء. والقيم الأكبر تجعل العنصر ينكمش أكثر عند ضيق المساحة.
flex-basis	تضبط خاصية flex-basis الحجم الرئيسي الأولي لعنصر flex قبل توزيع المساحة المتبقية — أي “الحجم المثالي” للعنصر. قيمتها الافتراضية هي auto، التي تحدد حجم العنصر من محتواه أو من width/height مضبوطة. وعند استخدام طول محدد، يبدأ العنصر من ذلك الحجم ثم ينمو أو ينكمش وفقًا لـ flex-grow و flex-shrink.
filter	تطبّق خاصية filter تأثيرات رسومية على العنصر — مثل التمويه والسطوع والتباين والرمادي — تشبه مرشّحات Photoshop. تعمل على المخرجات المرسومة للعنصر وتؤثر على العنصر وجميع عناصره الفرعية، مما يجعلها أداة شائعة لمعالجة الصور والتأثيرات البصرية.
G
grid-template-columns	تُعرّف الخاصية grid-template-columns عدد وعرض مسارات الأعمدة في حاوية grid. من خلال تحديد حجم كل مسار عمود، تتحكم بدقة في بنية الأعمدة، مما يجعلها واحدة من الإعدادات الأساسية في CSS Grid. تدعم الأطوال الثابتة والنسب المئوية والوحدة fr ودوال قوية مثل repeat() و minmax().
grid	الخاصية grid هي اختصار CSS Grid. في إعلان واحد، تُحدّد المسارات الصريحة والمسارات التلقائية واتجاه التدفق التلقائي لحاوية grid. وهي مجموع عائلتي grid-template و grid-auto، وأكمل اختصار للشبكة عندما تريد وصف بنيتها بالكامل.
gap	تضبط خاصية gap التباعد بين الصفوف والأعمدة في تخطيطات flex و grid. وهي اختصار لـ row-gap و column-gap. ولا يضيف gap مساحة إلا بين العناصر وليس على حواف الحاوية، مما يجعله أنظف وأكثر قابلية للتنبؤ من الهوامش. فهو يزيل مشقة مسح الهوامش الأولى والأخيرة في التباعد التقليدي المعتمد على margin.
grid-template-rows	تحدد خاصية grid-template-rows عدد وارتفاع مسارات الصفوف في حاوية grid. ومن خلال تحديد حجم كل مسار صف، تتحكم بدقة في بنية الصفوف. وتُستخدم مع grid-template-columns لتشكيل الهيكل الأساسي للشبكة. وتدعم أطوالًا ثابتة ونسبًا مئوية ووحدة fr ودوالًا مثل minmax().
grid-template-areas	تتيح خاصية grid-template-areas تعريف بنية تخطيط الشبكة بصريًا عبر مناطق مسماة. وتمثل كل سلسلة نصية صفًا واحدًا، ويمثل كل معرّف داخل السلسلة المنطقة التي تتبعها خلية؛ فالخلايا المتجاورة التي تحمل نفس الاسم تندمج تلقائيًا في منطقة واحدة. وتحسّن بشكل كبير قابلية قراءة تخطيطات الشبكة وهي مناسبة بوجه خاص لتصاميم الصفحة الكاملة.
grid-column	grid-column هو اختصار لـ grid-column-start و grid-column-end. يضع عنصر الشبكة على الاتجاه الأفقي. ومن خلال تحديد أرقام خطوط الشبكة البداية والنهاية، تتحكم في عدد الأعمدة التي يمتد عليها العنصر. وهي خاصية أساسية لبناء تخطيطات شبكة مرنة.
grid-row	grid-row هو الاختصار لـ grid-row-start و grid-row-end. يحدد موضع عنصر الشبكة في الاتجاه الرأسي. من خلال تحديد أرقام خطوط الشبكة البداية والنهاية، يمكنك التحكم في عدد الصفوف التي يمتد عبرها العنصر. وبالاقتران مع grid-column، يوفر تحكماً دقيقاً في موضع العنصر وحجمه.
grid-area	grid-area هو اختصار يضع عنصر الشبكة بتعيين القيم الأربع دفعة واحدة: grid-row-start و grid-column-start و grid-row-end و grid-column-end. يعمل بأرقام خطوط الشبكة لتحديد موضع دقيق، أو بمنطقة مسماة معرّفة في grid-template-areas. وهو أكثر الخصائص مرونةً في تحديد موضع الشبكة.
grid-auto-columns	تتحكم خاصية grid-auto-columns في عرض مسارات الأعمدة المنشأة ضمنياً في حاوية الشبكة. عند وضع عنصر شبكة في عمود لم يُعرّفه grid-template-columns، ينشئ المتصفح عموداً ضمنياً تلقائياً؛ وتضبط هذه الخاصية حجم تلك الأعمدة المُنشأة تلقائياً. وهي مفيدة جداً عند التعامل مع محتوى ديناميكي أو عدد غير معروف من عناصر الشبكة.
grid-auto-rows	تتحكم خاصية grid-auto-rows في ارتفاع مسارات الصفوف المنشأة ضمنياً في حاوية الشبكة. عند وضع عنصر شبكة في صف لم يُعرّفه grid-template-rows، ينشئ المتصفح صفاً ضمنياً تلقائياً؛ وتضبط هذه الخاصية حجم تلك الصفوف المُنشأة تلقائياً. وتضمن أن الصفوف غير المعرّفة صراحةً تظل متسقة الارتفاع.
grid-auto-flow	تتحكم خاصية grid-auto-flow في كيفية وضع عناصر الشبكة غير الموضوعة صراحةً تلقائياً. تقرر ما إذا كانت العناصر تُملأ حسب الصف أو حسب العمود، وما إذا كان وضع التعبئة الكثيفة (dense) مُفعّلاً لملء الفجوات في التخطيط. وللخاصية تأثير مباشر على ترتيب الشبكة العام.
H
height	تضبط خاصية height ارتفاع منطقة محتوى العنصر وهي، إلى جانب width، خاصية أبعاد أساسية في نموذج الصندوق بـ CSS. تسمح قيمتها الافتراضية auto للمتصفح بحساب الارتفاع من المحتوى، وهو الأسلوب الأكثر شيوعًا والموصى به. ولا تُفعَّل النسب المئوية للارتفاع إلا عندما يكون للأصل ارتفاع صريح؛ وإلا فتُحل إلى 0.
hyphens	تتحكم خاصية hyphens في CSS فيما إذا كان المتصفح يستخدم الواصلات (-) لكسر الكلمات داخل الأسطر، وتُستخدم عادةً في اللغات متعددة المقاطع مثل الإنجليزية. مع تفعيل الوصل التلقائي، يُدرج المتصفح الواصلات في مواضع مناسبة بناءً على قاموس اللغة، فيلتف النص بشكل أكثر طبيعية عند حد الحاوية وتقل الفجوات غير المتساوية.
I
isolation	تتحكم خاصية isolation فيما إذا كان العنصر يُنشئ سياق تكديس جديداً. عند ضبطها على isolate، يُشكّل العنصر بيئة دمج مستقلة بحيث يمزج mix-blend-mode للعناصر الفرعية مع المحتوى داخل العنصر فقط، دون تسريب إلى العناصر الخارجية. إنها خاصية أساسية للتحكم بدقة في نطاق أنماط الدمج.
inset	الخاصية inset هي الاختصار لخصائص الإزاحة الأربع top و right و bottom و left، وتضبط إزاحات العنصر المتموضع على جميع الجوانب دفعة واحدة. وقيمتها الافتراضية auto تعني عدم وجود إزاحة. ولا تُطبَّق إلا على العناصر التي تكون قيمة position لها غير static، وصياغتها تشبه margin، إذ تدعم من 1 إلى 4 قيم.
J
justify-content	تضبط الخاصية justify-content كيفية محاذاة عناصر flex على طول المحور الرئيسي وكيفية توزيع المساحة بين العناصر وبين العناصر وحواف الحاوية. هي خاصية المحاذاة الأكثر استخدامًا في flexbox وتدعم ترتيبات left و right و center و space-between و space-around و space-evenly. يُحدَّد المحور الرئيسي بواسطة flex-direction.
justify-items	تضبط خاصية justify-items المحاذاة الافتراضية لجميع العناصر على المحور المضمّن (الصف) داخل الحاوية. تُطبَّق بشكل رئيسي على تخطيطات grid ولا تأثير لها في flexbox. وهي النظيرة لكل عنصر من justify-content: فهي تحاذي كل عنصر داخل خليته الخاصة في الشبكة بدلًا من العناصر كمجموعة. قيمتها الافتراضية هي stretch، التي تمد العناصر لملء الخلية.
justify-self	تضبط خاصية justify-self محاذاة عنصر واحد على المحور المضمّن، متجاوزةً القيمة الافتراضية justify-items للحاوية. تُطبَّق بشكل رئيسي على تخطيطات grid ولا تأثير لها في flexbox. وبها يمكن لعنصر واحد أن ينحاذ بشكل مستقل داخل خليته دون التأثير على محاذاة العناصر الأخرى.
L
line-height	تحدد خاصية line-height في CSS المسافة الرأسية بين سطور النص. يؤدي ارتفاع السطر المختار جيدًا إلى تحسين كبير في قابلية قراءة النصوص الطويلة، ويكون عادةً حوالي 1.5 ضعف حجم الخط.
letter-spacing	تحدد خاصية letter-spacing في CSS المسافة بين الأحرف في النص. القيم الموجبة تزيد الفجوة والقيم السالبة تضيّقها. وتُستخدم غالبًا في العناوين أو لتحسين قابلية قراءة النص الإنجليزي بالأحرف الكبيرة.
left	تحدد خاصية left إزاحة عنصر موضعي من الحافة اليسرى لكتلته المحتوية، وتُقاس إلى اليمين. تُطبَّق فقط على العناصر الموضعية غير الساكنة، وهي من خصائص الإزاحة الأكثر استخدامًا، وتُقرن عادةً بالتموضع absolute أو fixed لتموضع دقيق على اليسار.
list-style	خاصية list-style هي الاختصار لـ list-style-type و list-style-position و list-style-image، وتضبط كل جوانب علامات عناصر القائمة دفعة واحدة. والافتراضي هو disc outside none. وهي أكثر الطرق كفاءة للتحكم في مظهر القائمة، وتُستخدم عادةً لتخصيص أو إعادة ضبط أنماط القائمة بسرعة.
list-style-type	تضبط list-style-type العلامة أمام عناصر القائمة، مثل نقطة ممتلئة أو دائرة مجوفة أو رقم أو رقم روماني. والافتراضي هو disc. وتدعم العديد من العلامات المُعرّفة مسبقًا والسلاسل المخصصة، مما يجعلها الخاصية الأكثر استخدامًا للتحكم في المظهر المرئي للقائمة.
list-style-position	تتحكم list-style-position فيما إذا كانت علامة القائمة داخل أو خارج كتلة محتوى عنصر القائمة. والافتراضي outside يضع العلامة خارج كتلة المحتوى بحيث تُحاذى السطر الأول من النص بدقة؛ أما inside فيسحب العلامة إلى داخل الكتلة فيلتف النص حولها. وتؤثر على تدفق القائمة ومسافتها البادئة.
list-style-image	تستبدل list-style-image العلامة الافتراضية (نقطة أو رقم وغيرها) بصورة مخصصة على عناصر القائمة. والقيمة الافتراضية none تعني عدم استخدام صورة. كثيرًا ما تُستخدم لإعطاء القوائم أيقونات صغيرة ذات هوية أو أسهمًا زخرفية لمظهر أغنى.
M
min-width	تضبط خاصية min-width الحد الأدنى لعرض العنصر، مانعةً إياه من الانضغاط بشكل صغير جدًا عندما يضيق الحاوية. قيمتها الافتراضية 0 تعني عدم وجود حد أدنى. تُستخدم غالبًا مع width و max-width وهي أداة مهمة لحماية قابلية القراءة في التخطيطات المتجاوبة.
max-width	تضبط خاصية max-width الحد الأقصى لعرض العنصر، مانعةً إياه من أن يصبح عريضًا جدًا على الشاشات الكبيرة مما يضر بقابلية القراءة. قيمتها الافتراضية none تعني عدم وجود حد أعلى. إنها أداة أساسية في التصميم المتجاوب، تُدمج غالبًا مع width:100% لكي تتكيف عناصر الوسائط دون تجاوز حجمها الجوهري.
min-height	تضبط خاصية min-height الحد الأدنى لارتفاع العنصر، مما يضمن أن يحتفظ بارتفاع معين حتى عندما يكون محتواه قصيرًا. قيمتها الافتراضية 0 تعني عدم وجود حد أدنى. تُستخدم غالبًا للحفاظ على اتساق الأقسام المرئي في الصفحة أو لتثبيت التذييل أسفل الصفحة.
max-height	تضبط خاصية max-height الحد الأقصى لارتفاع العنصر، مانعةً إياه من أن يصبح طويلًا جدًا فيكسر التخطيط. قيمتها الافتراضية none تعني عدم وجود حد أعلى. تُدمج غالبًا مع overflow:auto بحيث يظهر شريط تمرير للمحتوى الأطول من الحد، وهو نمط شائع للمناطق قابلة التمرير ذات الارتفاع الثابت.
margin	تضبط خاصية margin المساحة حول العنصر، أي المسافة بين حدوده والعناصر المجاورة. إنها واحدة من أكثر خصائص نموذج الصندوق استخدامًا، وتُستخدم للتحكم في التباعد بين العناصر وتوسيط العناصر أفقيًا وإضافة مساحة للتنفس. يمكن أن تكون الهوامش أطوالًا ثابتة أو نسبًا مئوية أو auto للقيم التي يحسبها المتصفح.
mix-blend-mode	تتحكم خاصية mix-blend-mode في كيفية مزج محتوى العنصر لألوانه مع المحتوى الموجود أسفله (خلفية أو عناصر مجاورة)، تشبه أنماط دمج الطبقات في Photoshop. تتيح للنصوص والصور إنتاج مزج لوني غني على خلفية، وتُستخدم غالباً في الملصقات واللافتات وتصميم الصفحات الفني.
O
overflow	تتحكم خاصية overflow فيما يحدث عندما يتجاوز المحتوى حدود حاويته وهي الأداة الأساسية للتعامل مع المحتوى المتجاوز. القيمة الافتراضية visible تسمح بظهور المحتوى المتجاوز؛ و hidden تَقصه؛ و scroll تعرض أشرطة التمرير دائمًا؛ و auto تعرض أشرطة التمرير فقط عند الحاجة، وهو القيمة الأكثر استخدامًا.
outline	يرسم outline خطاً حول العنصر خارج حدوده، ويُستخدم أساساً للإشارة إلى حالة التركيز. على عكس border، لا يشغل outline مساحة ولا يؤثر في حجم العنصر أو تخطيط الصفحة. إنها خاصية اختصار تضبط لون الإطار الخارجي ونمطه وعرضه دفعة واحدة.
opacity	تحدد الخاصية opacity الشفافية العامة للعنصر، بقيم تتراوح من 0 إلى 1. 0 شفاف تماماً و1 معتم تماماً. على عكس خلفية شفافة، تؤثر opacity في العنصر وكل محتواه، مما يجعلها شائعة لتأثيرات الظهور/الاختفاء التدريجي والتدرّج البصري.
overflow-x	تتحكم خاصية overflow-x تحديدًا في كيفية معالجة المحتوى الذي يفيض الحاوية أفقيًا وتقبل نفس قيم overflow. القيمة الافتراضية visible تسمح بظهور الفائض. تُستخدم عادةً لتعطيل التمرير الأفقي للصفحة أو لجعل منطقة قابلة للتمرير أفقيًا فقط.
overflow-y	تتحكم خاصية overflow-y تحديدًا في كيفية معالجة المحتوى الذي يفيض الحاوية رأسيًا وتقبل نفس قيم overflow. القيمة الافتراضية visible تسمح بظهور الفائض. وهي أكثر ضوابط الفائض استخدامًا وتُقترن غالبًا بـ max-height لمناطق قابلة للتمرير بارتفاع ثابت.
outline-offset	تتحكم الخاصية outline-offset في المسافة بين المخطط الخارجي (outline) وحافة الحدود (border) الخاصة بالعنصر. فالقيمة الموجبة تدفع المخطط الخارجي إلى الخارج بعيدًا عن العنصر، بينما تُسحبه القيمة السالبة إلى الداخل ليصبح أقرب إلى العنصر أو حتى داخله. تُستخدم عادةً مع الخاصية outline لتحسين التأثير المرئي.
order	تضبط خاصية order ترتيب عرض عناصر flex داخل حاوية. قيمتها الافتراضية هي 0. تظهر العناصر ذات القيم الأصغر أولًا؛ وتُرتَّب العناصر ذات القيم المتساوية حسب موضعها في DOM. ولا تغير الخاصية سوى الترتيب المرئي، وليس بنية DOM، لذا فهي تؤثر أيضًا على ترتيب القراءة لقارئات الشاشة وترتيب تركيز مفتاح Tab. استخدمها بحذر.
object-fit	تتحكم خاصية object-fit في كيفية احتواء محتوى عنصر مستبدل مثل <img> أو <video> ضمن عرضه وارتفاعه المحددين. عندما تختلف نسبة أبعاد العنصر عن محتواه، يقرر object-fit ما إذا كان يمطّ أو يقطع مع الحفاظ على النسبة أو يعرض كل شيء — وهي أداة لا غنى عنها لتخطيطات الصور المتجاوبة.
object-position	تتحكم خاصية object-position في المكان الذي يُعرض فيه محتوى عنصر مستبدل مثل <img> أو <video> داخل حاويته. عندما يترك object-fit مساحة أو يقص المحتوى، يضبط object-position بؤرة المحاذاة لتبقى الأجزاء المهمة داخل المنطقة المرئية.
overscroll-behavior	تتحكم خاصية overscroll-behavior فيما يحدث عندما يصل حاوية التمرير إلى حدودها — فمثلًا ما إذا كان حدث التمرير يمر إلى الحاوية الأصلية (scroll chaining) أو يُطلق سلوكًا افتراضيًا للمتصفح مثل تحديث الصفحة أو التنقل في السجل. وهي خاصية مفتاحية لحل مشكلة اختراق التمرير في الحاويات المتداخلة.
orphans	تتحكم الخاصية orphans في الحد الأدنى لعدد الأسطر من نهاية الفقرة التي يجب أن تبقى في أعلى صفحة جديدة عند الطباعة، والقيمة الافتراضية هي 2. إنها خاصية من خصائص وسائط الصفحات في CSS تمنع ظهور السطر الأخير من الفقرة بمفرده في أسفل الصفحة السابقة (يسمى «السطر اليتيم»)، مما يحسن قابلية القراءة عند الطباعة.
P
padding	تضبط خاصية padding المساحة بين محتوى العنصر وحدوده. بصفتها جزءًا أساسيًا من نموذج الصندوق في CSS، تُستخدم عادةً لإعطاء المحتوى مساحة للتنفس داخل الحاوية وتكبير مناطق النقر وإبراز المحتوى مقابل خلفية. لا يمكن أن تكون قيم padding إلا أطوالًا أو نسبًا مئوية، ولا تكون سالبة أبدًا، ولا يخضع padding للطي.
position	تحدد خاصية position كيفية تموضع العنصر، سواء بقي في تدفق المستند أو أُزاح بالنسبة لنقطة مرجعية ما. وبالاقتران مع خصائص top وright وbottom وleft، تُتاح أنماط التموضع النسبي والفوري والثابت واللاصق لتأثيرات تخطيط شائعة.
pointer-events	تتحكم خاصية pointer-events فيما إذا كان العنصر يمكن أن يصبح هدفًا لأحداث المؤشر مثل النقر والتحويم. عند ضبطها على none، يتجاهل العنصر أحداث المؤشر تمامًا وتمر إلى العناصر الموجودة أسفله. وهي أداة شائعة للنقر الاختراقي وتعطيل التفاعل والتفاعلات المعقدة لواجهة المستخدم المتعددة الطبقات.
place-items	place-items هو اختصار لـ align-items و justify-items. على حاوية شبكة، يضبط كيفية محاذاة كل عنصر شبكة داخل خليته الخاصة في إعلان واحد. يتحكم في المحاذاة الرأسية (align) والأفقية (justify) في آن واحد، مما يجعله أداة ملائمة لتوسيط أو محاذاة محتوى الشبكة.
place-content	place-content هو اختصار لـ align-content و justify-content. على حاوية شبكة، يتحكم في كيفية محاذاة منطقة محتوى الشبكة بأكملها بالنسبة للحاوية. عندما يكون الحجم الإجمالي لمسارات الشبكة أصغر من الحاية، تقرر هذه الخاصية كيفية توزيع المساحة المتبقية. وهو مفتاح لتوسيط وتوزيع الشبكة بأكملها.
place-self	place-self هو اختصار لـ align-self و justify-self. يتحكم في محاذاة عنصر شبكة واحد داخل خليته. وعلى عكس place-items، يُضبط place-self على عنصر الشبكة الفردي ويتجاوز إعداد place-items على مستوى الحاوية، مما يلبي احتياجات محاذاة خاصة لعنصر واحد.
perspective	تُعرّف خاصية perspective قوة المنظور في التحويلات ثلاثية الأبعاد — وهي المسافة من عين المشاهد إلى المستوى z=0. القيم الأصغر تُنتج تأثيراً أقوى (تباين أكثر إفراطاً بين القريب الكبير والبعيد الصغير)، بينما القيم الأكبر تجعل المنظور مسطّحاً. يجب ضبط هذه الخاصية على العنصر الأب للعنصر الذي يطبّق التحويل ثلاثي الأبعاد، وهي أساس المشاهد ثلاثية الأبعاد الواقعية.
perspective-origin	تُعرّف خاصية perspective-origin موضع المشاهد للمنظور ثلاثي الأبعاد — أي المكان الذي يُسقط فيه نقطة التلاشي على العنصر. الافتراضي هو مركز العنصر (50% 50%). يؤدي تعديلها إلى تغيير الزاوية التي تُرى منها المشهد ثلاثي الأبعاد — من الأعلى أو من الجانب وما إلى ذلك — وتعمل معاً مع perspective.
Q
quotes	تُخصص خاصية quotes علامات الاقتباس التي تستخدمها عناصر q والكلمات المفتاحية open-quote/close-quote في content. افتراضيًا، يختارها المتصفح بناءً على اللغة. وتدعم أزواجًا متعددة من علامات الاقتباس، فتتبدّل الاقتباسات المتداخلة بأنماطها تلقائيًا — وهو أداة مهمة للطباعة الدولية.
R
right	تحدد خاصية right إزاحة عنصر موضعي من الحافة اليمنى لكتلته المحتوية، وتُقاس إلى اليسار. تُطبَّق فقط على العناصر الموضعية غير الساكنة، وتُستخدم عادةً مع التموضع absolute أو fixed لمحاذاة العناصر إلى اليمين.
rotate	خاصية rotate هي خاصية تحويل فردية تدوّر العنصر حول محور محدد في فضاء ثنائي أو ثلاثي الأبعاد. كخاصية مستقلة يمكن التحكم فيها بشكل منفصل عن تحويلات أخرى مثل translate و scale، وهو أمر مفيد بشكل خاص عند الرغبة في تحريك زاوية الدوران بمفردها.
resize	تتحكم الخاصية resize فيما إذا كان بإمكان المستخدم تغيير حجم العنصر بالسحب، وفي أي اتجاهات. وتُستخدم عادةً على عناصر مثل <textarea> لتمكين المستخدمين من تغيير الحجم بحرية حسب الحاجة، مما يحسّن قابلية استخدام النموذج.
S
scale	خاصية scale هي خاصية تحويل فردية تكبّر العنصر أو تُصغّره في فضاء ثنائي أو ثلاثي الأبعاد. كخاصية مستقلة يمكن التحكم فيها بشكل منفصل عن تحويلات أخرى مثل translate و rotate، وهو أمر مفيد بشكل خاص عند الرغبة في تحريك التكبير بمفرده — مثل تغذية راجعة عند الضغط على زر، ومعاينة تكبير الصور، وتفاعلات مشابهة.
scroll-behavior	تتحكم خاصية scroll-behavior فيما إذا كانت عملية التمرير تقفز إلى الوجهة فوراً أو تتحرك بسلاسة. مع smooth، عند النقر على رابط رابط (anchor) أو التمرير عبر JavaScript، ينزلق إلى الموضع المستهدف بدلاً من القفز، مما يحسّن تجربة المستخدم بشكل ملحوظ.
scroll-snap-type	تُفعّل خاصية scroll-snap-type تأثير الالتقاط أثناء التمرير، مما يجعل حاوية التمرير تُحاذي العناصر المحددة إلى حافتها أو مركزها عند التوقف. تُستخدم عادةً في المعارض وصفحات التمرير بملء الشاشة والقوائم الأفقية المنزلقة، مما يجعل تجربة التمرير أكثر دقة وتحكمًا.
scrollbar-color	تُخصص خاصية scrollbar-color لون شريط التمرير في المتصفح، بما في ذلك المقبض والمسار. وهي جزء من مواصفات CSS Scrollbars وتوفر طريقة بسيطة لمطابقة شريط التمرير مع لوحة ألوان الصفحة دون إضافات JavaScript.
T
text-align	تحدد خاصية text-align في CSS المحاذاة الأفقية للنص داخل عنصر على مستوى الكتلة. تدعم القيم left وright وcenter وjustify وتُطبَّق على الفقرات والعناوين وخلايا الجداول وأي حاوية كتلة أخرى. لاحظ أن text-align يحاذي المحتوى داخل العنصر وليس العنصر نفسه.
text-decoration	تضيف خاصية text-decoration في CSS خطوطًا زخرفية للنص، وأكثرها شيوعًا التسطير والتعليق والشطب. وهي اختصار لأربع خصائص فرعية: text-decoration-line وtext-decoration-style وtext-decoration-color وtext-decoration-thickness. افتراضيًا تكون الروابط (عناصر a) مسطّرة؛ وتزيل أنماط إعادة الضبط هذا التسطير عادةً.
text-transform	تغيّر خاصية text-transform في CSS طريقة عرض النص من حيث الحالة — uppercase أو lowercase أو capitalized — دون تعديل المحتوى الأساسي. يبقى النص الأصلي في HTML كما هو، لذا لا تتأثر قارئات الشاشة والنص المنسوخ؛ والتحويل بصري بحت.
text-indent	تحدد خاصية text-indent في CSS الإزاحة الأفقية للسطر الأول من عنصر على مستوى الكتلة، وتُستخدم غالبًا لإزاحة السطر الأول من الفقرة. تؤثر فقط على السطر الأول. يمكن أن تكون القيم طولًا ثابتًا (مثل 2em) أو نسبة مئوية من عرض الكتلة الحاوية، وتنشئ القيم السالبة إزاحة معلّقة.
text-shadow	تضيف خاصية text-shadow في CSS ظلالًا للنص لإعطائه عمقًا وتدرّجًا بصريًا أمام الخلفية. لكل ظلة إزاحة أفقية وإزاحة رأسية ونصف قطر ضبابي ولون؛ ويمكن تكديس عدة ظلال مفصولة بفواصل لإنشاء تأثيرات التوهج أو النقش البارز أو التحديد.
top	تُعرّف الخاصية top إزاحة العنصر الموضوع من الحافة العلوية لكتلة الاحتواء الخاصة به. لا تُطبَّق إلا على العناصر التي يكون موضعها (position) relative أو absolute أو fixed أو sticky، وتُستخدم للتحكم بدقة في الموضع الرأسي للعنصر.
transition	الخاصية transition هي اختصار لـ transition-property و transition-duration و transition-timing-function و transition-delay. تتيح تغييرات سلسة ومتحركة بين قيم الخصائص عندما يتغير حالة العنصر — مثل :hover أو :focus — بدلًا من القفزات المفاجئة. من خلال تحديد الخاصية الهدف والمدة ومنحنى التنعيم والتأخير، يمكنك بسهولة إنشاء تأثيرات تفاعلية سلسة. وهي أداة أساسية لبناء التفاعلات الدقيقة في الويب الحديث.
transform	تُطبّق الخاصية transform تحويلات هندسية ثنائية أو ثلاثية الأبعاد على عنصر، بما في ذلك النقل والدوران والقياس والإمالة. تحدث التحويلات في مرحلة العرض ولا تؤثر على تخطيط تدفق المستند، ما يجعلها أداة شائعة لتحقيق تأثيرات بصرية عالية الأداء. والـ transform إحدى الخصائص الأساسية في رسوم CSS المتحركة وتصميم التفاعل.
tab-size	تحدد خاصية tab-size في CSS عرض حرف الجدولة (\t) كما يُعرض في الصفحة، وتُستخدم عادةً للتحكم في الإزاحة داخل كتل الأكواد وعناصر pre. والقيمة الافتراضية هي 8.
text-align-last	تحدد خاصية text-align-last في CSS محاذاة السطر الأخير داخل عنصر على مستوى الكتلة، وغالبًا تُقترن بـ text-align: justify. افتراضيًا لا تُطبَّق قواعد محاذاة text-align على السطر الأخير من الفقرة؛ ويتيح text-align-last التحكم في ذلك السطر الأخير بشكل منفصل لتنسيقات مبررة أكثر مرونة وجاذبية.
text-justify	تحدد خاصية text-justify في CSS كيف يضبط المتصفح المسافة عندما يكون text-align مضبوطًا على justify. تتحكم فيما إذا كانت التسوية تتحقق عبر تعديل المسافة بين الكلمات أو بين الأحرف أو مزيج منهما، وتؤثر أساسًا على التفاصيل الطباعية عند استخدام قيمة justify.
text-overflow	تتحكم خاصية text-overflow في CSS في كيفية عرض النص عندما يفيض حاويته. وأكثر استخداماتها شيوعًا، مقترنة بـ overflow: hidden وwhite-space: nowrap، هو عرض النص المتجاوز في سطر واحد بعلامة حذف. تدعم وضعين: clip (قص) وellipsis (…)، مما يجعلها أداة قياسية للتعامل مع النصوص الطويلة في تصميم الواجهات.
text-underline-offset	تحدد خاصية text-underline-offset في CSS المسافة بين التسطير والخط الأساسي للنص، مما يجعل موضع التسطير أكثر مرونة وأناقة. افتراضيًا يلتصق التسطير بأسفل النص؛ ويترك الإزاحة فجوة بحيث لا يصطدم الخط مع الأجزاء الهابطة مثل g وy.
transition-property	تحدد خاصية transition-property أي خصائص CSS تُطبَّق عليها تأثير انتقال عند تغيّر قيمها. قيمتها الافتراضية هي all، مما يعني أن كل خاصية قابلة للتحريك تشارك في الانتقال؛ ويمكنك أيضاً سرد أسماء خصائص محددة صراحةً لتجنب تكلفة أداء غير ضرورية وسلوك حركة غير متوقع.
transform-origin	تحدد خاصية transform-origin النقطة — الأصل — التي يتحول العنصر حولها. الافتراضي هو مركز العنصر (50% 50%)، وتُنفَّذ جميع عمليات التدوير والقياس والانحراف حول هذه النقطة. ومن خلال تعديل الأصل يمكنك إنشاء تأثيرات مختلفة جداً، مثل التدوير حول حافة أو القياس من زاوية.
transform-style	تقرر خاصية transform-style ما إذا كان أبناء العنصر يحتفظون بوضعهم ثلاثي الأبعاد في الفضاء. القيمة الافتراضية flat تُسطّح الأبناء في المستوى ثنائي الأبعاد للأصل؛ ومع preserve-3d يمكن وضع الأبناء في فضاء ثلاثي الأبعاد مستقل، وبالاقتران مع perspective تُبنى مشاهد ثلاثية الأبعاد حقيقية.
translate	خاصية translate هي خاصية تحويل فردية تحرّك العنصر في فضاء ثنائي الأبعاد أو ثلاثي الأبعاد. لها نفس تأثير transform: translate()، ولكن كخاصية مستقلة تسمح بالتحكم في الإزاحة بشكل منفصل دون التأثير على تحويلات أخرى مثل التدوير والقياس — وهو أمر مفيد جداً عند الرغبة في تحريك كل تحويل بشكل مستقل.
table-layout	تحدد table-layout الخوارزمية المستخدمة لحساب عرض أعمدة الجدول. والافتراضي auto يحدد عرض الأعمدة بناءً على المحتوى، فتتسع الأعمدة لتناسب المحتوى الكبير. أما fixed فتحدد عرض الأعمدة من الصف الأول أو من عرض صريح مع تجاهل المحتوى، وتُعرض أسرع — وهي مناسبة للجداول ذات البيانات الضخمة.
U
unicode-bidi	تتحكم خاصية unicode-bidi في CSS في خوارزمية الاتجاه ثنائي الاتجاه الخاصة بيونيكود للنص، وتعالج الحالات التي تُمزج فيها نصوص باتجاهات مختلفة (مثل الإنجليزية والعربية). يمكنها تغيير مستوى التضمين للنص أو تجاوز الاتجاه أو فصل عنصر عن سياق اتجاه العنصر الأصل، مما يجعلها خاصية أساسية للتعامل مع اتجاهات النص المعقدة في المواقع المترجمة.
user-select	تتحكم الخاصية user-select فيما إذا كان بإمكان المستخدمين تحديد النص باستخدام الماوس. عند ضبطها على none، لا يمكن تحديد النص داخل العنصر — وتُستخدم عادةً للأزرار والتسميات والأيقونات التي لا حاجة فيها للنسخ، مما يمنع التحديد العرضي لمحتوى غير ذي صلة.
V
visibility	تتحكم خاصية visibility فيما إذا كان العنصر مرئيًا. الفرق الجوهري عن display:none هو أن hidden لا يزال يشغل مساحة في التخطيط؛ العنصر ببساطة لا يُصيَّر بصريًا. القيمة الافتراضية visible تُظهر العنصر بشكل طبيعي. هذه الخاصية موروثة وتُستخدم غالبًا لإخفاء العناصر مع إبقاء مساحتها.
vertical-align	تتحكم خاصية vertical-align في CSS في المحاذاة الرأسية للعناصر السطرية أو لمحتوى داخل خلايا الجدول. تدعم كلمات مفتاحية مثل top وmiddle وbaseline وقيم الطول والنسبة المئوية، وتُستخدم عادةً لمحاذاة الأيقونات مع النص وتحريك العناصر السطرية أو ت positioning محتوى خلايا الجدول. لاحظ أن vertical-align لا يؤثر على العناصر على مستوى الكتلة.
W
width	تضبط خاصية width عرض منطقة محتوى العنصر وهي إحدى أكثر خصائص الأبعاد استخدامًا في نموذج الصندوق (box model) في CSS. تؤثر هذه الخاصية فقط على العناصر غير المستبدلة (non-replaced elements)، ويسمح قيمتها الافتراضية auto للمتصفح بحساب العرض تلقائيًا بناءً على الكتلة الحاضنة (containing block). في التخطيطات الفعلية، يُدمج width غالبًا مع max-width و min-width لبناء تصاميم متجاوبة.
white-space	تتحكم خاصية white-space في CSS في كيفية معالجة المسافات البيضاء (المسافات وعلامات التبويب والأسطر الجديدة) داخل عنصر وما إذا كان النص يلتف تلقائيًا. تقرر ما إذا كان المتصفح يدمج المسافات المتتالية أو يحتفظ بالتنسيق الأصلي أو يكسر الأسطر عند فيضان النص. وهي ضرورية لعرض الأكواد والحفاظ على التنسيق وتأثيرات الحذف في سطر واحد.
word-spacing	تحدد خاصية word-spacing في CSS المسافة بين الكلمات في النص. ويظهر تأثيرها جليًا في لغات مثل الإنجليزية التي تفصل الكلمات بمسافات؛ وبما أن الصينية لا تحتوي كلمات محددة بمسافات، فعادةً لا يكون للخاصية تأثير عليها.
word-break	تتحكم خاصية word-break في CSS في كيفية كسر الكلمات عند حد الحاوية، وتحل أساسًا مشكلة تجاوز الكلمات الطويلة أو عناوين URL للحاوية. تقرر ما إذا كانت الكسرات مسموحة داخل الكلمات وكيف يُلفّ نص CJK. وهي مفيدة بشكل خاص للسلاسل الطويلة التي يدخلها المستخدم.
word-wrap	خاصية word-wrap في CSS هي اسم مستعار لـ overflow-wrap. تتحكم فيما إذا كانت الكلمة الطويلة أو عنوان URL قد يكسر داخليًا عندما يتجاوز عرض الحاوية. صُممت لمنع السلاسل الطويلة التي لا تكسر من الفيضان خارج الحاوية ولا تزال أداة شائعة لمعالجة فائض النص؛ وتوصي المواصفات الحديثة باستخدام overflow-wrap.
writing-mode	تحدد خاصية writing-mode في CSS الاتجاه العام لتخطيط النص، وتدعم الأنماط الأفقية (horizontal-tb) والعمودية (vertical-rl و vertical-lr). تُستخدم لإنشاء نص عمودي مثل الكتب الصينية أو اليابانية التقليدية، وتغير أيضًا طريقة ترتيب عناصر الكتلة والعناصر السطرية، مما يجعلها أداة مهمة لطباعة شرق آسيا.
widows	تتحكم الخاصية widows في الحد الأدنى لعدد الأسطر من بداية الفقرة التي يجب أن تبقى في أسفل الصفحة السابقة عند الطباعة، والقيمة الافتراضية هي 2. وباقترانها مع orphans، تمنع بقاء السطر الأول من الفقرة بمفرده في أسفل الصفحة (يسمى «السطر الأرمل»)، مما يحافظ على سلامة الفقرات المطبوعة.
Z
z-index	تتحكم الخاصية z-index في ترتيب تكديس العناصر الموضوعة على طول المحور z العمودي على الشاشة؛ فالعناصر ذات القيمة الأكبر تُرسم فوق التي ذات القيم الأصغر. تُستخدم عادةً مع position لواجهات متعددة الطبقات مثل النوافذ المنبثقة (modals) والقوائم المنسدلة والطبقات العلوية.
zoom	تطبّق خاصية zoom تحويل تكبير غير قياسي، فيكبّر أو يصغّر عنصرًا وكل عناصره الفرعية بالتناسب. على عكس transform: scale()، يؤثر zoom على مساحة تخطيط العنصر — فهو يشغل المساحة الفعلية بعد التحجيم — ويُطلق إعادة تدفق كاملة. ورغم أنها ليست CSS قياسيًا، إلا أن دعم المتصفحات لها واسع.

فريق Web-Tutorial التقني

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

من نحن