نتائج البحث

عناصر <input> ذات النوع hidden تسمح لمطوري الويب بتضمين البيانات التي لا يمكن رؤيتها أو تعديلها من المستخدمين عند إرسال النموذج، فمثلًا يمكن تخزين مُعرِّف المحتوى الذي يتم طلبه حاليًا أو تعديله أو غير ذلك. الحقول المخفية لن تُعرَض في الصفحة ولا توجد أيّ طريقة (في HTML) لفعل ذلك. <input type="hidden" id="hidden_prop" name="hidden_prop" value="قيمة ما"> إذا جرَّبتَ الشيفرة السابقة لكنك لم تجد أيّ نتيجة فهذا طبيعي، فتذكر أنَّ الحقول المخفية لن تظهر لزائر الصفحة. الخاصية value تحتوي الخاصية value في الحقل ...

تشير القيمة HIDDEN إلى أن العنصر المهمل (deprecated elements) غير متاح للاستخدام ضمن الشيفرة. انظر أيضًا القيمة WARNING: تشير إلى وجود تحذير تولد نتيجة استعمال عنصر مهمل (deprecated element). القيمة ERROR: تشير إلى وجود خطأٍ تولد نتيجة استعمال عنصر مهمل (deprecated element). مصادر صفحة HIDDEN في التوثيق الرسميّ للمكتبة القياسيّة في لغة Kotlin.

المحدد ‎:hidden()‎ الوصف يختار هذا المحدد كل العناصر المخفية. jQuery( ":hidden" )‎ أُضيف مع الإصدار: 1.0. يمكن للعناصر أن تُعد مخفية لعدة أسباب منها: أن تطبق الخاصية display: none عليها. هي حقول من حقول النماذج  التي لها الخاصية type="hidden"‎. ضبطت قيمة طولها وعرضها إلى 0. العنصر الأب مخفي، مما يعني أن العنصر الابن مخفي أيضًا ولا يظهر في الصفحة. العناصر التي لها الخاصية visibility: hidden أو الخاصية opacity: 0 تعدّ مرئية رغم أنها لا تظهر في الشاشة إلا أنها ما ...

الخاصية visibility في CSS تسمح بإظهار أو إخفاء عنصر دون التأثير بتخطيط المستند، أي أنَّ المساحة ستُحجَز للعناصر سواءً كانت مرئيةً أو لا، ويمكن استخدام هذه الخاصية أيضًا لإخفاء أو إظهار الأعمدة في جدول <table>. بطاقة الخاصية القيمة الابتدائية visible تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للحركة نعم القيمة المحسوبة كما حُدِّدَت. /* الكلمات المحجوزة */ visibility: visible; visibility: hidden; visibility: collapse; /* القيم العامة */ visibility: inherit; visibility: initial; visibility: unset; ملاحظة: إذا أردتَ إخفاء العنصر وإزالته من تخطيط المستند معًا، فاضبط الخاصية display إلى ...

الخاصية المختصرة border-style في CSS تُحدِّد شكل خط الإطار الخاص بالعنصر لجميع وجوهه (الأيمن والأيسر والعلوي والسفلي). /* الكلمات المحجوزة */ border-style: none; border-style: hidden; border-style: dotted; border-style: dashed; border-style: solid; border-style: double; border-style: groove; border-style: ridge; border-style: inset; border-style: outset; /* vertical | horizontal */ border-style: dotted solid; /* top | horizontal | bottom */ border-style: hidden double dashed; /* top | right | bottom | left */ border-style: none solid dotted dashed; /* القيم العامة */ border-style: inherit; border-style: initial; border-style: unset; ملاحظة: القيمة الابتدائية للخاصية border-style هي none، وهذا يعني أنَّه حتى لو ضبطتَ الخاصيتين border-width و ...

الخاصية overflow في CSS تُحدِّد إن كان سيتم اقتصاص (clip) المحتوى، أو سيُعرَض شريط تمرير (scroll bar)، أو سيُعرَض ما يزيد من محتوى العنصر الكتلي عند تجاوزه أبعاد الحاوية الكتلية التي هو فيها. بطاقة الخاصية القيمة الابتدائية visible تُطبَّق على عناصر block-level و inline-block غير المُستبدَلة (non-replaced). قابلة للوراثة لا قابلة للتحريك لا القيمة المحسوبة كما حُدِّدَت. /* لن يتم اقتصاص المحتوى */ overflow: visible; /* سيتم اقتصاص المحتوى دون عرض شريط تمرير */ overflow: hidden; /* سيتم اقتصاص المحتوى مع عرض شريط تمرير ...

الخاصية border-left-style في CSS تُحدِّد شكل خط الإطار الأيسر الخاص بالعنصر. بطاقة الخاصية القيمة الابتدائية none تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للتحريك لا القيمة المحسوبة كما حُدِّدَت. /* الكلمات المحجوزة */ border-left-style: none; border-left-style: hidden; border-left-style: dotted; border-left-style: dashed; border-left-style: solid; border-left-style: double; border-left-style: groove; border-left-style: ridge; border-left-style: inset; border-left-style: outset; /* القيم العامة */ border-left-style: inherit; border-left-style: initial; border-left-style: unset; ملاحظة: لا تُعرِّف المواصفة كيف ستلتقي الإطارات التي لها أشكال مختلفة في الزوايا. أمثلة هذا مثال عن جدول <table> يُبيّن مختلف أشكال الإطارات عبر الخاصية border-left-style. شيفرة HTML: <table> <tr> ...

الخاصية border-right-style في CSS تُحدِّد شكل خط الإطار الأيمن الخاص بالعنصر. القيمة الابتدائية none تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للتحريك لا القيمة المحسوبة كما حُدِّدَت. /* الكلمات المحجوزة */ border-right-style: none; border-right-style: hidden; border-right-style: dotted; border-right-style: dashed; border-right-style: solid; border-right-style: double; border-right-style: groove; border-right-style: ridge; border-right-style: inset; border-right-style: outset; /* القيم العامة */ border-right-style: inherit; border-right-style: initial; border-right-style: unset; ملاحظة: لا تُعرِّف المواصفة كيف ستلتقي الإطارات التي لها أشكال مختلفة في الزوايا. أمثلة هذا مثال عن جدول <table> يُبيّن مختلف أشكال الإطارات عبر الخاصية border-right-style. شيفرة HTML: <table> <tr> ...

الخاصية overflow-x في CSS تُحدِّد إن كان سيتم اقتصاص (clip) المحتوى، أو سيُعرَض شريط تمرير (scroll bar)، أو سيُعرَض ما يزيد من محتوى العنصر الكتلي على يمينه أو يساره. بطاقة الخاصية القيمة الابتدائية visible تُطبَّق على عناصر block-level و inline-block غير المُستبدَلة (non-replaced). قابلة للوراثة لا قابلة للتحريك لا القيمة المحسوبة كما حُدِّدَت. /* لن يتم اقتصاص المحتوى */ overflow-x: visible; /* سيتم اقتصاص المحتوى دون عرض شريط تمرير */ overflow-x: hidden; /* سيتم اقتصاص المحتوى مع عرض شريط تمرير */ overflow-x: scroll; /* ترك الأمر ...

الخاصية border-bottom-style في CSS تُحدِّد شكل خط الإطار السفلي الخاص بالعنصر. بطاقة الخاصية القيمة الابتدائية none تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للتحريك لا القيمة المحسوبة كما حُدِّدَت. /* الكلمات المحجوزة */ border-bottom-style: none; border-bottom-style: hidden; border-bottom-style: dotted; border-bottom-style: dashed; border-bottom-style: solid; border-bottom-style: double; border-bottom-style: groove; border-bottom-style: ridge; border-bottom-style: inset; border-bottom-style: outset; /* القيم العامة */ border-bottom-style: inherit; border-bottom-style: initial; border-bottom-style: unset; ملاحظة: لا تُعرِّف المواصفة كيف ستلتقي الإطارات التي لها أشكال مختلفة في الزوايا. أمثلة هذا مثال عن جدول <table> يُبيّن مختلف أشكال الإطارات عبر الخاصية border-bottom-style. شيفرة HTML: <table> <tr> ...

الخاصية border-top-style في CSS تُحدِّد شكل خط الإطار العلوي الخاص بالعنصر. بطاقة الخاصية القيمة الابتدائية none تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للتحريك لا القيمة المحسوبة كما حُدِّدَت. /* الكلمات المحجوزة */ border-top-style: none; border-top-style: hidden; border-top-style: dotted; border-top-style: dashed; border-top-style: solid; border-top-style: double; border-top-style: groove; border-top-style: ridge; border-top-style: inset; border-top-style: outset; /* القيم العامة */ border-top-style: inherit; border-top-style: initial; border-top-style: unset; ملاحظة: لا تُعرِّف المواصفة كيف ستلتقي الإطارات التي لها أشكال مختلفة في الزوايا. أمثلة هذا مثال عن جدول <table> يُبيّن مختلف أشكال الإطارات عبر الخاصية border-top-style. شيفرة HTML: <table> <tr> ...

المحدد ‎:visible الوصف تحديد كل العناصر المرئية. jQuery( ":visible" )‎ أُضيف مع الإصدار: 1.0. تعدّ العناصر مرئية إذا كانت تشغل مساحة في المستند. العناصر المرئية لها عرض أو ارتفاع أكبر من الصفر. العناصر ذات الخاصية visibility: hidden أو opacity: 0 تعدّ مرئية، نظرًا لأنها لا تزال تستهلك مساحة في تخطيط الصفحة. تعدّ العناصر غير الموجودة في المستند مخفية؛ ليس لدى jQuery طريقة لمعرفة ما إذا كانت ستكون مرئية عند إلحاقها بوثيقة ما لأنها تعتمد على الأنماط المُطبّقة. هذا المحدد هو ...

الخاصية overflow-y في CSS تُحدِّد إن كان سيتم اقتصاص (clip) المحتوى، أو سيُعرَض شريط تمرير (scroll bar)، أو سيُعرَض ما يزيد من محتوى العنصر الكتلي فوقه أو تحته. بطاقة الخاصية القيمة الابتدائية visible تُطبَّق على عناصر block-level و inline-block غير المُستبدَلة (non-replaced). قابلة للوراثة لا قابلة للتحريك لا القيمة المحسوبة كما حُدِّدَت. /* لن يتم اقتصاص المحتوى */ overflow-y: visible; /* سيتم اقتصاص المحتوى دون عرض شريط تمرير */ overflow-y: hidden; /* سيتم اقتصاص المحتوى مع عرض شريط تمرير */ overflow-y: scroll; /* ترك الأمر بيد ...

الخاصية backface-visibility في CSS تُحدِّد فيما إذا كان الوجه الخلفي للعنصر ظاهرًا للمستخدم، ويكون الوجه الخلفي للعنصر ذو خلفيةٍ شفافة، ويسمح بعرض صورة معكوسة (mirrored) للوجه الأمامي للعنصر. بطاقة الخاصية القيمة الابتدائية visible تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للتحريك لا القيمة المحسوبة كما حُدِّدَت. /* كلمات محجوزة */ backface-visibility: visible; backface-visibility: hidden; /* القيم العامة */ backface-visibility: inherit; backface-visibility: initial; backface-visibility: unset; هنالك حالات لا نريد فيها إظهار الوجه الأمامي للعنصر معكوسًا على الوجه الخلفي، كما في تأثير قلب البطاقات. لاحظ أنَّ هذه الخاصية ...

الخاصية border-left في CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات border-left-color و border-left-style و border-left-width، هذه الخاصيات تصف كيفية عرض الإطار border الأيسر للعنصر. بطاقة الخاصية القيمة الابتدائية لكل قيمة مختصرة: border-left-width: medium border-left-style: none border-left-color: currentcolor تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للتحريك نعم القيمة المحسوبة لكل قيمة مختصرة: border-left-width: الطول المطلق، أو 0 إذا ضُبِطَت الخاصية border-left-style إلى none أو hidden. border-left-style: كما حُدِّدَت. border-left-color: اللون المحسوب. border-left: 1px; border-left: 2px dotted; border-left: medium dashed blue; وكما في جميع الخاصيات ...

الخاصية border-right في CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات border-right-color و border-right-style و border-right-width، هذه الخاصيات تصف كيفية عرض الإطار border الأيمن للعنصر. بطاقة الخاصية القيمة الابتدائية لكل قيمة مختصرة: border-right-width: medium border-right-style: none border-right-color: currentcolor تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للتحريك نعم القيمة المحسوبة لكل قيمة مختصرة: border-right-width: الطول المطلق، أو 0 إذا ضُبِطَت الخاصية border-right-style إلى none أو hidden. border-right-style: كما حُدِّدَت. border-right-color: اللون المحسوب. border-right: 1px; border-right: 2px dotted; border-right: medium dashed blue; وكما في جميع الخاصيات ...

الخاصية text-overflow في CSS تُحدِّد ماذا سيحدث عند عدم عرض المحتوى الزائد عن صندوقه، فيمكن أن يتم اقتصاص المحتوى، أو عرض ثلاث نقط (المحرف … رمزه U+2026)، أو عرض سلسلة نصية خاصة. بطاقة الخاصية القيمة الابتدائية clip تُطبَّق على الحاويات الكتلية (block container elements). قابلة للوراثة لا قابلة للحركة لا القيمة المحسوبة كما حُدِّدَت. /* الكلمات المحجوزة */ text-overflow: clip; text-overflow: ellipsis; /* <string> سلسلة نصية */ text-overflow: "…"; /* القيم العامة */ text-overflow: inherit; text-overflow: initial; text-overflow: unset; الخاصية text-overflow لا تؤدي إلى خروج المحتوى من صندوقه، ولجعل ...

الخاصية border-bottom في CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات border-bottom-color و border-bottom-style و border-bottom-width، هذه الخاصيات تصف كيفية عرض الإطار border السفلي للعنصر. بطاقة الخاصية القيمة الابتدائية لكل قيمة مختصرة: border-bottom-width: medium border-bottom-style: none border-bottom-color: currentcolor تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للتحريك نعم القيمة المحسوبة لكل قيمة مختصرة: border-bottom-width: الطول المطلق، أو 0 إذا ضُبِطَت الخاصية border-bottom-style إلى none أو hidden. border-bottom-style: كما حُدِّدَت. border-bottom-color: اللون المحسوب. border-bottom: 1px; border-bottom: 2px dotted; border-bottom: medium dashed blue; وكما في جميع الخاصيات ...

الخاصية border-top في CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات border-top-color و border-top-style و border-top-width، هذه الخاصيات تصف كيفية عرض الإطار border العلوي للعنصر. بطاقة الخاصية القيمة الابتدائية لكل قيمة مختصرة: border-top-width: medium border-top-style: none border-top-color: currentcolor تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للتحريك نعم القيمة المحسوبة لكل قيمة مختصرة: border-top-width: الطول المطلق، أو 0 إذا ضُبِطَت الخاصية border-top-style إلى none أو hidden. border-top-style: كما حُدِّدَت. border-top-color: اللون المحسوب. border-top: 1px; border-top: 2px dotted; border-top: medium dashed blue; وكما في جميع الخاصيات ...

الخاصية الوصف bottom الخاصية bottom في CSS تساهم في تحديد الموضع الرأسي لأحد العناصر التي يمكن أن يتغير مكانها (positioned elements)، وليس لهذه الخاصية تأثير في العناصر التي لا يمكن أن يتغير مكانها (non-positioned elements). clear تُحدِّد إذا كان العنصر يمكن أن يكون بجوار العناصر العائمة (floating elements) المجاورة له أو يجب أن يُحرَّك إلى الأسفل (يسمى هذا الفعل بالمصطلح clear)؛ يمكن تطبيق هذه الخاصية على العناصر العائمة وغير العائمة على حدٍ سواء. display تُحدِّد ما هو نوع صندوق العرض الذي سيستخدم ...

تعمل التوابع الموجودة في هذا القسم على جلب وضبط قيم خاصيات CSS لعنصر محدَّد (أو مجموعة عناصر محدَّدة). ‎.height()‎ يجلب هذا التابع الطول الحالي لأول عنصر في مجموعة العناصر المتطابقة أو يغير الطول لكل العناصر المتطابقة. ‎.innerHeight()‎ يعيد هذا التابع قيمة الطول الحالي (تتضمن قيمة الحواشي فقط دون الإطار) لأول عنصر في مجموعة العناصر المطابقة أو يغير الطول الداخلي لكل العناصر المطابقة. ‎.innerWidth()‎ يعيد هذا التابع قيمة العرض الحالي (تدخل قيمة الحواشي ضمنها فقط) لأول عنصر من مجموعة العناصر المطابقة ...

الخاصية الوصف محددات الأنواع مُحدِّد النوع (type selector) في CSS يُطابِق العناصر وفق اسم العقدة، أي أنه يُحدِّد جميع العناصر التي لها نوع معيّن في المستند. محددات الأصناف مُحدِّد الصنف (class selector) في CSS يُطابِق العناصر وفق قيمة الخاصية class التابعة لها. محددات المُعرِّفات مُحدِّد المُعرِّف (ID selector) في CSS يُطابِق العناصر وفق قيمة الخاصية ID التابعة لها. المحدد العام المُحدِّد العام (universal selector) في CSS يطابق جميع العناصر. محددات الخاصيات مُحدِّد الخاصيات (attribute selector) في CSS يُطابِق العناصر إذ ...

أسماء الخاصيات التي تُسبَق بشرطتين --، مثل ‎--example-name، تُمثِّل الخاصيات المخصصة (custom properties) التي تُسنَد لها قيمةٌ يمكن إعادة استخدامها في المستند عبر الدالة var()‎. بطاقة الخاصية القيمة الابتدائية لا يوجد تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للحركة لا القيمة المحسوبة كما حُدِّدَت. --somekeyword: left; --somecolor: #0000ff; --somecomplexvalue: 3px 6px rgb(20, 32, 54); أمثلة المثال الآتي يُعرِّف متغيرين ثم يستخدم قيمتهما في بقية المستند، لاحظ كيف ستُطبَّق قواعد الوراثة على الخاصيات المخصصة: <p id="firstParagraph">يجب أن تحتوي هذه الفقرة على خلفية ...

القواعد المتشعّبة (Nested Rules) تسمح Sass لقواعد CSS بأن تتشعّب داخل بعضها البعض ولا تطبَّق في تلك الحالة القاعدة الداخليَّة إلّا ضمن المُحدّد الخارجي الذي يتضمّنها (outer rule's selector). انظر على سبيل المثال إلى الشيفرة التالية: #main p { color: #00ff00; width: 97%; .redbox { background-color: #ff0000; color: #000000; } } ستُصرّف إلى: #main p { color: #00ff00; width: 97%; } #main p .redbox { background-color: ...

الخاصية الوصف filter الخاصية filter في CSS تسمح لنا بتطبيق تأثيرات مثل تغيير اللون وتأثير الضبابية على أحد العناصر، وتُستخدَم المُرشِّحات (filters) عمومًا لتعديل طريقة عرض الصور <img> والخلفياتbackground والإطارات border.

الخاصية الوصف counter-increment تُزيد أو تُنقِص قيمة أحد عدّادات CSS بقيمة معيّنة، ويمكن إعادة تعيين العدّاد إلى رقم معيّن باستخدام الخاصية counter-reset. counter-reset تُعيد ضبط قيمة أحد عدّادات CSS إلى قيمة معيّنة، ويمكن زيادة أو إنقاص قيمة العداد باستخدام الخاصية counter-increment. list-style الخاصية list-style في CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصياتlist-style-type و list-style-image و list-style-position. list-style-image تُحدِّد صورةً لتُستخدَم للإشارة إلى عناصر القائمة. من المستحسن عادةً استخدام الخاصية المختصرة list-style لضبط قيمة هذه الخاصية. list-style-position تُحدِّد مكان إشارة عناصر القائمة. ومن المستحسن عادةً استخدام الخاصية المختصرة list-style. list-style-type ...

الخاصية الوصف grid الخاصية grid المختصرة في CSS تضبط جميع الخاصيات التي تُحدَّد خصائص الشبكة بوضوح (أي grid-template-rows و grid-template-columns وgrid-template-areas)، وجميع الخاصيات التي تُحدِّد خصائص الشبكة ضمنيًا (أي grid-auto-rows و grid-auto-columns و grid-auto-flow)، والخاصيات التي تُضبِط الفراغ بين الأعمدة والأسطر (أي grid-column-gap وgrid-row-gap)، وكل ذلك في قاعدة واحدة. grid-area الخاصية grid-area في CSS هي خاصية مختصرة تضبط قيمة الخاصيات grid-row-start و grid-column-start و grid-row-end و grid-column-end، مُحدَّدةً أبعاد عنصر grid وموضعه. grid-auto-columns تضبط أبعاد مسارات الأعمدة المُنشأة ضمنيًا. grid-auto-flow تضبط كيف ستعمل خوارزمية تحديد مواضع عناصر grid التلقائية. grid-auto-rows تضبط أبعاد مسارات الأسطر المُنشأة ضمنيًا. grid-column الخاصية grid-column في CSS هي خاصية مختصرة ...

مقدمة لا يفرض Laravel عليك استخدام أي معالج JavaScript و CSS، إلّا إنّه يوفّر نقطة انطلاق بسيطة باستخدام Bootstrap و Vue ممّا سيساعد العديد من التطبيقات. بصفة عامّة، يستخدم Laravel أوامر npm لتنصيب حزم الواجهات الأمامية هذه. CSS يوفّر Laravel Mix واجهة برمجية (API) سهلة ومعبّرة لترجمة Sass أو Less، وهي إضافات للغة CSS الأساسية التي تضيف المتغيّرات والمخاليط (mixins) والعديد من الخصائص الأخرى التي تجعل العمل بلغة CSS أكثر متعة. في هذه الصفحة، سنناقش باختصار ترجمة CSS بصفة عامّة ...

الدالة calc()‎ في CSS تسمح بإجراء عمليات حسابية عند تحديد قيم خاصيات CSS، ويمكن استخدامها في أي موضع يُسمَح فيه باستخدام أنواع البيانات <length> و <percentage> و <angle> و <time> و <number> و <integer>. /* property: calc(expression) */ width: calc(100% - 80px); أمثلة يمكن بسهولة ضبط موضع أحد العناصر باستخدام الدالة calc()‎ بتحديد قيمة للهامش، ففي هذا المثال أنشأنا عنصرًا يمتد على طول النافذة، مع فراغ بمقدار 40px على جانبيه: <div class="banner">هذا هو الشعار!</div> شيفرة CSS: .banner { position: absolute; ...

الخاصية الوصف القيمة الفعلية القيمة الفعلية (actual value) لإحدى خاصيات CSS هي القيمة المستخدمة لتلك الخاصية بعد إجراء أيّة عمليات تقريب لازمة، فمثلًا قد لا يعرض المتصفح الإطاراتborder إلا إذا كانت سماكتها تكافئ رقمًا صحيحًا بواحدة البكسل، لذا قد تُقرِّب تلك السماكة إلى أقرب عدد صحيح قبل تطبيقها. القيمة المحسوبة القيمة المحسوبة (computed value) لإحدى خاصيات CSS تُحسَب من القيمة المُحدَّدة. القيمة المُحدَّدة القيمة المُحدَّدة (specified value) لإحدى خاصيات CSS هي القيمة المضبوطة لتلك الخاصية، سواءً من صفحة الأنماط مباشرةً، أو من العنصر ...

الخاصية الوصف backface-visibility تُحدِّد فيما إذا كان الوجه الخلفي للعنصر ظاهرًا للمستخدم، ويكون الوجه الخلفي للعنصر ذو خلفيةٍ شفافة، ويسمح بعرض صورة معكوسة (mirrored) للوجه الأمامي للعنصر. perspective تُستخدَم لتفعيل الفضاء ثلاثي الأبعاد في العنصر، لكي نتمكن من وضع العناصر الأبناء في ذاك الفضاء، وتسمح هذه الخاصية لنا بإضفاء شعور بالعمق إلى العنصر، بجعل العناصر الأقرب إلى المستخدم تبدو وأكبر، والعناصر الأبعد تبدو أصغر. perspective-origin تُحدِّد الموضع الذي ينظر منه المستخدم إلى العنصر، وتُستخَدم قيمة هذه الخاصية كنقطة التلاشي (vanishing ...

نوع البيانات <timing-function> يشير إلى الدوال الرياضية التي تصف سرعة تغيير القيم أحادية البعد في الحركات، وهذا ما يسمح بتغيير سرعة الحركات خلال فترة الحركة. دوال الحركة السلسة تُنشِئ علاقة نسبية بين الوقت والناتج، وتكون القيمتان رقميتين <number>، وتُمثِّل القيمة 0.0 الحالة الابتدائية والقيمة 1.0 الحالة النهائية. دالة توقيت لها مخرجات أكبر من 1. دالة توقيت لها مخرجات أكبر 1 لكنها مقصوصة. اعتمادًا على الدالة المُستخدمة، قد يصبح الناتج في بعض الأحيان أكبر من 1.0 أو أصغر من 0.0 أثناء ...

الخاصية الوصف ‎@charset تُحدِّد ترميز المحرف المستخدم في صفحة الأنماط، ويجب أن تكون أوّل تعليمة في الملف ولا يسبقها أي محرف، وإذا حُدِّدَت أكثر من قاعدة ‎@charset في الملف نفسه فلن تؤخذ إلا أوّل قاعدة، ولا يمكن أن تُستعمَل هذه القاعدة في الخاصية style على عناصر HTML أو داخل العنصر<style>. ‎@font-face تسمح للمطورين بتحديد خطوط خاصة لعرض النص الموجود في صفحات الويب، وذلك بالسماح للمطورين بتعريف خطوط خاصة بهم، والقاعدة ‎@font-face أدت إلى فتح المجال أمام المطورين لاستخدام أي خطٍ يشاؤون بدل أن يكونوا ...

الخاصية الوصف align-content تُعرِّف طريقة توزيع المتصفح للمسافة بين العناصر وحولها على امتداد المحور الثانوي من حاوية flex. align-items تُعرِّف طريقة توزيع المتصفح للمسافة بين العناصر وحولها على امتداد المحور الثانوي من حاوية flex. فهي تعمل كالخاصية justify-content لكن في الاتجاه المعامد. align-self تضبط محاذاة عناصر flex في السطر الحالي متجاوزةً قيمة الخاصية align-items، وإذا كانت حاشية margin أحد العناصر في المحور المعامد مضبوطةً إلى autoفسيتم تجاهل الخاصية align-self. flex تُحدِّد كيف سيتمدد أو يتقلص أحد عناصر flex لكي يملأ المساحة المتوافرة في حاوية flex. هذه الخاصية ...

يُستخدَم التابع ‎.css()‎ في الحصول على القيمة المحسوبة لخاصية من خاصيات التنسيق (computed style property) للعنصر الأول من مجموعة العناصر المُطابِقة أو تعيين واحدة أو أكثر من خاصيّات CSS لكل عنصر مُطابِق. ‎.css( propertyName )‎ القيمة المعادة سلسلة نصيّة من الكائن String. الوصف الحصول على خاصيّات التنسيق المحسوبة للعنصر الأول من مجموعة العناصر المُطابِقة. ‎.css( propertyName )‎ أضيفت في الإصدار: 1.0. propertyName سلسلة نصيّة String، وتُمثِّل اسم خاصيّة CSS. ‎.css( propertyNames )‎ أضيفت في الإصدار: 1.9. propertyNames مصفوفة Array، وتُمثِّل ...

الخاصية الوصف direction تضبط اتجاه النص، ونستخدم القيمة rtl معها للإشارة إلى اللغات التي تُكتَب من اليمين إلى اليسار مثل اللغة العربية، و ltr للغات التي تُكتَب من اليسار إلى اليمين مثل اللغة الإنكليزية. لاحظ أنَّ اتجاه النص يُعرَّف عادةً باستخدام الخاصية dir على عنصر <html> لكامل المستند، وليس باستخدام الخاصية direction. letter-spacing تُحدِّد ما هو التباعد بين الأحرف النصية. line-break تُحدِّد سلوك المتصفح في الانتقال إلى سطرٍ جديد عند التعامل مع علامات الترقيم والرموز. overflow-wrap تُحدِّد إذا كان على المتصفح الانتقال إلى سطر جديد ضمن الكلمات نفسها لمنع ...

العنصر الوصف ‎--*‎ أسماء الخاصيات التي تُسبَق بشرطتين --، مثل ‎--example-name، تُمثِّل الخاصيات المخصصة (custom properties) التي تُسنَد لها قيمة يمكن إعادة استخدامها في المستند عبر الدالة var()‎. attr()‎ الدالة attr()‎ في CSS تُستعمَل للحصول على قيمة إحدى خاصيات العنصر المُحدَّد واستخدامها في أنماط CSS، ويمكن استعمالها أيضًا على العناصر الزائفة (pseudo-elements) وفي هذه الحالة ستُستخدَم قيمة خاصية العنصر الأصل. calc()‎ الدالة calc()‎ في CSS تسمح بإجراء عمليات حسابية عند تحديد قيم خاصيات CSS، ويمكن استخدامها في أي موضع يُسمَح فيه باستخدام أنواع البيانات<length> و <percentage> و <angle> و <time> و <number> و<integer>. inherit الكلمة المحجوزة inherit في ...

الخاصية الوصف font الخاصية font في CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات font-style و font-variant و font-weight و font-size و line-height و font-family، وذلك لتحديد الخط المستخدم في العنصر. font-family تُحدِّد قائمةً تحتوي على نوع خط واحد أو أكثر من أنواع الخطوط الخاصة أو العامة، وذلك لتُطبَّق على العنصر. font-kerning تتحكم باستخدام معلومات تآلف الأحرف (kerning information) المُخزّنة في الخط المستخدم. font-size تضبط حجم الخط، وضبط حجم الخط قد يؤدي إلى تغيير حجم عناصر أخرى، لأن حجم الخط سيُستخدَم لحساب قيمة الأطوال <length> ذات الواحدة em و ex. font-size-adjust الخاصية font-size-adjust في CSS تقول أنَّ حجم الخط ...

الخاصية الوصف column-count تُحدِّد ما هو عدد الأعمدة التي سينقسم العنصر إليها. column-fill تُحدِّد كيف يجب تقسيم المحتوى على الأعمدة، فباستخدام هذه الخاصية ستتحكم إذا كان يجب موازنة محتوى الأعمدة أم لا. column-gap تضبط حجم الفراغ بين الأعمدة في العناصر متعددة الأعمدة (multi-column elements). column-rule الخاصية column-rule المختصرة في CSS تُحدِّد شكل الخط العمودي (rule) الذي سيُرسَم بين الأعمدة في العناصر متعددة الأعمدة. هذه الخاصية ستضبط قيمة الخاصيات column-rule-width و column-rule-style و column-rule-color في خاصيةٍ واحدة. column-rule-color تُحدِّد لون الخط العمودي (rule) الذي سيُرسَم بين الأعمدة في العناصر ...

الخاصية الوصف direction تضبط اتجاه النص، ونستخدم القيمة rtl معها للإشارة إلى اللغات التي تُكتَب من اليمين إلى اليسار مثل اللغة العربية، و ltr للغات التي تُكتَب من اليسار إلى اليمين مثل اللغة الإنكليزية. لاحظ أنَّ اتجاه النص يُعرَّف عادةً باستخدام الخاصية dir على عنصر <html> لكامل المستند، وليس باستخدام الخاصية direction. letter-spacing تُحدِّد ما هو التباعد بين الأحرف النصية. line-break تُحدِّد سلوك المتصفح في الانتقال إلى سطرٍ جديد عند التعامل مع علامات الترقيم والرموز. overflow-wrap تُحدِّد إذا كان على المتصفح الانتقال إلى سطر جديد ضمن الكلمات نفسها لمنع ...

الخاصية الوصف color تضبط القيمة اللونية للأمامية (foreground) للمحتوى النصي للعنصر وللزخرفة النصية (text decorations)، وستضبط أيضًا قيمة الكلمة المحجوزة currentColor، والتي يمكن أن تستخدم كقيمة غير مباشرة في الخاصيات الأخرى التي لا تأخذ لونها من الخاصية color مباشرةً (مثل الخاصيةborder-color). opacity تحديد درجة شفافية أحد العناصر، أي مدى ظهور المحتوى الذي يقع وراءه.

الخاصية الوصف transition خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات transition-property و transition-duration و transition-timing-function و transition-delay. transition-delay تُحدِّد الزمن الذي يجب انتظاره بين وقوع الحدث الذي سيؤدي إلى بدء تأثير الانتقال وبين بداية التأثير. transition-duration تُحدِّد الزمن الذي سيستغرقه تأثير الانتقال للوصول إلى القيمة النهائية للخاصية، والقيمة الافتراضية 0s لن تؤدي إلى حدوث تأثير انتقال أبدًا. transition-property تستعمل لتحديد أسماء خاصيات CSS التي ستخضع لتأثير الانتقال. transition-timing-function تستعمل لوصف كيف ستتأثر القيم الوسطية لخاصيات CSS بتأثير الانتقال، أي أنها تسمح لك بتحديد ما هو منحني التسارع ...

الخاصية الوصف border-collapse تُحدِّد إذا كان إطار الجدول منفصلًا عن إطار الخلايا (أي لكلٍ واحدٍ منها إطارٌ خاصٌ به) أو كان مدمجًا مع إطار الخلايا (أي تتشارك الخلايا المتجاورة الإطار مع بعضها بعضًا). border-spacing تُحدِّد المسافة بين إطارات خلايا الجداول المتجاورة. لن يكون لهذه الخاصية أثرٌ إلا إذا كانت قيمة الخاصية border-collapse هي separate. caption-side تُحدِّد موضع لافتة الجدول المُعرَّفة عبر العنصر<caption>. empty-cells تُحدِّد كيف يجب أن يعرض المتصفح خلفية وإطر خلايا الجداول <table> التي ليس فيها محتوى ظاهر. لن يكون لهذه الخاصية أثرٌ إلا ...

شكل الإطار الخاصية الوصف border الخاصية border في CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات التي تتحكم بإطار العنصر في آنٍ واحد، وهي: border-color و border-style و border-width، وكما في جميع الخاصيات المختصرة، أيّ قيمة غير مُحدِّدة سيُعاد ضبطها إلى قيمتها الابتدائية، أضف إلى ذلك أنَّ الخاصية border لا يمكن أن تُستخدَم لتحديد قيمة للخاصية border-image وإنما ستضبِط قيمتها إلى القيمة الابتدائية none. border-bottom الخاصية border-bottom في CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات border-bottom-color و border-bottom-style و border-bottom-width، هذه الخاصيات تصف كيفية عرض الإطار border السفلي للعنصر. border-bottom-color تُحدِّد لون الإطار السفلي الخاص بالعنصر. لاحظ أنَّه في ...

الخاصية الوصف background الخاصية background المختصرة في CSS تسمح لنا بتعديل خيارات تنسيق الخلفية كلها دفعةً واحدةً، بما في ذلك اللون أو الصورة، والمبدأ والحجم، وطريقة التكرار، وغير ذلك من الميزات. يمكن استخدام الخاصية background لضبط قيم خاصية أو أكثر من الخاصيات الآتية: background-clip، و background-color، و background-image، و background-origin، وbackground-position، و background-repeat، و background-size، و background-attachment. background-attachment تُحدِّد إذا كان موضع الصورة (المُحدَّدة عبر الخاصية background-image) ثابتًا (fixed) ضمن إطار العرض (viewport) أو كان سيُمرَّر عند التمرير في العنصر (أو الصفحة) الحاوي له. background-blend-mode تصف كيف يجب أن تمتزج صور الخلفية ...

الخاصية transition في CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات transition-property و transition-duration و transition-timing-function و transition-delay. بطاقة الخاصية القيمة الابتدائية لكل خاصية مختصرة: transition-delay: 0s transition-duration: 0s transition-property: all transition-timing-function: ease تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للتحريك لا القيمة المحسوبة لكل خاصية مختصرة: transition-delay: كما حُدِّدَت. transition-duration: كما حُدِّدَت. transition-property: كما حُدِّدَت. transition-timing-function: كما حُدِّدَت. /* property name | duration */ transition: margin-right 4s; /* property name | duration | delay */ transition: margin-right 4s 1s; /* property name | duration | timing function ...

الخاصية border-right-width في CSS تضبط عرض الإطار الأيمن للعنصر. بطاقة الخاصية القيمة الابتدائية medium تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للتحريك نعم القيمة المحسوبة الطول المطلق، أو 0 إذا ضُبِطَت الخاصية border-right-style إلى none أو hidden. /* كلمات مفتاحية */ border-right-width: thin; border-right-width: medium; border-right-width: thick; /* <length> أطوال */ border-right-width: 10em; border-right-width: 3vmax; border-right-width: 6px; /* قيم عامة */ border-right-width: inherit; border-right-width: initial; border-right-width: unset; أمثلة سنضبط في المثال الآتي إطارًا على الجانب الأيمن لعناصر <div> لونه (border-right-color) أخضر، وعرضه (border-right-width) يساوي 4px وشكله (border-right-style) منقط. شيفرة HTML: ...

الخاصية border-left-width في CSS تضبط عرض الإطار الأيسر للعنصر. بطاقة الخاصية القيمة الابتدائية medium تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للتحريك نعم الوسائط مرئية القيمة المحسوبة الطول المطلق، أو 0 إذا ضُبِطَت الخاصية border-left-style إلى none أو hidden. /* كلمات مفتاحية */ border-left-width: thin; border-left-width: medium; border-left-width: thick; /* <length> أطوال */ border-left-width: 10em; border-left-width: 3vmax; border-left-width: 6px; /* قيم عامة */ border-left-width: inherit; border-left-width: initial; border-left-width: unset; أمثلة سنضبط في المثال الآتي إطارًا على الجانب الأيسر لعناصر <div> لونه (border-left-color) أخضر، وعرضه (border-left-width) يساوي 4px وشكله (border-left-style) منقط. ...

الخاصية border-top-width في CSS تضبط عرض الإطار العلوي للعنصر. بطاقة الخاصية القيمة الابتدائية medium تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للتحريك نعم القيمة المحسوبة الطول المطلق، أو 0 إذا ضُبِطَت الخاصية border-top-style إلى none أو hidden. /* كلمات مفتاحية */ border-top-width: thin; border-top-width: medium; border-top-width: thick; /* <length> أطوال */ border-top-width: 10em; border-top-width: 3vmax; border-top-width: 6px; /* قيم عامة */ border-top-width: inherit; border-top-width: initial; border-top-width: unset; أمثلة سنضبط في المثال الآتي إطارًا علويًا لعناصر <div> لونه (border-top-color) أخضر، وعرضه (border-top-width) يساوي 4px وشكله (border-top-style) منقط. شيفرة HTML: <div>لهذا العنصر ...

الخاصية border-bottom-width في CSS تضبط عرض الإطار السفلي للعنصر. بطاقة الخاصية القيمة الابتدائية medium تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للتحريك نعم القيمة المحسوبة الطول المطلق، أو 0 إذا ضُبِطَت الخاصية border-bottom-style إلى none أو hidden. /* كلمات مفتاحية */ border-bottom-width: thin; border-bottom-width: medium; border-bottom-width: thick; /* <length> أطوال */ border-bottom-width: 10em; border-bottom-width: 3vmax; border-bottom-width: 6px; /* قيم عامة */ border-bottom-width: inherit; border-bottom-width: initial; border-bottom-width: unset; أمثلة سنضبط في المثال الآتي إطارًا سفليًا لعناصر <div> لونه (border-bottom-color) أحمر، وعرضه (border-bottom-width) يساوي 4px وشكله (border-bottom-style) منقط. شيفرة HTML: <div>لهذا العنصر ...