الفرق بين المراجعتين لصفحة: «CSS/outline-style»
< CSS
لا ملخص تعديل |
لا ملخص تعديل |
||
| (4 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>outline-style</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>outline-style</code>}}</noinclude> | ||
الخاصية <code>outline-style</code> في CSS تضبط شكل حدود <code>[[CSS/outline|outline]]</code> العنصر، التي هي الخطوط التي تُرسَم خارج إطار العنصر <code>[[CSS/border|border]]</code>. من المستحسن استخدام الخاصية المختصرة <code>[[CSS/outline|outline]]</code> عند ضبط مظهر حدود العنصر، لأنها تضبط عدِّة خاصيات في آنٍ واحد. | الخاصية <code>outline-style</code> في CSS تضبط شكل حدود <code>[[CSS/outline|outline]]</code> العنصر، التي هي الخطوط التي تُرسَم خارج إطار العنصر <code>[[CSS/border|border]]</code>. من المستحسن استخدام الخاصية المختصرة <code>[[CSS/outline|outline]]</code> عند ضبط مظهر حدود العنصر، لأنها تضبط عدِّة خاصيات في آنٍ واحد. | ||
== بطاقة الخاصية == | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
| سطر 36: | سطر 21: | ||
|} | |} | ||
<syntaxhighlight lang="css"> | |||
/* الكلمات المحجوزة */ | |||
outline-style: auto; | |||
outline-style: none; | |||
outline-style: dotted; | |||
outline-style: dashed; | |||
outline-style: solid; | |||
outline-style: double; | |||
outline-style: groove; | |||
outline-style: ridge; | |||
outline-style: inset; | |||
outline-style: outset; | |||
/* القيم العامة */ | |||
outline-style: inherit; | |||
outline-style: initial; | |||
outline-style: unset; | |||
</syntaxhighlight> | |||
== أمثلة == | == أمثلة == | ||
| سطر 100: | سطر 104: | ||
الخاصية <code>outline-style</code> تقبل قيمةً واحدةً من القيم التالية. | الخاصية <code>outline-style</code> تقبل قيمةً واحدةً من القيم التالية. | ||
=== | === <code>none</code> === | ||
لن تُعرَض حدودٌ للعنصر، أي كما لو كانت | لن تُعرَض حدودٌ للعنصر، أي كما لو كانت الخاصية <code>[[CSS/outline-width|outline-width]]</code> هي <code>0</code>. | ||
=== | === <code>dotted</code> === | ||
حدود العنصر ستكون على شكل سلسلة من النقط. | حدود العنصر ستكون على شكل سلسلة من النقط. | ||
=== | === <code>dashed</code> === | ||
حدود العنصر ستكون على شكل سلسلة من الشرطات <code>-</code>. | حدود العنصر ستكون على شكل سلسلة من الشرطات <code>-</code>. | ||
=== | === <code>solid</code> === | ||
حدود العنصر ستكون خطًا مليئًا. | حدود العنصر ستكون خطًا مليئًا. | ||
=== | === <code>double</code> === | ||
حدود العنصر ستكون على شكل خطين متوازيين، وتكون | حدود العنصر ستكون على شكل خطين متوازيين، وتكون الخاصية <code>[[CSS/outline-width|outline-width]]</code> هي مجموع ثخن هذين الخطين مع الفراغ بينهما. | ||
=== | === <code>groove</code> === | ||
عرض حدود العنصر كأنها منحوتة أو منقوشة، | عرض حدود العنصر كأنها منحوتة أو منقوشة، وهي على عكس <code>ridge</code>. | ||
=== | === <code>ridge</code> === | ||
عرض حدود العنصر كأنها منبثقة، | عرض حدود العنصر كأنها منبثقة، وهي على عكس <code>groove</code>. | ||
=== | === <code>inset</code> === | ||
عرض الحدود بطريقة تجعل العنصر يبدو وكأنه مُضمّن في مكانه، وهي على عكس | عرض الحدود بطريقة تجعل العنصر يبدو وكأنه مُضمّن في مكانه، وهي على عكس <code>outset</code>. | ||
=== | === <code>outset</code> === | ||
عرض الحدود بطريقة تجعل العنصر يبدو وكأنه بارز عن مكانه، وهي على عكس | عرض الحدود بطريقة تجعل العنصر يبدو وكأنه بارز عن مكانه، وهي على عكس <code>inset</code>. | ||
=== البنية الرسمية === | === البنية الرسمية === | ||
| سطر 128: | سطر 132: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== مصادر ومواصفات == | == انظر أيضًا == | ||
*صفحة الخاصية <code>[[CSS/outline|outline]]</code> وصفحة الخاصيات الفرعية التي تضبطها هذه الخاصية وهي <code>[[CSS/outline-color|outline-color]]</code> و <code>[[CSS/outline-width|outline-width]]</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>. | |||
==مصادر ومواصفات== | |||
* مواصفة [https://drafts.csswg.org/css-ui-3/#outline-style CSS Basic User Interface Module Level 3]. | * مواصفة [https://drafts.csswg.org/css-ui-3/#outline-style CSS Basic User Interface Module Level 3]. | ||
* مواصفة [http://www.w3.org/TR/CSS2/ui.html#propdef-outline-style CSS Level 2 (Revision 1)]. | * مواصفة [http://www.w3.org/TR/CSS2/ui.html#propdef-outline-style CSS Level 2 (Revision 1)]. | ||
[[تصنيف:CSS]] | [[تصنيف:CSS|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Property]] | [[تصنيف:CSS Property|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS User Interface]] | [[تصنيف:CSS User Interface|{{SUBPAGENAME}}]] | ||
المراجعة الحالية بتاريخ 03:39، 15 سبتمبر 2018
الخاصية outline-style في CSS تضبط شكل حدود outline العنصر، التي هي الخطوط التي تُرسَم خارج إطار العنصر border. من المستحسن استخدام الخاصية المختصرة outline عند ضبط مظهر حدود العنصر، لأنها تضبط عدِّة خاصيات في آنٍ واحد.
بطاقة الخاصية
| القيمة الابتدائية | none
|
|---|---|
| تُطبَّق على | جميع العناصر. |
| قابلة للوراثة | لا |
| قابلة للحركة | لا |
| القيمة المحسوبة | كما حُدِّدَت. |
/* الكلمات المحجوزة */
outline-style: auto;
outline-style: none;
outline-style: dotted;
outline-style: dashed;
outline-style: solid;
outline-style: double;
outline-style: groove;
outline-style: ridge;
outline-style: inset;
outline-style: outset;
/* القيم العامة */
outline-style: inherit;
outline-style: initial;
outline-style: unset;
أمثلة
سنستعرض مختلف الأشكال التي تدعمها الخاصية outline-style في المثال الآتي:
<p class="thin">outline-style: none;</p>
<p class="dotted">outline-style: dotted;</p>
<p class="dashed">outline-style: dashed;</p>
<p class="solid">outline-style: solid;</p>
<p class="double">outline-style: double;</p>
<p class="groove">outline-style: groove;</p>
<p class="ridge">outline-style: ridge;</p>
<p class="inset">outline-style: inset;</p>
<p class="outset">outline-style: outset;</p>
شيفرة CSS:
p {
outline-width: 10px;
outline-color: red;
margin: 2em;
padding: 1em;
}
.thin { outline-style: none; }
.dotted { outline-style: dotted; }
.dashed { outline-style: dashed; }
.solid { outline-style: solid; }
.double { outline-style: double; }
.groove { outline-style: groove; }
.ridge { outline-style: ridge; }
.inset { outline-style: inset; }
.outset { outline-style: outset; }
مثال عن استخدام عنصرين داخل بعضها لهما حدود:
<div>
<div class="dotted">
<p class="dashed">Outline Demo</p>
</div>
</div>
لاحظ أنَّنا سنضيف بعض الحاشية وسنزيد من عرض الحدود لتوضيحها:
.dotted {
outline-style: dotted;
}
.dashed {
outline-style: dashed;
}
* { outline-width: 10px; padding: 15px; }
دعم المتصفحات
| الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| الدعم الأساسي | 1.0 | 1.5 | 8.0 | 7.0 | 1.2 |
البنية العامة
الخاصية outline-style تقبل قيمةً واحدةً من القيم التالية.
none
لن تُعرَض حدودٌ للعنصر، أي كما لو كانت الخاصية outline-width هي 0.
dotted
حدود العنصر ستكون على شكل سلسلة من النقط.
dashed
حدود العنصر ستكون على شكل سلسلة من الشرطات -.
solid
حدود العنصر ستكون خطًا مليئًا.
double
حدود العنصر ستكون على شكل خطين متوازيين، وتكون الخاصية outline-width هي مجموع ثخن هذين الخطين مع الفراغ بينهما.
groove
عرض حدود العنصر كأنها منحوتة أو منقوشة، وهي على عكس ridge.
ridge
عرض حدود العنصر كأنها منبثقة، وهي على عكس groove.
inset
عرض الحدود بطريقة تجعل العنصر يبدو وكأنه مُضمّن في مكانه، وهي على عكس outset.
outset
عرض الحدود بطريقة تجعل العنصر يبدو وكأنه بارز عن مكانه، وهي على عكس inset.
البنية الرسمية
outline-style: auto | <br-style>;
حيث:
<br-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
انظر أيضًا
- صفحة الخاصية
outlineوصفحة الخاصيات الفرعية التي تضبطها هذه الخاصية وهيoutline-colorوoutline-widthوoutline-offset. - صفحة الخاصية
borderالتي تؤدي إلى ضبط قيم الخاصيات التي تتحكم بإطار العنصر في آنٍ واحد. - صفحة الخاصيات التي تضبطها الخاصية المختصرة
borderوهي:border-widthوborder-styleوborder-color.
مصادر ومواصفات
- مواصفة CSS Basic User Interface Module Level 3.
- مواصفة CSS Level 2 (Revision 1).