نتائج البحث

الكلمة المحجوزة inherit في CSS تؤدي إلى جعل العنصر يأخذ القيمة المحسوبة لهذه الخاصية من العنصر الأب، ويمكن تطبيق هذه القيمة على جميع خاصيات CSS بما في ذلك خاصية all المختصرة. إذا كانت الخاصية موروثة، فيمكن استخدام هذه القيمة للتوضيح أو لتجاوز قيمة قاعدة أخرى، أما للخاصيات غير الموروثة، فستجد أنَّ من غير المنطقي استخدام هذه القيمة وربما تضع بالحسبان استخدام الكلمة المحجوزة initial. لاحظ أنَّ الوراثة تكون من العنصر الأب في شجرة المستند دومًا، حتى لو لم يكن العنصر ...

يُستدعَى التابع inherited كرد نداء في كل مرة يُنشأ فيها صنف فرعي (subclass) من الصنف الحالي. البنية العامة inherited(subclass) أمثلة مثال على استخدام التابع inherited: class Foo def self.inherited(subclass) puts "New subclass: #{subclass}" end end class Bar < Foo end class Baz < Bar end انظر أيضًا التابع new: يُنشئ صنفًا جديدًا مجهولًا غير مسمى (unnamed) من الصنف الأب (superclass) الممرر إليه (أو من الصنف Object إن لم يمرر إليه أي شيء). التابع allocate: يحجز مساحةً من الذاكرة لكائن جديد من الصنف class ...

الكلمة المحجوزة initial في CSS تُطبِّق القيمة الابتدائية للخاصية على العنصر، ويمكن استخدام على جميع خاصيات CSS، بما في ذلك خاصية all المختصرة. لاحظ أنَّ القيمة الابتدائية في الخاصيات التي ورثت قيمها عن آبائها قد تكون مُفاجئة لك، لذا قد ترى أنَّ استخدام إحدى الكلمات المحجوزة inherit أو unset أو revert مناسبٌ أكثر. أمثلة مثال عن ضبط لون الفقرة <p> إلى اللون الأحمر، ثم استخدام الكلمة المحجوزة initial على العنصر <em> لإعادة قيمة الخاصية color إلى قيمتها الابتدائية (اللون الأسود). ...

الكلمة المحجوزة unset في CSS تُعيد ضبط قيمة الخاصية إلى قيمتها المورثة إن ورثت القيمة من العنصر الأب، أو إلى قيمتها الابتدائية إن لم ترثها؛ بصياغة أخرى، ستسلك هذه الكلمة المحجوزة سلوك inherit في الحالة الأولى، وسلوك initial في الحالة الثانية، ويمكن استخدام على جميع خاصيات CSS، بما في ذلك خاصية all المختصرة. أمثلة إعادة ضبط قيمة الخاصية color للعنصر <p> الموجود داخل العنصر <div> ذو الصنف bar إلى قيمتها الموروثة، ألا وهي green؛ أي كأننا ضبطنا قيمة الخاصية color إلى الكلمة ...

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

الخاصية الوصف 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 تُحدِّد إذا كان على المتصفح الانتقال إلى سطر جديد ضمن الكلمات نفسها لمنع ...

الخاصية الوصف 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 تصف كيف يجب أن تمتزج صور الخلفية ...

توصيف المشكلة يتطلَّب إنشاءُ صنفٍ فرعيٍّ (subclass) لأحد الأصناف إنشاءَ صنفٍ فرعيٍّ ثانٍ لصنفٍ آخر غيره. أسبابها لا تبدو المشكلة واضحةً في الهيكليّات (hierarchies) الصغيرة، ولكنها تبدأ بالظهور مع إضافة أصناف (classes) جديدةٍ ممّا يجعل إجراء التعديلات أمرًا صعبًا. وما الحل؟ التخلُّص من التكرار التفرعيّ بين الهيكليّتين (hierarchies)، ويتمّ بخطوتين: إنشاء مرجعيّة (reference) من إحدى الهيكليّتين التفرعيّتين إلى الهيكليّة الثانية. إزالة الهيكليّة في الصنف المُشار إليه (referred class)، وذلك بنقل التوابع (move methods) ونقل الحقول (move fields). إليك المزيد ستحصل ...

تُستخدم الكلمة المفتاحيّة class للتصريح (declaration) عن الصنف بالصيغة الآتية (اسم الصنف Invoice): class Invoice { } ويحتوي التصريح على اسم الصنف (class name) وترويسة الصنف (class header) (والتي تُحدِّد معاملات النوع والباني الأساسيّ ...إلخ.) وبُنية الصنف (class body) محاطةً بالقوسين {}، وإن كلًا من ترويسة الصنف وبُنيته اختياريتان؛ فإذا كان الصنف خاليًا لا حاجة للأقواس، مثل: class Empty الباني (Constructor) يوجد لكلّ صنف في لغة Kotlin بانٍ رئيسيّ (primary) واحدٌ وبانٍ -أو أكثر- ثانويّ (secondary)، إذ يُعدُّ الباني الرئيسيّ جزءًا من ...

المشكلة يحتوي الصنف على العديد من التوابع البسيطة التي تفوِّض إلى كل التوابع في صنفٍ آخر. الحل جعل الصنف مفوِّض وارث، الأمر الذي يجعل تابع التفويض غير ضروري. مثال قبل إعادة التصميم التابع الموجود في الصنف Employee مفوَّض إلى التابع ()getName في الصنف Person: يحتوي الصنف على العديد من التوابع البسيطة التي تفوِّض إلى كل التوابع في صنفٍ آخر. بعد إعادة التصميم جعل الصنف Employee يرث من الصنف Person والتخلص من التفويض: أصبح الصنف مفوِّض وارث، الأمر الذي يجعل تابع ...

القيمة المستخدمة (used value) لإحدى خاصيات CSS هي القيمة النهائية لتلك الخاصية بعد إجراء جميع الحسابات اللازمة. بعد أن ينتهي المتصفح من إجراء حساباته، فسيكون لكل خاصية لها مُستخدَمة، والقيم المستخدمة للخاصيات المتعلقة بالأبعاد (مثل width أو line-height) ستكون بواحدة البكسل، أما القيم المستخدم للخاصيات المختصرة (مثل background) فستحتوي على قيم الخاصيات الفرعية (مثل background-color). تفاصيل عن القيمة المستخدمة هنالك أربع خطوات لحساب القيمة النهاية لخاصيات CSS، فأول خطوة تتضمن الحصول على القيمة المُحدَّدة التي تأتي من أعلى قاعدة تحديدًا؛ ...

القيمة المحسوبة (computed value) لإحدى خاصيات CSS تُحسَب من القيمة المُحدَّدة كما يلي: التعامل مع القيم الخاصة inherit و initial. إجراء الحسابات اللازمة للوصول إلى القيمة الموصوفة في الجدول الموجود في صفحة الخاصيات بعنوان «القيمة المحسوبة» (والمأخوذ من المواصفة). العمليات الحسابية المطلوبة للوصول إلى القيمة المحسوبة للخاصية قد تتضمن تحويل الواحدات النسبية (مثل em أو النسبة المئوية <percentage>) إلى أطوال مطلقة. على سبيل المثال، إذا كان للعنصر القيمة 16px للخاصية font-size، والقيمة 2em للخاصية padding-top، فإنَّ القيمة المحسوبة للخاصية padding-top ...

العنصر الوصف ‎::after‎ هو آخر عنصر ابن للعنصر المُحدَّد، ويستخدَم عادةً لإضافة محتوى تزييني للعنصر باستخدام الخاصية content، وهو عنصرٌ سطريٌ افتراضيًا. ‎::backdrop هو صندوقٌ يُعرَض مباشرةً تحت أيّ عنصر معروض في وضع ملء الشاشة. ‎::before هو أوّل عنصر ابن للعنصر المُحدَّد، ويستخدَم عادةً لإضافة محتوى تزييني للعنصر باستخدام الخاصية content، وهو عنصرٌ سطريٌ افتراضيًا. ‎::first-letter يؤدي إلى تطبيق الأنماط على أوّل حرف من أوّل سطر من العناصر الكتلية (block-level elements)، شرط ألّا يسبقها محتوى آخر (مثل الصور أو الجداول السطرية). ‎::first-line ...

الصنف التمثيل ‎:active العناصر (مثل الأزرار) التي جرى تفعيلها من المستخدم. وعند استخدام الفأرة سيبدأ «تفعيل» العنصر عندما يضغط المستخدم على الزر الرئيسي لها وينتهي عند إفلات الضغط على ذاك الزر. ‎:checked أزرار انتقاء (radio button) أو صناديق تأشير (checkbox) أو خيارات <option> في عنصر<select> تم تحديدها أو انتقاؤها. يمكن أن يُفعِّل المستخدم هذه الحالة بتفعيل أو انتقاء العنصر. ‎:default أي عنصر مُختار افتراضيًا بين مجموعة من العناصر المتعلقة به؛ ويمكن استخدام هذا الصنف الزائف على أيّة أزرار عادية <button> أو أزرار انتقاء (radio button) ...

خصائص الصندوق الخاصية الوصف box-sizing تُستخدم لتعديل النموذج الصندوقي الافتراضي في CSS (أي CSS box model) المستخدم لحساب عرض وارتفاع العناصر. height تُحدِّد ارتفاع أحد العناصر، وتستخدم هذه الخاصية افتراضيًا لتحديد ارتفاع منطقة المحتوى، لكن إن كانت الخاصية box-sizing مضبوطة إلى border-box فستُحدِّد ارتفاع العنصر بدءًا من الحافة الخارجية للإطار. max-height تضبط الارتفاع الأقصى للعنصر، وهي تمنع القيمة المستخدمة (used value) للخاصية height من أن تتجاوز القيمة المُحدَّدة في الخاصية max-height. max-width تضبط العرض الأقصى للعنصر، وهي تمنع القيمة المستخدمة (used value) للخاصية width من أن تتجاوز القيمة المُحدَّدة ...

الخاصية الوصف content تُستخدَم مع العنصرين الزائفين ‎::before و‎::after لتوليد محتوى في العنصر. quotes تُشير إلى الطريقة التي يجب أن يعرض فيها المتصفح علامات الاقتباس.

نوع البيانات الوصف angle نوع البيانات <angle> في CSS يستعمل لتمثيل القيم الزاويّة بالدرجات (degrees) أو بالغراد (grad) أو بالراديان (radians) أو بالدورات (turns)، ويمكن استخدام هذا النوع في التدرجات اللونية <gradient> وبعض دوالtransform. blend-mode نوع البيانات <blend-mode> في CSS يستعمل لوصف كيف يجب أن تمتزج الألوان عند تداخل طبقات الخلفات مع بعضها بعضًا. فلكل بكسل من بكسلات الطبقة التي طُبِّق عليها نمط الامتزاج، فسيأخذ اللون من الخلفية ومن الأمامية، وستُجرى عملية حسابية عليه، ويُعاد لونٌ جديدٌ سيستخدم مكان تداخل الطبقات. color value نوع البيانات <color> في CSS ...

الخاصية الوصف caret-color تُحدِّد ما هو لون مؤشر الإدخال النصي (وهي الإشارة التي تظهر للإشارة إلى موضع الحرف النصي الذي سيدخله المستخدم) ضمن عنصر مثل <input> أو أي عنصر آخر له الخاصية contenteditable. الشكل الافتراضي لمؤشر الإدخال هو خطٌ رأسيٌ يومض لتسهيل ملاحظته، ويكون لونه الافتراضي هو الأسود، لكن يمكن تعديله باستخدام هذه الخاصية. cursor تُحدِّد ما هو شكل مؤشر الفأرة الذي سيُعرَض عندما تمر الفأرة فوق العنصر. outline الخاصية outline في CSS هي خاصية مختصرة تُستخدَم لضبط خاصية أو أكثر من الخاصيات outline-style و outline-width و outline-color في آنٍ واحد. ...

الخاصية text-decoration-color في CSS تُحدِّد اللون المستخدم لرسم علامة التوكيد (emphasis mark) المستخدمة على كل محرف نصي في العنصر؛ يمكن ضبط قيمة هذه الخاصية باستعمال الخاصية المختصرة text-emphasis. بطاقة الخاصية القيمة الابتدائية currentcolor تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للتحريك نعم الوسائط مرئية القيمة المحسوبة القيمة اللونية المحسوبة. /* القيمة الابتدائية */ text-emphasis-color: currentColor; /* <color> */ text-emphasis-color: #555; text-emphasis-color: blue; text-emphasis-color: rgba(90, 200, 160, 0.8); text-emphasis-color: transparent; /* القيم العامة */ text-emphasis-color: inherit; text-emphasis-color: initial; text-emphasis-color: unset; أمثلة مثال عن استخدام الخاصية text-emphasis-color على العنصر <strong> مع الخاصية ...

الخاصية orphans في CSS تُحدِّد العدد الأدنى للأسطر النصية الموجودة في حاوية كتلية التي يجب أن تظهر في أسفل الصفحة أو العمود. بطاقة الخاصية القيمة الابتدائية 2 تُطبَّق على جميع الحاويات الكتلية (block containers). قابلة للوراثة لا قابلة للتحريك لا القيمة المحسوبة كما حُدِّدَت. في التنسيق الطباعي، تكون اليتامى (orphans) هي أول سطر من الفقرة الذي يظهر بمفرده في أسفل الصفحة أو العمود. /* <integer> أعداد صحيحة */ orphans: 2; orphans: 3; /* القيم العامة */ orphans: inherit; orphans: initial; orphans: unset; دعم المتصفحات الميزة Chrome ...

الدالة attr()‎ في CSS تُستعمَل للحصول على قيمة إحدى خاصيات العنصر المُحدَّد واستخدامها في أنماط CSS، ويمكن استعمالها أيضًا على العناصر الزائفة (pseudo-elements) وفي هذه الحالة ستُستخدَم قيمة خاصية العنصر الأصل. /* استخدام بسيط */ attr(data-count); attr(title); /* تحديد نوع البيانات */ attr(src url); attr(data-count number); attr(data-width px); /* توفير قيمة افتراضية */ attr(data-count number, 0); attr(src url, ''); attr(data-width px, inherit); attr(data-something, 'default'); لاحظ أنَّ الدالة attr()‎ يمكن استخدامها مع أيّ خاصية CSS، لكن دعم استخدامها مع جميع الخاصيات باستثناء content ما يزال تجريبيًا. أمثلة لاحظ كيف خزّنا السلسلة النصية hello ...

الخاصية outline-color في CSS تضبط لون حدود outline العنصر، التي هي الخطوط التي تُرسَم خارج إطار العنصر border. من المستحسن استخدام الخاصية المختصرة outline عند ضبط مظهر حدود العنصر، لأنها تضبط عدِّة خاصيات في آنٍ واحد. بطاقة الخاصية القيمة الابتدائية currentColor تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للحركة نعم القيمة المحسوبة قيمة لونية <color>. /* <color> القيم اللونية */ outline-color: #f92525; outline-color: rgb(30,222,121); outline-color: blue; /* القيم العامة */ outline-color: inherit; outline-color: initial; outline-color: unset; أمثلة سنجعل لون حدود الفقرة <p> الآتية أزرق: <p>لون حدود ...

الخاصية widows في CSS تُحدِّد العدد الأدنى للأسطر النصية الموجودة في حاوية كتلية التي يجب أن تظهر في أعلى الصفحة أو العمود. بطاقة الخاصية القيمة الابتدائية 2 تُطبَّق على جميع الحاويات الكتلية (block containers). قابلة للوراثة لا قابلة للتحريك لا القيمة المحسوبة كما حُدِّدَت. في التنسيق الطباعي، تكون الأرامل (widows) هي آخر سطر من الفقرة الذي يظهر بمفرده في أعلى الصفحة أو العمود. /* <integer> أعداد صحيحة */ widows: 2; widows: 3; /* القيم العامة */ widows: inherit; widows: initial; widows: unset; دعم المتصفحات الميزة Chrome ...

الخاصية text-decoration-position في CSS تُحدِّد موضع رسم علامة التوكيد (emphasis mark) المستخدمة على كل محرف نصي في العنصر؛ وقد تؤدي هذه الخاصية إلى تغيير ارتفاع السطر إن لم يتسع لعلامة التوكيد. بطاقة الخاصية القيمة الابتدائية over right تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للتحريك لا الوسائط مرئية القيمة المحسوبة كما حُدِّدَت. /* القيمة الابتدائية */ text-emphasis-position: over right; /* الكلمات المحجوزة */ text-emphasis-position: over left; text-emphasis-position: under right; text-emphasis-position: under left; text-emphasis-position: left over; text-emphasis-position: right under; text-emphasis-position: left under; /* القيم العامة */ text-emphasis-position: inherit; text-emphasis-position: initial; text-emphasis-position: unset; أمثلة ...

القاعدة ‎@import في CSS تسمح للمطورين باستيراد قواعد التنسيق من صفحات الأنماط الأخرى، وهذا النوع من القواعد يجب أن يسبق جميع قواعد CSS الأخرى، ما عدا قواعد ‎@charset. @import url("fineprint.css") print; @import url("bluish.css") projection, tv; @import 'custom.css'; @import url("chrome://communicator/skin/"); @import "common.css" screen, projection; @import url('landscape.css') screen and (orientation:landscape); لكي تتمكن المتصفحات من تفادي تنزيل موارد لأنواع الوسائط غير المدعومة، فيمكن أن يوفِّر المطورون قواعد ‎@import مع تحديد الوسائط (media) المتربطة بها، وقواعد الاستيراد الشرطية تسمح بتحديد استعلامات عن الوسائط (media queries) يُفصَل بينها بفاصلة بعد رابط ...

الخاصية padding-right في CSS تضبط الحاشية (padding) في الطرف الأيمن للعنصر؛ وعلى نقيض الهوامش margin، لا يجوز استخدام استخدام القيم السالبة للحواشي. ويمكن استخدام الخاصية المختصرة padding لضبط جميع الحواشي على الأطراف الأربعة لأحد العناصر في قاعدة واحدة. بطاقة الخاصية القيمة الابتدائية 0 تُطبَّق على جميع العناصر، ما عدا عناصر الجداول التي لا تساوي فيها قيمة الخاصية display إحدى الكلمات المحجوزة table-caption و table و inline-table. قابلة للوراثة لا قابلة للتحريك نعم القيمة المحسوبة نسبة مئوية أو طول مطلق. /* ...

الخاصية padding-bottom في CSS تضبط الحاشية (padding) في الطرف السفلي للعنصر؛ وعلى نقيض الهوامش margin، لا يجوز استخدام القيم السالبة للحواشي. ويمكن استخدام الخاصية المختصرة padding لضبط جميع الحواشي على الأطراف الأربعة لأحد العناصر في قاعدة واحدة. بطاقة الخاصية القيمة الابتدائية 0 تُطبَّق على جميع العناصر، ما عدا عناصر الجداول التي لا تساوي فيها قيمة الخاصية display إحدى الكلمات المحجوزة table-caption و table و inline-table. قابلة للوراثة لا قابلة للتحريك نعم القيمة المحسوبة نسبة مئوية أو طول مطلق. /* <length> ...

الخاصية padding-left في CSS تضبط الحاشية (padding) في الطرف الأيسر للعنصر؛ وعلى نقيض الهوامش margin، لا يجوز استخدام استخدام القيم السالبة للحواشي. ويمكن استخدام الخاصية المختصرة padding لضبط جميع الحواشي على الأطراف الأربعة لأحد العناصر في قاعدة واحدة. بطاقة الخاصية القيمة الابتدائية 0 تُطبَّق على جميع العناصر، ما عدا عناصر الجداول التي لا تساوي فيها قيمة الخاصية display إحدى الكلمات المحجوزة table-caption و table و inline-table. قابلة للوراثة لا قابلة للتحريك نعم القيمة المحسوبة نسبة مئوية أو طول مطلق. /* ...

الخاصية padding-top في CSS تضبط الحاشية (padding) في الطرف العلوي للعنصر؛ وعلى نقيض الهوامش margin، لا يجوز استخدام استخدام القيم السالبة للحواشي. ويمكن استخدام الخاصية المختصرة padding لضبط جميع الحواشي على الأطراف الأربعة لأحد العناصر في قاعدة واحدة. بطاقة الخاصية القيمة الابتدائية 0 تُطبَّق على جميع العناصر، ما عدا عناصر الجداول التي لا تساوي فيها قيمة الخاصية display إحدى الكلمات المحجوزة table-caption و table و inline-table. قابلة للوراثة لا قابلة للتحريك نعم القيمة المحسوبة نسبة مئوية أو طول مطلق. /* ...

الخاصية caption-side في CSS تُحدِّد موضع لافتة الجدول المُعرَّفة عبر العنصر <caption>. بطاقة الخاصية القيمة الابتدائية top تُطبَّق على العنصر <caption>. قابلة للوراثة نعم قابلة للحركة لا القيمة المحسوبة كما حُدِّدَت. /* كلمات محجوزة */ caption-side: top; caption-side: bottom; /* القيم العامة */ caption-side: inherit; caption-side: initial; caption-side: unset; أمثلة سنستخدم في المثال الآتي جدولين <table> مع لافتةٍ <caption> لكل واحدٍ منهما، ثم سنستعمل الخاصية caption-side لضبط موضع اللافتة: <table class="top"> <caption>اللافتة فوق الجدول</caption> <tr> ...

الخاصية counter-increment في CSS تُزيد أو تُنقِص قيمة أحد عدّادات CSS بقيمة معيّنة، ويمكن إعادة تعيين العدّاد إلى رقم معيّن باستخدام الخاصية counter-reset. بطاقة الخاصية القيمة الابتدائية none تُطبَّق على كل العناصر. قابلة للوراثة لا قابلة للتحريك لا القيمة المحسوبة كما حُدِّدَت. /* الزيادة بمقدار 1 */ counter-increment: my-counter; /* الإنقاص بمقدار 1 */ counter-increment: my-counter -1; /* زيادة أحد العدادات بمقدار 1 وإنقاص الثاني بمقدار 4*/ counter-increment: counter1 counter2 -4; /* عدم زيادة أو إنقاص أيّ عداد، وتُستخدَم لتجاوز القواعد التي لها أولوية أقل */ counter-increment: ...

الخاصية empty-cells في CSS تُحدِّد كيف يجب أن يعرض المتصفح خلفية وإطار خلايا الجداول <table> التي ليس فيها محتوى ظاهر. لن يكون لهذه الخاصية أثرٌ إلا إذا كانت الخاصية border-collapse مضبوطةً إلى separate. بطاقة الخاصية القيمة الابتدائية show تُطبَّق على خلايا الجداول. قابلة للوراثة نعم قابلة للحركة لا القيمة المحسوبة كما حُدِّدَت. /* كلمات محجوزة */ empty-cells: show; empty-cells: hide; /* القيم العامة */ empty-cells: inherit; empty-cells: initial; empty-cells: unset; أمثلة سنستخدم في المثال الآتي جدولين <table> فيهما خلايا ليس فيها محتوى، واستعملنا القيمة show ...

الخاصية letter-spacing في CSS تُحدِّد ما هو التباعد بين الأحرف النصية. بطاقة الخاصية القيمة الابتدائية normal تُطبَّق على جميع العناصر. قابلة للوراثة نعم. قابلة للتحريك نعم القيمة المحسوبة طول مطلق أو الكلمة المحجوزة normal. /* <length> أطوال */ letter-spacing: 0.3em; letter-spacing: 3px; letter-spacing: .3px; /* كلمة محجوزة */ letter-spacing: normal; /* قيم عامة */ letter-spacing: inherit; letter-spacing: initial; letter-spacing: unset; أمثلة مثال عن استخدام قيم موجبة وسالبة مع الخاصية letter-spacing لزيادة (أو إنقاص) التباعد بين الأحرف: <p class="ex1">letter spacing</p> <p class="ex2">letter spacing</p> <p class="ex3">letter spacing</p> <p class="ex4">letter spacing</p> شيفرة CSS: .ex1 { letter-spacing: ...

الخاصية border-left-color في CSS تُحدِّد لون الإطار الأيسر الخاص بالعنصر. لاحظ أنَّه في أغلبية الحالات يُفضَّل استخدام خاصيات CSS المختصرة مثل border-color أو border-left. بطاقة الخاصية القيمة الابتدائية currentcolor تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للتحريك نعم القيمة المحسوبة اللون المحسوب. /* <color> قيم */ border-left-color: red; border-left-color: #ffbb00; border-left-color: rgb(255, 0, 0); border-left-color: hsla(100%, 50%, 25%, 0.75); border-left-color: currentcolor; border-left-color: transparent; /* القيم العامة */ border-left-color: inherit; border-left-color: initial; border-left-color: unset; أمثلة سنضبط في المثال الآتي إطارًا على الجانب الأيسر لعناصر <div> لونه (border-left-color) أخضر، وعرضه (border-left-width) ...

الخاصية list-style-image في CSS تُحدِّد صورةً لتُستخدَم للإشارة إلى عناصر القائمة. ومن المستحسن عادةً استخدام الخاصية المختصرة list-style لضبط قيمة هذه الخاصية. بطاقة الخاصية القيمة الابتدائية none تُطبَّق على عناصر القوائم. قابلة للوراثة نعم قابلة للتحريك لا القيمة المحسوبة القيمة none أو رابط URI مطلق للصورة. /* كلمة مفتاحية */ list-style-image: none; /* <url> قيم */ list-style-image: url('starsolid.gif'); /* القيم العامة */ list-style-image: inherit; list-style-image: initial; list-style-image: unset; ملاحظة: هذه الخاصية ستُطبَّق على عناصر القوائم، أي العناصر التي تكون قيمة الخاصية display فيها تساوي list-item، وهذا يتضمن ...

الخاصية border-right-color في CSS تُحدِّد لون الإطار الأيمن الخاص بالعنصر. لاحظ أنَّه في أغلبية الحالات يُفضَّل استخدام خاصيات CSS المختصرة مثل border-color أو border-right. بطاقة الخاصية القيمة الابتدائية currentcolor تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للتحريك نعم القيمة المحسوبة اللون المحسوب. /* <color> قيم */ border-right-color: red; border-right-color: #ffbb00; border-right-color: rgb(255, 0, 0); border-right-color: hsla(100%, 50%, 25%, 0.75); border-right-color: currentcolor; border-right-color: transparent; /* القيم العامة */ border-right-color: inherit; border-right-color: initial; border-right-color: unset; أمثلة سنضبط في المثال الآتي إطارًا عى الجانب الأيمن لعناصر <div> لونه (border-right-color) أخضر، وعرضه (border-right-width) ...

الخاصية counter-reset في CSS تُعيد ضبط قيمة أحد عدّادات CSS إلى قيمة معيّنة، بينما يمكن زيادة أو إنقاص قيمة العداد باستخدام الخاصية counter-increment. بطاقة الخاصية القيمة الابتدائية none تُطبَّق على كل العناصر. قابلة للوراثة لا قابلة للتحريك لا القيمة المحسوبة كما حُدِّدَت. /* ضبط قيمة العداد إلى 0 */ counter-reset: my-counter; /* ضبط قيمة العداد إلى -1 */ counter-reset: my-counter -1; /* ضبط قيمة أوّل عداد إلى 1 وثاني عدّاد إلى 4 */ counter-reset: counter1 1 counter2 4; /* إلغاء عملية إعادة التعيين، وتُستخدَم لتجاوز القواعد ...

الخاصية height في CSS تُحدِّد ارتفاع أحد العناصر، وتستخدم هذه الخاصية افتراضيًا لتحديد ارتفاع منطقة المحتوى، لكن إن كانت الخاصية box-sizing مضبوطة إلى border-box فستُحدِّد ارتفاع العنصر بدءًا من الحافة الخارجية للإطار. بطاقة الخاصية القيمة الابتدائية auto تُطبَّق على جميع العناصر، ما عدا العناصر السطرية غير المُستبدَلة (non-replaced inline elements)، وأعمدة الجداول، ومجموعات الأعمدة. قابلة للوراثة لا قابلة للتحريك نعم القيمة المحسوبة نسبة مئوية أو طول مطلق أو الكلمة المحجوزة auto. /* كلمة محجوزة */ height: auto; /* <length> أطوال */ height: 120px; height: ...

الخاصية list-style-position في CSS تُحدِّد مكان إشارة عناصر القائمة. ومن المستحسن عادةً استخدام الخاصية المختصرة list-style. بطاقة الخاصية القيمة الابتدائية outside تُطبَّق على عناصر القوائم. قابلة للوراثة نعم قابلة للتحريك لا القيمة المحسوبة كما حُدِّدَت. /* كلمات مفتاحية */ list-style-position: inside; list-style-position: outside; /* القيم العامة */ list-style-position: inherit; list-style-position: initial; list-style-position: unset; ملاحظة: هذه الخاصية ستُطبَّق على عناصر القوائم، أي العناصر التي تكون قيمة الخاصية display فيها تساوي list-item، وهذا يتضمن العنصر <li> افتراضيًا؛ لكن لاحظ أنَّ قيمة هذه الخاصية قابلة للوراثة، أي يمكن ضبطها ...

الخاصية width في CSS تُحدِّد عرض أحد العناصر، وتستخدم هذه الخاصية افتراضيًا لتحديد عرض منطقة المحتوى (content area)، لكن إن كانت الخاصية box-sizing مضبوطة إلى border-box فستُحدِّد عرض العنصر بدءًا من الحافة الخارجية للإطار. بطاقة الخاصية القيمة الابتدائية auto تُطبَّق على جميع العناصر، ما عدا العناصر السطرية غير المُستبدَلة (non-replaced inline elements)، وأعمدة الجداول، ومجموعات الأعمدة. قابلة للوراثة لا قابلة للتحريك نعم القيمة المحسوبة نسبة مئوية أو طول مطلق أو الكلمة المحجوزة auto. /* كلمة محجوزة */ width: auto; /* <length> أطوال ...

الخاصية border-bottom-color في CSS تُحدِّد لون الإطار السفلي الخاص بالعنصر. لاحظ أنَّه في أغلبية الحالات يُفضَّل استخدام خاصيات CSS المختصرة مثل border-color أو border-bottom. بطاقة الخاصية القيمة الابتدائية currentcolor تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للتحريك نعم القيمة المحسوبة اللون المحسوب. /* <color> قيم */ border-bottom-color: red; border-bottom-color: #ffbb00; border-bottom-color: rgb(255, 0, 0); border-bottom-color: hsla(100%, 50%, 25%, 0.75); border-bottom-color: currentcolor; border-bottom-color: transparent; /* القيم العامة */ border-bottom-color: inherit; border-bottom-color: initial; border-bottom-color: unset; أمثلة سنضبط في المثال الآتي إطارًا سفليًا لعناصر <div> لونه (border-bottom-color) أخضر، وعرضه (border-bottom-width) يساوي 4px ...

الخاصية border-top-color في CSS تُحدِّد لون الإطار العلوي الخاص بالعنصر. لاحظ أنَّه في أغلبية الحالات يُفضَّل استخدام خاصيات CSS المختصرة مثل border-color أو border-top. بطاقة الخاصية القيمة الابتدائية currentcolor تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للتحريك نعم القيمة المحسوبة اللون المحسوب. /* <color> قيم */ border-top-color: red; border-top-color: #ffbb00; border-top-color: rgb(255, 0, 0); border-top-color: hsla(100%, 50%, 25%, 0.75); border-top-color: currentcolor; border-top-color: transparent; /* القيم العامة */ border-top-color: inherit; border-top-color: initial; border-top-color: unset; أمثلة سنضبط في المثال الآتي إطارًا علويًا لعناصر <div> لونه (border-top-color) أخضر، وعرضه (border-top-width) يساوي 4px ...

الخاصية text-decoration في CSS تُحدِّد علامة التوكيد (emphasis mark) المستخدمة على كل محرف نصي في العنصر باستثناء الفراغات ومحارف التحكم (control chars، مثل محرف السطر الجديد، ومحرف العودة إلى بداية السطر)؛ وهي خاصيةٌ مختصرة لضبط قيمة أكثر من خاصية عن ضبط علامات التوكيد معًا، وهي تتضمن text-emphasis-style و text-emphasis-color. بطاقة الخاصية القيمة الابتدائية لكل قيمة مختصرة: text-emphasis-style: none text-emphasis-color: currentcolor تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للتحريك لا، باستثناء قيمة الخاصية text-emphasis-color. الوسائط مرئية القيمة المحسوبة لكل قيمة مختصرة: text-emphasis-style: كما حُدِّدَت. ...

الخاصية transform-style في CSS تُحدِّد إن كانت العناصر الأبناء للعنصر الحالي موجودة في الفضاء ثلاثي الأبعاد أو كانت مسطحةً (flattened) في مستوى العنصر الأب؛ وإذا كانت مسطحةً فهذا يعني أنها لن تكون موجودة في فضاءٍ ثلاثي الأبعاد خاصٍ بها. بطاقة الخاصية القيمة الابتدائية flat تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للتحريك لا القيمة المحسوبة كما حُدِّدَت. /* كلمات محجوزة */ transform-style: preserve-3d; transform-style: flat; /* القيم العامة */ transform-style: inherit; transform-style: initial; transform-style: unset; دعم المتصفحات الميزة Chrome Firefox Internet Explorer Opera Safari الدعم ...

الخاصية transition-property في CSS تستعمل لتحديد أسماء خاصيات CSS التي ستخضع لتأثير الانتقال. بطاقة الخاصية القيمة الابتدائية all تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للتحريك لا القيمة المحسوبة كما حُدِّدَت. /* كلمات محجوزة */ transition-property: none; transition-property: all; transition-property: test_05; transition-property: sliding-vertically; transition-property: test1; transition-property: test1, animation4; transition-property: all, height, all; /* القيم العامة */ transition-property: inherit; transition-property: initial; transition-property: unset; ملاحظة: قائمة الخاصيات القابلة للتحريك عرضةٌ للتغيير، وبالتالي يجدر بك تفادي استخدام أيّة خاصيات لا تقبل التحريك حاليًا، فقد يؤدي ذلك إلى نتائج غير متوقعة. إذا استخدمتَ خاصية مختصرة ...

الخاصية margin-top في CSS تضبط الهامش في الطرف العلوي من العنصر، والقيم الموجبة ستؤدي إلى إبعاد العنصر عمّا جاوره، والقيم السالبة ستقربه منها. بطاقة الخاصية القيمة الابتدائية 0 تُطبَّق على جميع العناصر، ما عدا عناصر الجداول التي لا تساوي فيها قيمة الخاصية display إحدى الكلمات المحجوزة table-caption و table و inline-table. قابلة للوراثة لا قابلة للتحريك نعم القيمة المحسوبة نسبة مئوية أو طول مطلق. /* <length> أطوال */ margin-top: 10px; /* طول مطلق */ margin-top: 1em; /* طول نسبي ...

الخاصية 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: ...

الخاصية outline-width في CSS تضبط عرض (أو ثخن) حدود outline العنصر، التي هي الخطوط التي تُرسَم خارج إطار العنصر border. من المستحسن استخدام الخاصية المختصرة outline عند ضبط مظهر حدود العنصر، لأنها تضبط عدِّة خاصيات في آنٍ واحد. بطاقة الخاصية القيمة الابتدائية medium تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للحركة نعم القيمة المحسوبة طول مطلق، إلا إذا حُدِّدَت الكلمة المحجوزة none فستكون القيمة المحسوبة 0. /* الكلمات المحجوزة */ outline-width: thin; outline-width: medium; outline-width: thick; /* <length> القيم الطولية */ outline-width: 1px; outline-width: 0.1em; /* ...

الخاصية font-style في CSS تُحدِّد إن كان يجب أن يكون شكل الخط عاديًا (normal) أو مائلًا (italic) أو منحرفًا (oblique). وسيختار المتصفح النسخة الأنسب من نوع الخط font-family. بطاقة الخاصية القيمة الابتدائية normal تُطبَّق على جميع العناصر. قابلة للوراثة نعم قابلة للتحريك لا القيمة المحسوبة كما حُدِّدَت. /* كلمات محجوزة */ font-style: normal; font-style: italic; font-style: oblique; /* القيم العامة */ font-style: inherit; font-style: initial; font-style: unset; يكون للخط المائل بعض سمات الكتابة اليدوية، ويستهلك عادةً مسافة أفقية أقل من الخط العادي، بينما الخط المنحرف (oblique) يُمثِّل نسخةً ...

الخاصية 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) منقط. ...

الخاصية flex-grow في CSS تُحدِّد معامل التمدد لأحد عناصر flex، وهي تُحدِّد مقدار المساحة التي يجب أن يأخذها العنصر داخل حاوية flex. بطاقة الخاصية القيمة الابتدائية 0 تُطبَّق على عناصر flex. قابلة للوراثة لا قابلة للتحريك نعم القيمة المحسوبة كما حُدِّدَت. /* <number> قيم عددية */ flex-grow: 3; flex-grow: 0.6; /* قيم عامة */ flex-grow: inherit; flex-grow: initial; flex-grow: unset; أمثلة في المثال الآتي، حددنا تمدد العناصر A و B و C و F باستخدام القاعدة flex-grow: 1، بينما كان تمدد العناصر D و E مساويًا ...

الخاصية word-spacing في CSS تُحدِّد كيف سيكون التباعد بين الكلمات والوسوم. بطاقة الخاصية القيمة الابتدائية normal تُطبَّق على جميع العناصر. قابلة للوراثة نعم. قابلة للتحريك نعم القيمة المحسوبة طول مطلق أو الكلمة المحجوزة normal. /* كلمة محجوزة */ word-spacing: normal; /* <length> أطوال */ word-spacing: 3px; word-spacing: 0.3em; /* <percentage> نسب مئوية */ word-spacing: 50%; word-spacing: 200%; /* قيم عامة */ word-spacing: inherit; word-spacing: initial; word-spacing: unset; أمثلة مثال عن استخدام قيم موجبة وسالبة مع الخاصية word-spacing لزيادة (أو إنقاص) التباعد بين الكلمات: <p class="word-spacing-px">محتوى موسوعة حسوب هو محتوى مرجعي، أي ...

الخاصية margin-bottom في CSS تضبط الهامش في الطرف السفلي من العنصر، والقيم الموجبة ستؤدي إلى إبعاد العنصر عمّا جاوره، والقيم السالبة ستقربه منها. بطاقة الخاصية القيمة الابتدائية 0 تُطبَّق على جميع العناصر، ما عدا عناصر الجداول التي لا تساوي فيها قيمة الخاصية display إحدى الكلمات المحجوزة table-caption و table و inline-table. قابلة للوراثة لا قابلة للتحريك نعم القيمة المحسوبة نسبة مئوية أو طول مطلق. /* <length> أطوال */ margin-bottom: 10px; /* طول مطلق */ margin-bottom: 1em; /* طول نسبي ...

الخاصية 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>لهذا العنصر ...

الخاصية resize في CSS تُحدِّد إذا كان تغيير حجم العنصر ممكنًا، وفي أيّ اتجاه. بطاقة الخاصية القيمة الابتدائية none تُطبَّق على العناصر التي لا تكون قيمة الخاصية overflow فيها تساوي visible. قابلة للوراثة لا قابلة للحركة لا القيمة المحسوبة كما حُدِّدَت. /* الكلمات المحجوزة */ resize: none; resize: both; resize: horizontal; resize: vertical; resize: block; resize: inline; /* القيم العامة */ resize: inherit; resize: initial; resize: unset; أمثلة سيُسمَح بتغيير حجم عناصر <textarea> من قِبل المستخدم في الكثير من المتصفحات؛ لكن يمكن تغيير هذا السلوك باستخدام الخاصية resize: <textarea>Type some ...

الخاصية 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>لهذا العنصر ...

الخاصية text-align في CSS تصف كيف تكون محاذاة العناصر السطرية مثل النصوص في الحاويات الكتلية؛ لاحظ أنَّ الخاصية text-align لا تتحكم بمحاذاة العناصر الكتلية، وإنما تتحكم بمحاذاة بالمحتوى السطري الموجود داخلها. بطاقة الخاصية القيمة الابتدائية start، أو قيمة غير محددة ستمثِّل القيمة left إذا كان اتجاه العنصر ltr، و right إذا كان اتجاه النص rtl وذلك في حال كانت القيمة start غير مدعومة في المتصفح. تُطبَّق على الحاويات الكتلية. قابلة للوراثة نعم قابلة للتحريك لا القيمة المحسوبة كما حُدِّدت، باستثناء ...

الخاصية animation-play-state في CSS تُحدِّد إذا كانت الحركة تعمل أو متوقفة مؤقتًا، ويمكن الحصول على قيمة هذه الخاصية عبر JavaScript لمعرفة حالة الحركة، ويمكن أيضًا استعمال JavaScript لضبط قيمتها لتوقيف الحركة مؤقتًا أو استئنافها. بطاقة الخاصية القيمة الابتدائية running تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للتحريك لا القيمة المحسوبة كما حُدِّدَت. /* قيمة واحدة */ animation-play-state: running; animation-play-state: paused; /* عدِّة قيم */ animation-play-state: paused, running, running; /* القيم العامة */ animation-play-state: inherit; animation-play-state: initial; animation-play-state: unset; استئناف الحركات المتوقفة مؤقتًا سيسمح بإكمالها من مكان توقفها، بدلًا ...

الخاصية line-break في CSS تُحدِّد سلوك المتصفح في الانتقال إلى سطرٍ جديد عند التعامل مع علامات الترقيم والرموز. بطاقة الخاصية القيمة الابتدائية auto تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للتحريك لا القيمة المحسوبة كما حُدِّدت. لاحظ أنَّ هذه الخاصية ما تزال غير مدعومة دعمًا جيدًا في المتصفحات، راجع قسم «دعم المتصفحات» لمزيدٍ من المعلومات. /* كلمات محجوزة */ line-break: auto; line-break: loose; line-break: normal; line-break: strict; /* قيم عامة */ line-break: inherit; line-break: initial; line-break: unset; دعم المتصفحات الميزة Chrome Firefox Internet Explorer Opera Safari الدعم ...

الخاصية animation-duration في CSS تُحدِّد الزمن اللازم لإكمال دورة كاملة من الحركة. بطاقة الخاصية القيمة الابتدائية 0s تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للتحريك لا القيمة المحسوبة كما حُدِّدَت. من الشائع استخدام الخاصية المختصرة animation لضبط جميع خاصيات الحركات بآنٍ واحد. /* حركة واحدة */ animation-duration: 6s; animation-duration: 120ms; /* عدِّة حركات */ animation-duration: 1.64s, 15.22s; animation-duration: 10s, 35s, 230ms; /* القيم العامة */ animation-name: initial animation-name: inherit animation-name: unset دعم المتصفحات الميزة Chrome Firefox Internet Explorer Opera Safari الدعم الأساسي 4.0 (مع السابقة -webkit-) 43.0 5.0 ...

الخاصية column-count في CSS هي تُحدِّد ما هو عدد الأعمدة التي سينقسم العنصر إليها. بطاقة الخاصية القيمة الابتدائية auto تُطبَّق على جميع الحاويات الكتلية (block containers) عدا حاويات الجداول. قابلة للوراثة لا قابلة للتحريك نعم القيمة المحسوبة كما حُدِّدَت. /* <integer> قيمة عددية */ column-count: 3; /* كلمة محجوزة */ column-count: auto; /* القيم العامة */ column-count: inherit; column-count: initial; column-count: unset; أمثلة مثال على استخدام الخاصية column-count وضبط قيمتها إلى 3: <p class="content-box"> هذه فقرةٌ نصيةٌ ستُقسَم إلى ثلاثة أعمدة باستخدام CSS، لاحظ أنَّ النص سيوزَّع بالتساوي بين ...

الخاصية column-gap في CSS تضبط حجم الفراغ بين الأعمدة في العناصر متعددة الأعمدة (multi-column elements). بطاقة الخاصية القيمة الابتدائية normal تُطبَّق على العناصر متعددة الأعمدة. قابلة للوراثة لا قابلة للتحريك نعم القيمة المحسوبة كما حُدِّدَت. /* كلمة محجوزة */ column-gap: normal; /* <length> قيمة طولية */ column-gap: 3px; column-gap: 2.5em; /* القيم العامة */ column-gap: inherit; column-gap: initial; column-gap: unset; أمثلة مثال عن استخدام الخاصية column-gap مع قيمة طولية: <p class="content-box"> هذه فقرةٌ نصيةٌ ستُقسَم إلى ثلاثة أعمدة باستخدام CSS، لاحظ المسافات بين الأعمدة المتجاورة. </p> شيفرة CSS: .content-box { ...

الخاصية tab-size في CSS تُستعمل لتخصيص عرض محرف الجدولة (tab) الذي له الرمز U+0009 في يونيكود. بطاقة الخاصية القيمة الابتدائية 8 تُطبَّق على الحاويات الكتلية. قابلة للوراثة نعم قابلة للتحريك نعم القيمة المحسوبة كما حُدِّدت. /* <integer> قيم عددية */ tab-size: 4; tab-size: 0; /* <length> قيم طولية */ tab-size: 10px; tab-size: 2em; /* قيم عامة */ tab-size: inherit; tab-size: initial; tab-size: unset; أمثلة مثال عن استخدام الخاصية tab-size على عنصر <pre> (لاحظ أنَّ الحالة الوحيدة التي سيُعرَض فيها محرف tab في مستندات HTML هي داخل العنصر <pre> أو ...

الخاصية grid-column-gap في CSS تُحدِّد المسافة التي تفصل بين الأعمدة في حاوية gird. بطاقة الخاصية القيمة الابتدائية 0 تُطبَّق على حاويات gird. قابلة للوراثة لا قابلة للتحريك نعم القيمة المحسوبة نسبة مئوية أو طول مطلق. /* <length> القيم الطولية */ grid-column-gap: 20px; grid-column-gap: 1em; grid-column-gap: 3vmin; grid-column-gap: 0.5cm; /* <percentage> النسب المئوية */ grid-column-gap: 10%; /* القيم العامة */ grid-column-gap: inherit; grid-column-gap: initial; grid-column-gap: unset; أمثلة مثال عن استخدام grid-column-gap لإضافة فراغ فاصل بين الأعمدة في حاوية grid: <div id="grid"> <div></div> <div></div> <div></div> </div> شيفرة CSS: #grid { ...

الخاصية grid-row-gap في CSS تُحدِّد المسافة التي تفصل بين الأسطر في حاوية gird. بطاقة الخاصية القيمة الابتدائية 0 تُطبَّق على حاويات gird. قابلة للوراثة لا قابلة للتحريك نعم القيمة المحسوبة نسبة مئوية أو طول مطلق. /* <length> القيم الطولية */ grid-row-gap: 20px; grid-row-gap: 1em; grid-row-gap: 3vmin; grid-row-gap: 0.5cm; /* <percentage> النسب المئوية */ grid-row-gap: 10%; /* القيم العامة */ grid-row-gap: inherit; grid-row-gap: initial; grid-row-gap: unset; أمثلة مثال عن استخدام grid-row-gap لإضافة فراغ فاصل بين الأسطر في حاوية grid: <div id="grid"> <div></div> <div></div> <div></div> </div> شيفرة CSS: #grid { ...

الخاصية caret-color في CSS تُحدِّد ما هو لون مؤشر الإدخال النصي (وهي الإشارة التي تظهر للإشارة إلى موضع الحرف النصي الذي سيدخله المستخدم) ضمن عنصر مثل <input> أو أي عنصر آخر له الخاصية contenteditable. الشكل الافتراضي لمؤشر الإدخال هو خطٌ رأسيٌ يومض لتسهيل ملاحظته، ويكون لونه الافتراضي هو الأسود، لكن يمكن تعديله باستخدام هذه الخاصية. بطاقة الخاصية القيمة الابتدائية auto تُطبَّق على جميع العناصر. قابلة للوراثة نعم قابلة للحركة نعم القيمة المحسوبة قيمة لونية. /* كلمات محجوزة */ caret-color: auto; caret-color: transparent; caret-color: ...

الخاصية outline-offset في CSS تضبط المسافة التي تبعد فيها حدود outline العنصر عن حافته أو إطاره border، والحدود هي الخطوط التي تُرسَم خارج إطار العنصر border. المسافة التي ستوضع بين إطار العنصر وحدوده هي مسافة ذات خلفية شفافة، أي ستُعرَض خلفية العنصر الأب فيها. بطاقة الخاصية القيمة الابتدائية 0 تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للحركة نعم القيمة المحسوبة كما حُدِّدَت، لكن مع تحويل الأطوال النسبية إلى مطلقة. /* <length> القيم الطولية */ outline-offset: 3px; outline-offset: 0.2em; /* القيم العامة */ outline-offset: ...

الخاصية max-width في CSS تضبط العرض الأقصى للعنصر، وهي تمنع القيمة المستخدمة (used value) للخاصية width من أن تتجاوز القيمة المُحدَّدة في الخاصية max-width. بطاقة الخاصية القيمة الابتدائية none تُطبَّق على جميع العناصر، ما عدا العناصر السطرية غير المُستبدَلة (non-replaced inline elements)، وأعمدة الجداول، ومجموعات الأعمدة. قابلة للوراثة لا قابلة للتحريك نعم القيمة المحسوبة نسبة مئوية أو طول مطلق أو الكلمة المحجوزة none. /* <length> أطوال */ max-width: 3.5em; /* <percentage> نسب مئوية */ max-width: 75%; /* كلمات محجوزة */ max-width: none; /* قيم عامة */ max-width: ...

الخاصية min-height في CSS تضبط الارتفاع الأدنى للعنصر، وهي تمنع القيمة المستخدمة (used value) للخاصية height من أن تقل عن القيمة المُحدَّدة في الخاصية min-height. بطاقة الخاصية القيمة الابتدائية 0 تُطبَّق على جميع العناصر، ما عدا العناصر السطرية غير المُستبدَلة (non-replaced inline elements)، وأعمدة الجداول، ومجموعات الأعمدة. قابلة للوراثة لا قابلة للتحريك نعم القيمة المحسوبة نسبة مئوية أو طول مطلق أو الكلمة المحجوزة auto. /* <length> أطوال */ min-height: 3.5em; /* <percentage> نسب مئوية */ min-height: 75%; /* كلمات محجوزة */ min-height: none; /* قيم عامة ...

الخاصية min-width في CSS تضبط العرض الأدنى للعنصر، وهي تمنع القيمة المستخدمة (used value) للخاصية width من أن تقل عن القيمة المُحدَّدة في الخاصية min-width. بطاقة الخاصية القيمة الابتدائية 0 تُطبَّق على جميع العناصر، ما عدا العناصر السطرية غير المُستبدَلة (non-replaced inline elements)، وأعمدة الجداول، ومجموعات الأعمدة. قابلة للوراثة لا قابلة للتحريك نعم القيمة المحسوبة نسبة مئوية أو طول مطلق أو الكلمة المحجوزة auto. /* <length> أطوال */ min-width: 3.5em; /* <percentage> نسب مئوية */ min-width: 75%; /* كلمات محجوزة */ min-width: none; /* قيم عامة ...

الخاصية font-stretch في CSS تختار نسخةً ضيقةً (condensed) أو عاديةً (normal) أو موسعةً (expanded) من الخط. بطاقة الخاصية القيمة الابتدائية normal تُطبَّق على جميع العناصر. قابلة للوراثة نعم قابلة للتحريك نعم القيمة المحسوبة كما حُدِّدَت. /* كلمات محجوزة */ font-stretch: ultra-condensed; font-stretch: extra-condensed; font-stretch: condensed; font-stretch: semi-condensed; font-stretch: normal; font-stretch: semi-expanded; font-stretch: expanded; font-stretch: extra-expanded; font-stretch: ultra-expanded; /* قيم عامة */ font-stretch: inherit; font-stretch: initial; font-stretch: unset; لا تؤدي هذه الخاصية إلى تغيير أبعاد الخط، وإنما هي طريقةٌ لاختيار أفضل نسخة من الخط إن كان الخط يوفِّر أكثر من نسخة. تبيين تأثير مختلف القيم ...

الخاصية text-indent في CSS تُحدِّد مقدار المسافة البادئة التي توضع قبل أسطر النص الموجودة في عنصر كتلي؛ وهذه الخاصية تتحكم بالمسافة البادئة لأوّل سطر افتراضيًا، لكن يمكن استخدام الكلمتين المحجوزتين hanging و each-line لتغيير هذا السلوك (انظر «دعم المتصفحات»). بطاقة الخاصية القيمة الابتدائية 0 تُطبَّق على العناصر الكتلية. قابلة للوراثة نعم قابلة للتحريك نعم القيمة المحسوبة كما حُدِّدت. /* <length> أطوال */ text-indent: 3mm; text-indent: 40px; /* <percentage> نسبة مئوية*/ text-indent: 15%; /* قيم عامة */ text-indent: inherit; text-indent: initial; text-indent: unset; تبدأ هذه المسافة من الحافة اليسرى لصندوق ...

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

الخاصية font-size-adjust في CSS تقول أنَّ حجم الخط يجب أن يكون مُختارًا اعتمادًا على ارتفاع الأحرف الصغيرة (lowercase) بدلًا من ارتفاع الأحرف الكبيرة؛ وهذا مُفيدٌ لأنَّ وضوح الخطوط وسهولة قراءتها -خصوصًا إذا كان حجمها صغيرًا- سيُحدَّد بحجم الأحرف ذات الحالة الصغيرة وليس الكبيرة. بطاقة الخاصية القيمة الابتدائية none تُطبَّق على جميع العناصر. قابلة للوراثة نعم قابلة للتحريك نعم القيمة المحسوبة كما حُدِّدَت. /* استخدام حجم الخط المُحدَّد */ font-size-adjust: none; /* استخدام حجم خط سيجعل الأحرف الصغيرة بنصف ارتفاع حجم الخط المُحدَّد ...

الخاصية 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> ...

الخاصية z-index في CSS تُحدِّد ترتيب العناصر التي يمكن أن يتغير مكانها (positioned elements) على المحور Z، فعندما تتداخل العناصر فستُحدِّد قيمة هذه الخاصية ما هو العنصر الذي سيظهر أعلى بقية العناصر، والعنصر الذي له قيمة z-index أكبر ما يمكن سيظهر في الأعلى. بطاقة الخاصية القيمة الابتدائية auto تُطبَّق على العناصر التي يمكن أن يتغير مكانها (positioned elements). قابلة للوراثة لا قابلة للتحريك نعم القيمة المحسوبة كما حُدِّدَت. /* كلمة محجوزة */ z-index: auto; /* <integer> قيم عددية */ z-index: 0; z-index: 3; z-index: 289; z-index: ...

الخاصية 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> ...