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

مراجعة 16:12، 29 أغسطس 2018

الخاصية outline في CSS هي خاصية مختصرة تُستخدَم لضبط خاصية أو أكثر من الخاصيات outline-style و outline-width و outline-color في آنٍ واحد.

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

القيمة الابتدائية	لكل خاصية مختصرة: `outline-color`: `currentColor` `outline-style`: `none` `outline-width`: `medium`
تُطبَّق على	جميع العناصر.
قابلة للوراثة	لا
قابلة للحركة	نعم
القيمة المحسوبة	لكل خاصية مختصرة: `outline-color`: قيمة لونية `outline-style`: كما حُدِّدَت. `outline-width`: طول مطلق، إلا إذا حُدِّدَت الكلمة المحجوزة `none` فستكون القيمة المحسوبة `0`.

/* width | style | color */
outline: 1px solid white;

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

حدود العنصر (outline) هي الخطوط المرسومة خارج إطار العنصر لجعله بارزًا في الصفحة، وتُستعمَل عادةً لأغراض لها علاقة بقابلية الوصول، أو لأغراض تزيينية.

الحدود شبيهة بالإطار border في أنها تُرسَم حوال العنصر، ولها نفس الأشكال التي تتوافر للإطارات، لكنها تختلف عنها فيما يلي:

لا تأخذ حدود العنصر مساحةً إضافيةً، فهي ليست جزءًا من النموذج الصندوقي (box model) وبالتالي لن تُساهم أو تؤثِّر على أبعاد العنصر، وهذا يعني أنَّ إضافة الحدود أو إزالتها من عنصر لن تؤثر على موضعه في الصفحة أو موضع بقية العناصر التي بجواره.
ستُرسَم الحدود على الأطراف الأربعة للعنصر، ولا يمكننا تحديد الأطراف التي نريد رسم الحدود عليها.
لا يمكن تطبيق حواف مدورة على الحدود، كما نفعل مع الإطارات عبر الخاصية border-radius.
قد تكون الحدود غير مستطيلة الشكل، وذلك إن كانت بعض أجزاء العنصر بخطٍ ذي حجمٍ أكبر من غيرها، ولا يُطبَّق ذلك إلا في بعض المتصفحات مثل الإصدارات القديمة من متصفح Opera.

أمثلة

مثال عن قاعدتين متماثلتين للخاصية outline:

:link:hover { outline: 1px solid #000; }
:link:hover { outline: solid black 1px; }

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

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

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

الخاصية outline تقبل قيمةً واحدةً أو قيمتين أو ثلاث قيم من القيم التالية، لاحظ أنَّ ترتيب القيم غير مهم.

`<outline-width>`

ضبط عرض حدود العنصر، راجع صفحة العنصر outline-width لمزيدٍ من المعلومات.

`<outline-style>`

ضبط شكل حدود العنصر، راجع صفحة العنصر outline-style لمزيدٍ من المعلومات.

`<outline-color>`

ضبط لون حدود العنصر، راجع صفحة العنصر outline-color لمزيدٍ من المعلومات.

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

outline: [ <'outline-color'> || <'outline-style'> || <'outline-width'> ];

يمكن أن ترد القيم بأي ترتيبٍ تشاء.

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

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

@@ سطر 1: / سطر 1: @@
 <noinclude>{{DISPLAYTITLE:الخاصية <code>outline</code>}}</noinclude>
-الخاصية <code>outline</code> في CSS هي خاصية مختصرة تُستخدَم لضبط خاصية أو أكثر من الخاصيات <code>[[CSS/outline-style|outline-style]]</code> و <code>[[CSS/outline-width|outline-width]]</code> و <code>[[CSS/outline-color|outline-color]]</code> في آنٍ واحد.<syntaxhighlight lang="css">
+الخاصية <code>outline</code> في CSS هي خاصية مختصرة تُستخدَم لضبط خاصية أو أكثر من الخاصيات <code>[[CSS/outline-style|outline-style]]</code> و <code>[[CSS/outline-width|outline-width]]</code> و <code>[[CSS/outline-color|outline-color]]</code> في آنٍ واحد.
-/* width | style | color */
-outline: 1px solid white;
-/* القيم العامة */
-outline: inherit;
-outline: initial;
-outline: unset;
-</syntaxhighlight>حدود العنصر (outline) هي الخطوط المرسومة خارج إطار العنصر لجعله بارزًا في الصفحة، وتُستعمَل عادةً لأغراض لها علاقة بقابلية الوصول، أو لأغراض تزيينية.
-الحدود شبيهة بالإطار <code>[[CSS/border|border]]</code> في أنها تُرسَم حوال العنصر، ولها نفس الأشكال التي تتوافر للإطارات، لكنها تختلف عنها فيما يلي:
+== بطاقة الخاصية ==
-* لا تأخذ حدود العنصر مساحةً إضافيةً، فهي ليست جزءًا من النموذج الصندوقي (box model) وبالتالي لن تُساهم أو تؤثِّر على أبعاد العنصر، وهذا يعني أنَّ إضافة الحدود أو إزالتها من عنصر لن تؤثر على موضعه في الصفحة أو موضع بقية العناصر التي بجواره.
-* ستُرسَم الحدود على الأطراف الأربعة للعنصر، ولا يمكننا تحديد الأطراف التي نريد رسم الحدود عليها.
-* لا يمكن تطبيق حواف مدورة على الحدود، كما نفعل مع الإطارات عبر الخاصية <code>[[CSS/border-radius|border-radius]]</code>.
-* قد تكون الحدود غير مستطيلة الشكل، وذلك إن كانت بعض أجزاء العنصر بخطٍ ذي حجمٍ أكبر من غيرها، ولا يُطبَّق ذلك إلا في بعض المتصفحات مثل الإصدارات القديمة من متصفح Opera.
 {| class="wikitable" style="width: 100%;"
 |-
@@ سطر 39: / سطر 27: @@
 |}
+<syntaxhighlight lang="css">
+/* width | style | color */
+outline: 1px solid white;
+/* القيم العامة */
+outline: inherit;
+outline: initial;
+outline: unset;
+</syntaxhighlight>حدود العنصر (outline) هي الخطوط المرسومة خارج إطار العنصر لجعله بارزًا في الصفحة، وتُستعمَل عادةً لأغراض لها علاقة بقابلية الوصول، أو لأغراض تزيينية.
+الحدود شبيهة بالإطار <code>[[CSS/border|border]]</code> في أنها تُرسَم حوال العنصر، ولها نفس الأشكال التي تتوافر للإطارات، لكنها تختلف عنها فيما يلي:
+* لا تأخذ حدود العنصر مساحةً إضافيةً، فهي ليست جزءًا من النموذج الصندوقي (box model) وبالتالي لن تُساهم أو تؤثِّر على أبعاد العنصر، وهذا يعني أنَّ إضافة الحدود أو إزالتها من عنصر لن تؤثر على موضعه في الصفحة أو موضع بقية العناصر التي بجواره.
+* ستُرسَم الحدود على الأطراف الأربعة للعنصر، ولا يمكننا تحديد الأطراف التي نريد رسم الحدود عليها.
+* لا يمكن تطبيق حواف مدورة على الحدود، كما نفعل مع الإطارات عبر الخاصية <code>[[CSS/border-radius|border-radius]]</code>.
+* قد تكون الحدود غير مستطيلة الشكل، وذلك إن كانت بعض أجزاء العنصر بخطٍ ذي حجمٍ أكبر من غيرها، ولا يُطبَّق ذلك إلا في بعض المتصفحات مثل الإصدارات القديمة من متصفح Opera.
 == أمثلة ==
@@ سطر 64: / سطر 68: @@
 الخاصية <code>outline</code> تقبل قيمةً واحدةً أو قيمتين أو ثلاث قيم من القيم التالية، لاحظ أنَّ ترتيب القيم غير مهم.
-=== القيمة <code><outline-width></code> ===
+===  <code><outline-width></code> ===
 ضبط عرض حدود العنصر، راجع صفحة العنصر <code>[[CSS/outline-width|outline-width]]</code> لمزيدٍ من المعلومات.
-=== القيمة <code><outline-style></code> ===
+===  <code><outline-style></code> ===
 ضبط شكل حدود العنصر، راجع صفحة العنصر <code>[[CSS/outline-style|outline-style]]</code> لمزيدٍ من المعلومات.
-=== القيمة <code><outline-color></code> ===
+===  <code><outline-color></code> ===
 ضبط لون حدود العنصر، راجع صفحة العنصر <code>[[CSS/outline-color|outline-color]]</code> لمزيدٍ من المعلومات.
 === البنية الرسمية ===