الفرق بين المراجعتين ل"CSS/border-top-style"
< CSS
اذهب إلى التنقل
اذهب إلى البحث
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}') |
(إضافة قسمين) |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>border-top-style</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>border-top-style</code>}}</noinclude> | ||
| − | الخاصية <code>border-top-style</code> في CSS تُحدِّد شكل خط الإطار العلوي الخاص بالعنصر. | + | الخاصية <code>border-top-style</code> في CSS تُحدِّد شكل خط الإطار العلوي الخاص بالعنصر. |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | == بطاقة الخاصية == | |
| − | |||
| − | |||
| − | |||
| − | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
| سطر 35: | سطر 20: | ||
|كما حُدِّدَت. | |كما حُدِّدَت. | ||
| − | |} | + | |}<syntaxhighlight lang="css"> |
| + | /* الكلمات المحجوزة */ | ||
| + | border-top-style: none; | ||
| + | border-top-style: hidden; | ||
| + | border-top-style: dotted; | ||
| + | border-top-style: dashed; | ||
| + | border-top-style: solid; | ||
| + | border-top-style: double; | ||
| + | border-top-style: groove; | ||
| + | border-top-style: ridge; | ||
| + | border-top-style: inset; | ||
| + | border-top-style: outset; | ||
| + | /* القيم العامة */ | ||
| + | border-top-style: inherit; | ||
| + | border-top-style: initial; | ||
| + | border-top-style: unset; | ||
| + | </syntaxhighlight>ملاحظة: لا تُعرِّف المواصفة كيف ستلتقي الإطارات التي لها أشكال مختلفة في الزوايا. | ||
== أمثلة == | == أمثلة == | ||
هذا مثال عن جدول <code>[[HTML/table|<nowiki><table></nowiki>]]</code> يُبيّن مختلف أشكال الإطارات عبر الخاصية <code>border-top-style</code>. شيفرة HTML:<syntaxhighlight lang="html"> | هذا مثال عن جدول <code>[[HTML/table|<nowiki><table></nowiki>]]</code> يُبيّن مختلف أشكال الإطارات عبر الخاصية <code>border-top-style</code>. شيفرة HTML:<syntaxhighlight lang="html"> | ||
| سطر 61: | سطر 62: | ||
padding: 5px; | padding: 5px; | ||
} | } | ||
| − | .b1 {border-top-style: none;} | + | .b1 { border-top-style: none; } |
| − | .b2 {border-top-style: hidden;} | + | .b2 { border-top-style: hidden; } |
| − | .b3 {border-top-style: dotted;} | + | .b3 { border-top-style: dotted; } |
| − | .b4 {border-top-style: dashed;} | + | .b4 { border-top-style: dashed; } |
| − | .b5 {border-top-style: solid;} | + | .b5 { border-top-style: solid; } |
| − | .b6 {border-top-style: double;} | + | .b6 { border-top-style: double; } |
| − | .b7 {border-top-style: groove;} | + | .b7 { border-top-style: groove; } |
| − | .b8 {border-top-style: ridge;} | + | .b8 { border-top-style: ridge; } |
| − | .b9 {border-top-style: inset;} | + | .b9 { border-top-style: inset; } |
| − | .b10 {border-top-style: outset;} | + | .b10 { border-top-style: outset; } |
</syntaxhighlight> | </syntaxhighlight> | ||
==دعم المتصفحات== | ==دعم المتصفحات== | ||
| سطر 90: | سطر 91: | ||
== البنية العامة == | == البنية العامة == | ||
| − | === | + | === <code><br-style></code> === |
تقبل الخاصية <code>border-top-style</code> كلمةً محجوزةً من الكلمات المحجوزة المتاحة للخاصية <code>[[CSS/border-style|border-style]]</code>. | تقبل الخاصية <code>border-top-style</code> كلمةً محجوزةً من الكلمات المحجوزة المتاحة للخاصية <code>[[CSS/border-style|border-style]]</code>. | ||
| سطر 101: | سطر 102: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| + | == انظر أيضًا == | ||
| + | *صفحة الخاصيات التي تضبطها الخاصية المختصرة <code>[[CSS/border-top|border-top]]</code> وهي: <code>[[CSS/border-top-width|border-top-width]]</code>، و <code>[[CSS/border-top-color|border-top-color]]</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>. | ||
| + | *ضبط صورة للإطار باستخدام الخاصية <code>[[CSS/border-image|border-image]]</code>. | ||
| + | *الأركان المدورة <code>[[CSS/border-radius|border-radius]]</code>، وللأركان العلوية <code>[[CSS/border-top-left-radius|border-top-left-radius]]</code> و <code>[[CSS/border-top-right-radius|border-top-right-radius]]</code>. | ||
== مصادر ومواصفات == | == مصادر ومواصفات == | ||
* مواصفة [https://drafts.csswg.org/css-backgrounds-3/#the-border-style CSS Backgrounds and Borders Module Level 3]. | * مواصفة [https://drafts.csswg.org/css-backgrounds-3/#the-border-style CSS Backgrounds and Borders Module Level 3]. | ||
المراجعة الحالية بتاريخ 05:50، 19 مارس 2018
الخاصية border-top-style في CSS تُحدِّد شكل خط الإطار العلوي الخاص بالعنصر.
بطاقة الخاصية
| القيمة الابتدائية | none
|
|---|---|
| تُطبَّق على | جميع العناصر. |
| قابلة للوراثة | لا |
| قابلة للتحريك | لا |
| القيمة المحسوبة | كما حُدِّدَت. |
/* الكلمات المحجوزة */
border-top-style: none;
border-top-style: hidden;
border-top-style: dotted;
border-top-style: dashed;
border-top-style: solid;
border-top-style: double;
border-top-style: groove;
border-top-style: ridge;
border-top-style: inset;
border-top-style: outset;
/* القيم العامة */
border-top-style: inherit;
border-top-style: initial;
border-top-style: unset;
ملاحظة: لا تُعرِّف المواصفة كيف ستلتقي الإطارات التي لها أشكال مختلفة في الزوايا.
أمثلة
هذا مثال عن جدول <table> يُبيّن مختلف أشكال الإطارات عبر الخاصية border-top-style. شيفرة HTML:
<table>
<tr>
<td class="b1">none</td>
<td class="b2">hidden</td>
<td class="b3">dotted</td>
<td class="b4">dashed</td>
</tr>
<tr>
<td class="b5">solid</td>
<td class="b6">double</td>
<td class="b7">groove</td>
<td class="b8">ridge</td>
</tr>
<tr>
<td class="b9">inset</td>
<td class="b10">outset</td>
</tr>
</table>
شيفرة CSS:
tr, td {
padding: 5px;
}
.b1 { border-top-style: none; }
.b2 { border-top-style: hidden; }
.b3 { border-top-style: dotted; }
.b4 { border-top-style: dashed; }
.b5 { border-top-style: solid; }
.b6 { border-top-style: double; }
.b7 { border-top-style: groove; }
.b8 { border-top-style: ridge; }
.b9 { border-top-style: inset; }
.b10 { border-top-style: outset; }
دعم المتصفحات
| الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| الدعم الأساسي | 1.0 | 1.0 | 5.5 | 9.2 | 1.0 |
البنية العامة
<br-style>
تقبل الخاصية border-top-style كلمةً محجوزةً من الكلمات المحجوزة المتاحة للخاصية border-style.
البنية الرسمية
border-top-style: <br-style>;
حيث:
<br-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
انظر أيضًا
- صفحة الخاصيات التي تضبطها الخاصية المختصرة
border-topوهي:border-top-width، وborder-top-color. - صفحة الخاصيات التي تضبطها الخاصية المختصرة
borderوهي:border-width، وborder-style، وborder-color. - ضبط صورة للإطار باستخدام الخاصية
border-image. - الأركان المدورة
border-radius، وللأركان العلويةborder-top-left-radiusوborder-top-right-radius.
مصادر ومواصفات
- مواصفة CSS Backgrounds and Borders Module Level 3.
- مواصفة CSS Level 2 (Revision 1).