الفرق بين المراجعتين لصفحة: «CSS/outline-width»

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

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

/* القيم العامة */
outline-width: inherit;

أمثلة

سنستعرض في المثال الآتي جميع القيم التي تقبلها الخاصية outline-width:

<span id="thin">thin</span>
<span id="medium">medium</span>
<span id="thick">thick</span>
<span id="twopixels">2px</span>
<span id="oneex">1ex</span>
<span id="em">1.2em</span>

شيفرة CSS:

span {
  outline-style: solid;
  display: inline-block;
  margin: 20px;
}

#thin      { outline-width: thin; }
#medium    { outline-width: medium; }
#thick     { outline-width: thick; }
#twopixels { outline-width: 2px; }
#oneex     { outline-width: 1ex; }
#em        { outline-width: 1.2em; }

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

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	1.0	1.5	8.0	7.0	1.2

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

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

`thin`

سيكون عرض الحدود رفيعًا، وتختلف هذه القيمة بين المتصفحات لكنها تساوي عادةً 1px.

`medium`

سيكون عرض الحدود متوسطًا، وتختلف هذه القيمة بين المتصفحات لكنها تساوي عادةً 3px.

`thick`

سيكون عرض الحدود ثخينًا، وتختلف هذه القيمة بين المتصفحات لكنها تساوي عادةً 5px.

`<length>`

سيكون عرض الحدود مُحدَّدًا عبر <length>.

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

outline-width: <br-width>;

حيث:

<br-width> = <length> | thin | medium | thick

انظر أيضًا

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

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

مواصفة CSS Basic User Interface Module Level 3.
مسودة CSS Transitions.
مواصفة ‎CSS Level 2 (Revision 1)‎.

@@ سطر 1: / سطر 1: @@
 <noinclude>{{DISPLAYTITLE:الخاصية <code>outline-width</code>}}</noinclude>
-الخاصية <code>outline-width</code> في CSS تضبط عرض (أو ثخن) حدود <code>[[CSS/outline|outline]]</code> العنصر، التي هي الخطوط التي تُرسَم خارج إطار العنصر <code>[[CSS/border|border]]</code>. من المستحسن استخدام الخاصية المختصرة <code>[[CSS/outline|outline]]</code> عند ضبط مظهر حدود العنصر، لأنها تضبط عدِّة خاصيات في آنٍ واحد.<syntaxhighlight lang="css">
+الخاصية <code>outline-width</code> في CSS تضبط عرض (أو ثخن) حدود <code>[[CSS/outline|outline]]</code> العنصر، التي هي الخطوط التي تُرسَم خارج إطار العنصر <code>[[CSS/border|border]]</code>. من المستحسن استخدام الخاصية المختصرة <code>[[CSS/outline|outline]]</code> عند ضبط مظهر حدود العنصر، لأنها تضبط عدِّة خاصيات في آنٍ واحد.
-/* الكلمات المحجوزة */
-outline-width: thin;
-outline-width: medium;
-outline-width: thick;
-/* <length> القيم الطولية */
+== بطاقة الخاصية ==
-outline-width: 1px;
-outline-width: 0.1em;
-/* القيم العامة */
-outline-width: inherit;
-</syntaxhighlight>
 {| class="wikitable" style="width: 100%;"
 |-
@@ سطر 31: / سطر 21: @@
 |}
+<syntaxhighlight lang="css">
+/* الكلمات المحجوزة */
+outline-width: thin;
+outline-width: medium;
+outline-width: thick;
+/* <length> القيم الطولية */
+outline-width: 1px;
+outline-width: 0.1em;
+/* القيم العامة */
+outline-width: inherit;
+</syntaxhighlight>
 == أمثلة ==
@@ سطر 73: / سطر 77: @@
 الخاصية <code>outline-width</code> تقبل قيمةً واحدةً من القيم التالية.
-=== القيمة <code>thin</code> ===
+===  <code>thin</code> ===
 سيكون عرض الحدود رفيعًا، وتختلف هذه القيمة بين المتصفحات لكنها تساوي عادةً <code>1px</code>.
-=== القيمة <code>medium</code> ===
+===  <code>medium</code> ===
 سيكون عرض الحدود متوسطًا، وتختلف هذه القيمة بين المتصفحات لكنها تساوي عادةً <code>3px</code>.
-=== القيمة <code>thick</code> ===
+===  <code>thick</code> ===
 سيكون عرض الحدود ثخينًا، وتختلف هذه القيمة بين المتصفحات لكنها تساوي عادةً <code>5px</code>.
-=== القيمة <code>[[CSS/length|<length>]]</code> ===
+===  <code>[[CSS/length|<length>]]</code> ===
-سيكون عرض الحدود مُحدَّدًا عبر قيمةٍ طولية <code>[[CSS/length|<length>]]</code>.
+سيكون عرض الحدود مُحدَّدًا عبر  <code>[[CSS/length|<length>]]</code>.
 === البنية الرسمية ===
 <syntaxhighlight lang="css">
@@ سطر 88: / سطر 92: @@
 <br-width> = <length> | thin | medium | thick
 </syntaxhighlight>
+==  انظر أيضًا ==
+* صفحة الخاصية <code>[[CSS/outline|outline]]</code> وصفحة الخاصيات الفرعية التي تضبطها هذه الخاصية وهي  <code>[[CSS/outline-color|outline-color]]</code> و <code>[[CSS/outline-style|outline-style]]</code> و <code>[[CSS/outline-offset|outline-offset]]</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>.
 == مصادر ومواصفات ==