دليل مرجعي لـ CSS

قواعد CSS @

موسوعة خصائص CSS

قواعد CSS @ (At-rules)CSS z-index الخاصية

دليل كامل الخاص بخصائص CSS (حسب الوظيفة)

البحث في خصائص CSS حسب الترتيب الأبجدي، هذا الجزء يحتوي على قائمة كاملة لجميع الخصائص المحددة في معيار CSS3 الأحدث. يتم تقسيم جميع الخصائص إلى خصائص الحركة، خصائص الخلفية، خصائص الحواف، خصائص الألوان، الأبعاد العالية والعرضية، Flex Flexbox، خصائص الخط، خصائص عناصر القائمة، خصائص الهوامش، خصائص الهوامش، خصائص الهوامش، خصائص النصوص، الخصائص البصرية، إلخ.

خصائص الحركة (Animation)

الخصائص	الوصف
`animation`	تحديد الحركة بناءً على إطارات المفتاح.
`animation-delay`	تحديد وقت بدء الحركة.
`animation-direction`	تحديد ما إذا كانت الحركة تعيد اللعب بشكل عكسي في دورة متبادلة.
`animation-duration`	تحديد الوقت الذي يجب أن يستغرقه دورة الحركة بالثواني أو الميليسي ثانية.
`animation-fill-mode`	تحديد كيفية تطبيق النمط على الهدف قبل وبعد تنفيذ الحركة.
`animation-iteration-count`	تحديد عدد مرات العرض للحركة قبل التوقف.
`animation-name`	指定`@keyframes`الاسم الذي يجب تطبيقه على الحركة المحددة للعنصر المختار.
`animation-play-state`	تحديد ما إذا كانت الحركة تعمل أو تتوقف.
`animation-timing-function`	تحديد كيفية سلوك CSS الحركة في كل دورة.

خصائص الخلفية (Background)

الخصائص	الوصف
`background`	تحديد أنواع مختلفة من خصائص الخلفية في بيانة واحدة.
`background-attachment`	تحديد ما إذا كانت صورة الخلفية ثابتة في نافذة العرض أو تتحرك.
`background-clip`	تحديد منطقة رسم الخلفية.
`background-color`	تعريف لون الخلفية للعنصر.
`background-image`	تعريف صورة الخلفية للعنصر.
`background-origin`	تحديد منطقة التركيز للصورة الخلفية.
`background-position`	تحديد نقطة البداية للصورة الخلفية.
`background-repeat`	تحديد ما إذا كان يجب تكرار أو كيفية تكرار صورة الخلفية.
`background-size`	تحديد حجم صورة الخلفية.

خصائص الحدود(Border)

الخصائص	الوصف
`border`	تحديد عرض، النمط والألوان لجميع الجوانب الأربعة للخط الحدودي للعنصر.
`border-bottom`	تحديد عرض، النمط والألوان للخط السفلي للعنصر.
`border-bottom-color`	تحديد لون الخط السفلي للعنصر.
`border-bottom-left-radius`	تحديد شكل زاوية الحد السفلي اليسرى للعنصر.
`border-bottom-right-radius`	تحديد شكل الحد السفلي الأيمن للعنصر.
`border-bottom-style`	تحديد نمط الخط السفلي للعنصر.
`border-bottom-width`	تحديد عرض الخط السفلي للعنصر.
`border-color`	تحديد لون الخط الحدودي لجميع الجوانب الأربعة للعنصر.
`border-image`	تحديد كيفية استخدام الصورة لتعويض نمط الخط الحدودي.
`border-image-outset`	تحديد عدد الوحدات التي ستتخطى منطقة الخط الحدودي للصورة.
`border-image-repeat`	تحديد ما إذا كان يجب تكرار، تقريب أو مطالة الخط الحدودي للصورة.
`border-image-slice`	تحديد الانحراف الداخلي للخط الحدودي للصورة.
`border-image-source`	تحديد موضع الصورة التي سيتم استخدامها كحدود.
`border-image-width`	تحديد عرض خط الحدود للصورة.
`border-left`	تحديد عرض، النمط والألوان للخط الجانبي للعنصر.
`border-left-color`	تحديد لون الخط الجانبي للعنصر.
`border-left-style`	تحديد نمط الخط الجانبي للعنصر.
`border-left-width`	تحديد عرض الخط الجانبي للعنصر.
`border-radius`	تحديد شكل زاوية الحد العنصر.
`border-right`	تحديد عرض، النمط والألوان للخط الجانبي للعنصر.
`border-right-color`	تحديد لون الخط الجانبي للعنصر.
`border-right-style`	تحديد نمط الخط الجانبي للعنصر.
`border-right-width`	تحديد عرض الخط الجانبي للعنصر.
`border-style`	تحديد نمط الخط على جميع أربعة جوانب العنصر.
`border-top`	تحديد عرض، النمط والألوان للخط العلوية للعنصر.
`border-top-color`	تعيين لون الحافات العلوية للعنصر.
`border-top-left-radius`	تحديد شكل الزاوية العلوية اليسرى للعنصر.
`border-top-right-radius`	تحديد شكل الزاوية اليمنى العلوية للعنصر.
`border-top-style`	تعيين نمط الحافات العلوية للعنصر.
`border-top-width`	تعيين عرض الحافات العلوية للعنصر.
`border-width`	تعيين عرض الحواف لأربعة جوانب العنصر.

خصائص اللون (Color)

الخصائص	الوصف
`color`	تحديد لون النص للعنصر.
`opacity`	تحديد شفافية العنصر.

خصائص الحجم (Size)

الخصائص	الوصف
`height`	تحديد الارتفاع للعنصر.
`max-height`	تحديد الارتفاع الأقصى للعنصر.
`max-width`	تحديد العرض الأقصى للعنصر.
`min-height`	تحديد الارتفاع الأدنى للعنصر.
`min-width`	تحديد العرض الأدنى للعنصر.
`width`	تحديد عرض العنصر.

خصائص المحتوى (Content)

الخصائص	الوصف
`content`	إدراج المحتوى المولد.
`quotes`	تحديد نوع الحرف المستخدم في الإقتباسات.
`counter-reset`	إنشاء أو إعادة تعيين معادلة أو أكثر.
`counter-increment`	زيادة قيمة معادلة أو أكثر.

تخطيط Flex Box التمدد (Flex)

الخصائص	الوصف
`align-content`	تحديد طريقة الترتيب للعناصر في حاوية التمدد.
`align-items`	تحديد طريقة الترتيب الافتراضية للعناصر في الحاوية التمدد.
`align-self`	تحديد طريقة الترتيب للعنصر المحدد في الحاوية التمدد.
`flex`	تحديد جزء الطول التمدد.
`flex-basis`	تحديد حجم العنصر الرئيسي الأولي.
`flex-direction`	تحديد اتجاه العناصر التمدد.
`flex-flow`	`flex-direction`و`flex-wrap`الخصائص المختصرة.
`flex-grow`	تحديد كيفية نمو العنصر التمدد بالنسبة للعناصر الأخرى في الحاوية التمدد.
`flex-shrink`	تحديد كيفية انكماش العنصر التمدد بالنسبة للعناصر الأخرى في الحاوية التمدد.
`flex-wrap`	تحديد ما إذا كان يجب تعبئة العناصر الهشة.
`justify-content`	تحديد كيفية ترتيب العنصر التمدد على محور الرئيسي للحاوية التمدد بعد حل أطوال التمدد والهوامش التلقائية.
`order`	تحديد ترتيب عرض وتنسيق العنصر في حاوية التمدد.

خصائص الأحرف (Fonts)

الخصائص	الوصف
`font`	تحديد خصائص الأحرف المختلفة في بيانات الإعلان.
`font-family`	تعريف قائمة الأحرف للعناصر.
`font-size`	定义文本的字体大小。
`تحديد حجم الخط النصي.`	font-size-adjust
`الحفاظ على قراءة النص عند حدوث استبدال الخط.`	font-stretch
`اختيار خط عادي، مضغوط أو ممتد من الخطوط.`	font-style
`تحديد نمط النص.`	font-variant
`تحديد تنوع الخط.`	font-weight

تحديد كثافة النص.

الخصائص	الوصف
`خصائص القائمة (Lists)`	تحديد عرض النمط والنصائح للقوائم والعناصر في القوائم.
`list-style-image`	تحديد الصورة المستخدمة كعلامة للاسماء.
`list-style-position`	تحديد موقع العلامة للاسماء.
`list-style-type`	تحديد نمط العلامة للاسماء.

خصائص الهوامش (Margin)

الخصائص	الوصف
`margin`	إعداد الهوامش في جميع أربعة أوجه العنصر.
`margin-bottom`	إعداد الهوامش السفلية للعنصر.
`margin-left`	إعداد الهوامش اليسرى للعنصر.
`margin-right`	إعداد الهوامش اليمنى للعنصر.
`margin-top`	إعداد الهوامش العلوية للعنصر.

خصائص تصميم الصفوف (Column)

الخصائص	الوصف
`column-count`	تحديد عدد الصفوف في العناصر المتعددة.
`column-fill`	تحديد كيفية تعبئة الصفوف.
`column-gap`	تحديد الفجوة بين كل عمود في العناصر المتعددة.
`column-rule`	تحديد الخط أو "القاعدة" التي يتم رسمها بين كل عمود في العناصر المتعددة.
`column-rule-color`	تحديد لون القاعدة بين صفوف الصفوف المتعددة.
`column-rule-style`	تحديد نمط القاعدة بين صفوف الصفوف المتعددة.
`column-rule-width`	تحديد عرض القاعدة بين صفوف الصفوف المتعددة.
`column-span`	تحديد عدد الصفوف التي ينتقل إليها العنصر في تصميم الصفوف المتعددة.
`column-width`	تحديد أفضل عرض للعناصر المتعددة في الصفوف.
`columns`	لإعداد`column-width`و`column-count`الخصائص المختصرة.

خصائص الهوامش (Outline)

الخصائص	الوصف
`outline`	إعداد عرض الهوامش، النمط ولون جميع أربعة جوانب العنصر الشكلية.
`outline-color`	إعداد لون الهوامش.
`outline-offset`	إعداد المسافة بين الهوامش والحدود العنصرية.
`outline-style`	إعداد نمط الهوامش.
`outline-width`	إعداد عرض الهوامش.

خصائص الحشوة (Padding)

الخصائص	الوصف
`padding`	في جميع أربعة أوجه العنصر إعداد الحشوة.
`padding-bottom`	将填充设置为元素的底侧。
`padding-left`	将填充设置为元素的左侧。
`padding-right`	将填充设置为元素的右侧。
`padding-top`	将填充设置为元素的顶部。

打印属性 (Print)

الخصائص	الوصف
`page-break-after`	在元素之后插入分页符。
`page-break-before`	在元素之前插入分页符。
`page-break-inside`	在元素内插入分页符。

表属性 (Table)

الخصائص	الوصف
`border-collapse`	指定是连接还是分隔表格单元格边界。
`border-spacing`	设置相邻表格单元格的边界之间的间距。
`caption-side`	指定表格标题的位置。
`empty-cells`	显示或隐藏空表单元格的边界和背景。
`table-layout`	指定表布局算法。

文字属性 (Text)

الخصائص	الوصف
`direction`	定义文本方向 / 书写方向。
`tab-size`	指定制表符的长度。
`text-align`	设置内联内容的水平对齐方式。
`text-align-last`	特定当`text-align`is 时如何对齐块的最后一行或强制换行符之前的行`justify`。
`text-decoration`	指定添加到文本的装饰。
`text-decoration-color`	指定的颜色`text-decoration-line`。
`text-decoration-line`	指定将哪种线条装饰添加到元素。
`text-decoration-style`	指定`text-decoration-line`属性指定的线条样式
`text-indent`	缩进文本的第一行。
`text-justify`	特定当`text-align`属性设置为时要使用的对正方法`justify`。
`text-overflow`	特定当文本内容溢出块容器时将如何显示。
`text-shadow`	将一个或多个影子应用于元素的文本内容。
`text-transform`	转换文本的大小写。
`line-height`	设置文本行之间的高度。
`vertical-align`	设置元素相对于当前文本基线的垂直位置。
`letter-spacing`	设置字母之间的额外间距。
`word-spacing`	设置单词之间的间距。
`white-space`	特定如何处理元素内的空白。
`word-break`	特定如何在单词内换行。
`word-wrap`	تحديد ما إذا كان يجب قطع الكلمة عند تجاوز الحدود الخارجية للمحتوى أم لا.

خصائص التحويل (Transform)

الخصائص	الوصف
`backface-visibility`	تحديد ما إذا كانت “الوجه الخلفي” للعنصر بعد التحويل مرئيًا أم لا عندما يواجه المستخدم.
`perspective`	تحديد منظور المنظور للعناصر الفرعية لكل عنصر.
`perspective-origin`	تحديد نقطة التحول للخصائص البصرية للمنظور (نقطة الإزاحة في الفضاء الثلاثي الأبعاد).
`transform`	تطبيق تحويل ثنائي الأبعاد أو ثلاثي الأبعاد على العنصر.
`transform-origin`	تحديد نقطة التحول للعنصر.
`transform-style`	تحديد كيفية عرض العناصر المنغمسة في الفضاء الثلاثي الأبعاد.

خصائص التحويل (Transition)

الخصائص	الوصف
`transition`	تحديد انتقال بين حالتين لعنصر.
`transition-delay`	تحديد وقت بدء تأثير التحويل.
`transition-duration`	تحديد الوقت الذي سيستغرقه تأثير التحويل.
`transition-property`	تحديد اسم الخاصية التي يجب تطبيق تأثير التحويل عليها.
`transition-timing-function`	تحديد منحنى سرعة تأثير التحويل.

خصائص النمط البصري

الخصائص	الوصف
`display`	تحديد كيفية عرض العنصر على الشاشة.
`position`	تحديد كيفية تحديد العنصر.
`top`	تحديد موقع الحافة العلوية للعنصر المحدد.
`right`	تحديد موقع الحافة اليمنى للعنصر المحدد.
`bottom`	تحديد موقع الحافة السفلية للعنصر المحدد.
`left`	تحديد موقع الحافة اليسرى للعنصر المحدد.
`float`	تحديد ما إذا كان يجب أن يطفو الصندوق أم لا.
`clear`	تحديد موقع العنصر بالنسبة للعناصر المنفذة.
`z-index`	تحديد ترتيب الطبقات أو ترتيب الت堆افي للعناصر المحددة.
`overflow`	تحديد كيفية معالجة المحتوى للعناصر التي تتخطى إطار العنصر.
`overflow-x`	تحديد كيفية إدارة المحتوى عندما يتجاوز عرض محتوى العنصر منطقة المحتوى للعنصر.
`overflow-y`	تحديد كيفية إدارة المحتوى عندما يتجاوز ارتفاع محتوى العنصر منطقة المحتوى للعنصر.
`resize`	تحديد ما إذا كان العنصر قابلًا للتعديل حجمه من قبل المستخدم أم لا.
`clip`	تحديد منطقة التقطيع.
`visibility`	تحديد ما إذا كان العنصر مرئيًا أم لا.
`cursor`	تحديد نوع المؤشر.
`box-shadow`	تطبيق ظل واحد أو أكثر على إطار العنصر.
`box-sizing`	تغيير نموذج الصندوق الافتراضي لـ CSS.