نتائج البحث

الخاصية font في CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات font-style و font-variant و font-weight و font-size و line-height و font-family، وذلك لتحديد الخط المستخدم في العنصر. /* size | family */ font: 2em "Open Sans", sans-serif; /* style | size | family */ font: italic 2em "Open Sans", sans-serif; /* style | variant | weight | size/line-height | family */ font: italic small-caps bolder 16px/3 cursive; /* style | variant | weight | stretch | size/line-height | family */ font: italic small-caps bolder condensed ...

خاصية color في CSS تضبط القيمة اللونية للأمامية (foreground) للمحتوى النصي للعنصر وللزخرفة النصية (text decorations)، وستضبط أيضًا قيمة الكلمة المحجوزة currentColor، والتي يمكن أن تستخدم كقيمة غير مباشرة في الخاصيات الأخرى التي لا تأخذ لونها من الخاصية color مباشرةً (مثل الخاصية border-color). p { color: red; } بطاقة الخاصية القيمة الابتدائية تختلف من متصفحٍ لآخر. تُطبَّق على جميع العناصر. قابلة للوراثة نعم قابلة للحركة نعم القيمة المحسوبة إذا كانت القيمة نصف شفافة، فستكون القيمة المحسوبة تكافئ الدالة rgba()‎، وإن ...

الخاصية columns في CSS هي خاصية مختصرة تسمح لنا بضبط قيمة الخاصيتين column-width و column-count في آنٍ واحد. بطاقة الخاصية القيمة الابتدائية لكل خاصية مختصرة: column-width: auto column-count: auto تُطبَّق على جميع الحاويات الكتلية (block containers) عدا حاويات الجداول. قابلة للوراثة لا قابلة للتحريك نعم القيمة المحسوبة لكل خاصية مختصرة: column-width: طول مطلق أكبر من الصفر. column-count: كما حُدِّدَت. /* column-width */ columns: 1em; /* column-count */ columns: auto; columns: 1; /* column-width و column-count */ columns: 1 auto; columns: auto 12em; columns: auto auto; /* القيم العامة */ columns: inherit; columns: initial; columns: unset; أمثلة ...

الخاصية clear في CSS تُحدِّد إذا كان العنصر يمكن أن يكون بجوار العناصر العائمة (floating elements) المجاورة له أو يجب أن يُحرَّك إلى الأسفل (يسمى هذا الفعل بالمصطلح clear)؛ يمكن تطبيق هذه الخاصية على العناصر العائمة وغير العائمة على حدٍ سواء. بطاقة الخاصية القيمة الابتدائية none تُطبَّق على العناصر الكتلية (block-level elements). قابلة للوراثة لا قابلة للتحريك لا القيمة المحسوبة كما حُدِّدَت. /* الكلمات المحجوزة */ clear: none; clear: left; clear: right; clear: both; clear: inline-start; clear: inline-end; /* القيم العامة */ clear: inherit; clear: initial; clear: unset; عند تطبيق هذه ...

الخاصية left في CSS تساهم في تحديد الموضع الأفقي لأحد العناصر التي يمكن أن يتغير مكانها (positioned elements)، وليس لهذه الخاصية تأثير في العناصر التي لا يمكن أن يتغير مكانها (non-positioned elements). بطاقة الخاصية القيمة الابتدائية auto تُطبَّق على العناصر التي يمكن أن يتغير مكانها (positioned elements). قابلة للوراثة لا قابلة للتحريك نعم القيمة المحسوبة كما حُدِّدَت، لكن مع تحويل الأطوال النسبية إلى مطلقة. /* <length> قيم */ left: 3px; left: 2.4em; /* <percentages> قيم نسبية */ /* تؤخذ نسبةً إلى عرض الكتلة الحاوية ...

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

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

الخاصية content في CSS تُستخدَم مع العنصرين الزائفين ‎::before و ‎::after لتوليد محتوى في العنصر. بطاقة الخاصية القيمة الابتدائية normal تُطبَّق على العنصرين الزائفين ‎::before و ‎::after. قابلة للوراثة لا قابلة للحركة لا القيمة المحسوبة ستكون القيمة هي normal دومًا إذا طُبِّقت هذه الخاصية على العناصر العادية. وإذا كانت القيمة normal وطُبِّقَت على العنصرين الزائفين ‎::before و ‎::after فستكون القيمة المحسوبة هي none. إذا استخدمنا روابط URL النسبية فستحوِّل إلى روابط مطلقة. إذا استخدمنا الدالة attr(x)‎ فستحوِّل القيمة إلى سلسلة نصية. ...

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

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

الخاصية cursor في CSS تُحدِّد ما هو شكل مؤشر الفأرة الذي سيُعرَض عندما تمر الفأرة فوق العنصر. بطاقة الخاصية القيمة الابتدائية auto تُطبَّق على جميع العناصر. قابلة للوراثة نعم قابلة للحركة لا القيمة المحسوبة كما حُدِّدَت، لكن مع تحويل روابط URL النسبية إلى مطلقة. /* كلمات محجوزة */ cursor: pointer; cursor: auto; /* استخدام رابط للأيقونة مع إحداثيات */ cursor: url(cursor1.png) 4 12, auto; cursor: url(cursor2.png) 2 2, pointer; /* القيم العامة */ cursor: inherit; cursor: initial; cursor: unset; أمثلة مثال عن استخدام مختلف القيم مع الخاصية cursor: <div ...

الخاصية order في CSS تُحدِّد ترتيب عناصر flex في الحاوية، إذ ستُرتَّب العناصر ترتيبًا تصاعديًا اعتمادًا على قيمة الخاصية order المُسندَة إليها، والعناصر التي لها نفس القيمة ستُرتَّب وفق ورودها في الشيفرة المصدرية. بطاقة الخاصية القيمة الابتدائية 0 تُطبَّق على حاويات flex. قابلة للوراثة لا قابلة للتحريك نعم القيمة المحسوبة كما حُدِّدَت. /* القيم العددية، بما في ذلك الأعداد السالبة */ order: 5; order: -5; /* القيم العامة */ order: inherit; order: initial; order: unset; ملاحظة: الغرض من الخاصية order هو التأثير على الترتيب المرئي للعناصر، ...

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

الخاصية quotes في CSS تُشير إلى الطريقة التي يجب أن يعرض فيها المتصفح علامات الاقتباس. بطاقة الخاصية القيمة الابتدائية تختلف حسب المتصفح. تُطبَّق على جميع العناصر. قابلة للوراثة نعم قابلة للحركة لا القيمة المحسوبة كما حُدِّدَت. /* كلمة محجوزة */ quotes: none; /* <string> سلاسل نصية */ quotes: "«" "»"; /* ضبط علامة الاقتباس الابتدائية والنهائية */ quotes: "«" "»" "‹" "›"; /* ضبط مستويين من الاقتباس */ /* القيم العامة */ quotes: inherit; quotes: ...

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

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

مُحدِّد الخاصيات (attribute selector) في CSS يُطابِق العناصر إذ وجدت فيها خاصيةٌ ما أو كانت تلك الخاصية تملك قيمةً معيّنةً. المُحدِّد الآتي يُطابِق جميع عناصر <a> (بغض النظر عن قيمة هذه الخاصية): a[title] { color: purple; } المُحدِّد الآتي يُطابِق جميع عناصر <a> التي تكون قيمة الخاصية href فيها تساوي https://example.org: a[href="https://example.org"] { color: green; } المُحدِّد الآتي يُطابِق جميع عناصر <a> التي تحتوي قيمة الخاصية href فيها السلسلة النصية example: a[href*="example"] { font-size: 2em; } المُحدِّد الآتي يُطابِق جميع عناصر <a> ...

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

الخاصية bottom في CSS تساهم في تحديد الموضع الرأسي لأحد العناصر التي يمكن أن يتغير مكانها (positioned elements)، وليس لهذه الخاصية تأثير في العناصر التي لا يمكن أن يتغير مكانها (non-positioned elements). بطاقة الخاصية القيمة الابتدائية auto تُطبَّق على العناصر التي يمكن أن يتغير مكانها (positioned elements). قابلة للوراثة لا قابلة للتحريك نعم القيمة المحسوبة كما حُدِّدَت، لكن مع تحويل الأطوال النسبية إلى مطلقة. /* <length> قيم */ bottom: 3px; bottom: 2.4em; /* <percentages> قيم نسبية */ /* تؤخذ نسبةً إلى ارتفاع الكتلة الحاوية ...

الخاصية transform في CSS تسمح لنا بتحويل شكل العناصر في الفضاء ثنائي أو ثلاثي الأبعاد، وبالتالي يمكن نقل العنصر أو تدويره أو إعادة تحجيمه أو جعله منحرفًا. بطاقة الخاصية القيمة الابتدائية none تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للتحريك نعم القيمة المحسوبة كما حُدِّدَت. /* كلمة محجوزة */ transform: none; /* دالة */ transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0); transform: translate(12px, 50%); transform: translateX(2em); transform: translateY(3in); transform: scale(2, 0.5); transform: scaleX(2); transform: scaleY(0.5); transform: rotate(0.5turn); transform: skew(30deg, 20deg); transform: skewX(30deg); transform: skewY(1.07rad); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, ...