الفرق بين المراجعتين ل"CSS/outline-offset"

من موسوعة حسوب
< CSS
اذهب إلى التنقل اذهب إلى البحث
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}')
 
(مراجعتان متوسطتان بواسطة نفس المستخدم غير معروضتين)
سطر 1: سطر 1:
 
<noinclude>{{DISPLAYTITLE:الخاصية <code>outline-offset</code>}}</noinclude>
 
<noinclude>{{DISPLAYTITLE:الخاصية <code>outline-offset</code>}}</noinclude>
−
الخاصية <code>outline-offset</code> في CSS تضبط المسافة التي تبعد فيها حدود <code>[[CSS/outline|outline]]</code> العنصر عن حافته أو إطاره <code>[[CSS/border|border]]</code>، والحدود هي الخطوط التي تُرسَم خارج إطار العنصر <code>[[CSS/border|border]]</code>. المسافة التي ستوضع بين إطار العنصر وحدوده هي مسافة ذات خلفية شفافة، أي ستُعرَض خلفية العنصر الأب فيها.<syntaxhighlight lang="css">
+
الخاصية <code>outline-offset</code> في CSS تضبط المسافة التي تبعد فيها حدود <code>[[CSS/outline|outline]]</code> العنصر عن حافته أو إطاره <code>[[CSS/border|border]]</code>، والحدود هي الخطوط التي تُرسَم خارج إطار العنصر <code>[[CSS/border|border]]</code>. المسافة التي ستوضع بين إطار العنصر وحدوده هي مسافة ذات خلفية شفافة، أي ستُعرَض خلفية العنصر الأب فيها.
−
/* <length> القيم الطولية */
 
−
outline-offset: 3px;
 
−
outline-offset: 0.2em;
 
  
−
/* القيم العامة */
+
== بطاقة الخاصية ==
−
outline-offset: inherit;
 
−
outline-offset: initial;
 
−
outline-offset: unset;
 
−
</syntaxhighlight>
 
 
{| class="wikitable" style="width: 100%;"
 
{| class="wikitable" style="width: 100%;"
 
|-
 
|-
سطر 28: سطر 21:
  
 
|}
 
|}
 +
 +
<syntaxhighlight lang="css">
 +
/* <length> القيم الطولية */
 +
outline-offset: 3px;
 +
outline-offset: 0.2em;
 +
 +
/* القيم العامة */
 +
outline-offset: inherit;
 +
outline-offset: initial;
 +
outline-offset: unset;
 +
</syntaxhighlight>
  
 
== أمثلة ==
 
== أمثلة ==
سطر 61: سطر 65:
 
الخاصية <code>outline-offset</code> تقبل قيمةً طوليةً واحدةً.
 
الخاصية <code>outline-offset</code> تقبل قيمةً طوليةً واحدةً.
  
−
=== القيمة <code>[[CSS/length|<length>]]</code> ===
+
=== <code>[[CSS/length|<length>]]</code> ===
 
المسافة التي تفصل بين العنصر وبين حدوده، وإذا كانت هذه القيمة سالبةً فستُرسَم الحدود داخل العنصر، أما القيمة <code>0</code> فلن تؤدي إلى إضافة أيّة مسافات بين العنصر وحدوده.
 
المسافة التي تفصل بين العنصر وبين حدوده، وإذا كانت هذه القيمة سالبةً فستُرسَم الحدود داخل العنصر، أما القيمة <code>0</code> فلن تؤدي إلى إضافة أيّة مسافات بين العنصر وحدوده.
 
=== البنية الرسمية ===
 
=== البنية الرسمية ===
سطر 68: سطر 72:
  
 
</syntaxhighlight>
 
</syntaxhighlight>
 +
== انظر أيضًا ==
 +
* صفحة الخاصية <code>[[CSS/outline|outline]]</code> وصفحة الخاصيات الفرعية التي تضبطها هذه الخاصية وهي  <code>[[CSS/outline-style|outline-style]]</code> و <code>[[CSS/outline-width|outline-width]]</code> و <code>[[CSS/outline-color|outline-color]]</code>.
 +
* صفحة الخاصية <code>[[CSS/border|border]]</code> التي تؤدي إلى ضبط قيم الخاصيات التي تتحكم بإطار العنصر في آنٍ واحد.
 +
* صفحة الخاصيات التي تضبطها الخاصية المختصرة <code>[[CSS/border|border]]</code> وهي: <code>[[CSS/border-width|border-width]]</code> و <code>[[CSS/border-style|border-style]]</code> و <code>[[CSS/border-color|border-color]]</code>.
 +
 
== مصادر ومواصفات ==
 
== مصادر ومواصفات ==
 
* مواصفة [https://drafts.csswg.org/css-ui-3/#outline-offset CSS Basic User Interface Module Level 3].  
 
* مواصفة [https://drafts.csswg.org/css-ui-3/#outline-offset CSS Basic User Interface Module Level 3].  

المراجعة الحالية بتاريخ 03:38، 15 سبتمبر 2018

الخاصية outline-offset في CSS تضبط المسافة التي تبعد فيها حدود outline العنصر عن حافته أو إطاره border، والحدود هي الخطوط التي تُرسَم خارج إطار العنصر border. المسافة التي ستوضع بين إطار العنصر وحدوده هي مسافة ذات خلفية شفافة، أي ستُعرَض خلفية العنصر الأب فيها.

بطاقة الخاصية

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

/* القيم العامة */
outline-offset: inherit;
outline-offset: initial;
outline-offset: unset;

أمثلة

سنترك -في المثال الآتي- مسافة وقدرها 10px بين العنصر وحدوده، باستخدام الخاصية outline-offset:

<p>حدود هذا العنصر ستبعد عنه مسافة 10 بكسل.</p>

وضعنا خلفيةً وإطارًا للعنصر لكي نعرف أين ينتهي صندوق العنصر:

p {
  outline: 1px dashed salmon;
  outline-offset: 10px;
  background-color: lightgray;
  border: 1px solid #069;
  margin: 15px;
}

دعم المتصفحات

الميزة Chrome Firefox Internet Explorer Opera Safari
الدعم الأساسي 1.0 1.5 غير مدعومة 9.5 1.2

البنية العامة

الخاصية outline-offset تقبل قيمةً طوليةً واحدةً.

<length>

المسافة التي تفصل بين العنصر وبين حدوده، وإذا كانت هذه القيمة سالبةً فستُرسَم الحدود داخل العنصر، أما القيمة 0 فلن تؤدي إلى إضافة أيّة مسافات بين العنصر وحدوده.

البنية الرسمية

outline-offset: <length>;

انظر أيضًا

  • صفحة الخاصية outline وصفحة الخاصيات الفرعية التي تضبطها هذه الخاصية وهي  outline-style و outline-width و outline-color.
  • صفحة الخاصية border التي تؤدي إلى ضبط قيم الخاصيات التي تتحكم بإطار العنصر في آنٍ واحد.
  • صفحة الخاصيات التي تضبطها الخاصية المختصرة border وهي: border-width و border-style و border-color.

مصادر ومواصفات

مجلوبة من "https://wiki.hsoub.com/index.php?title=CSS/outline-offset&oldid=18063"