الفرق بين المراجعتين ل"CSS/caption-side"
< CSS
اذهب إلى التنقل
اذهب إلى البحث
| (4 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>caption-side</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>caption-side</code>}}</noinclude> | ||
| − | الخاصية <code>caption-side</code> في CSS تُحدِّد موضع لافتة الجدول المُعرَّفة عبر العنصر <code>[[HTML/caption|<nowiki><caption></nowiki>]]</code>. | + | الخاصية <code>caption-side</code> في CSS تُحدِّد موضع لافتة الجدول المُعرَّفة عبر العنصر <code>[[HTML/caption|<nowiki><caption></nowiki>]]</code>. |
| − | |||
| − | |||
| − | |||
| − | + | == بطاقة الخاصية == | |
| − | |||
| − | |||
| − | |||
| − | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
| سطر 28: | سطر 21: | ||
|} | |} | ||
| + | |||
| + | <syntaxhighlight lang="css"> | ||
| + | /* كلمات محجوزة */ | ||
| + | caption-side: top; | ||
| + | caption-side: bottom; | ||
| + | |||
| + | /* القيم العامة */ | ||
| + | caption-side: inherit; | ||
| + | caption-side: initial; | ||
| + | caption-side: unset; | ||
| + | </syntaxhighlight> | ||
== أمثلة == | == أمثلة == | ||
سنستخدم في المثال الآتي جدولين <code>[[HTML/table|<nowiki><table></nowiki>]]</code> مع لافتةٍ <code>[[HTML/caption|<nowiki><caption></nowiki>]]</code> لكل واحدٍ منهما، ثم سنستعمل الخاصية <code>caption-side</code> لضبط موضع اللافتة:<syntaxhighlight lang="html"> | سنستخدم في المثال الآتي جدولين <code>[[HTML/table|<nowiki><table></nowiki>]]</code> مع لافتةٍ <code>[[HTML/caption|<nowiki><caption></nowiki>]]</code> لكل واحدٍ منهما، ثم سنستعمل الخاصية <code>caption-side</code> لضبط موضع اللافتة:<syntaxhighlight lang="html"> | ||
<table class="top"> | <table class="top"> | ||
| − | <caption> | + | <caption>اللافتة فوق الجدول</caption> |
<tr> | <tr> | ||
| − | <td> | + | <td>بعض البيانات</td> |
| − | <td> | + | <td>بعض البيانات الأخرى</td> |
</tr> | </tr> | ||
</table> | </table> | ||
| سطر 42: | سطر 46: | ||
<table class="bottom"> | <table class="bottom"> | ||
| − | <caption> | + | <caption>اللافتة تحت الجدول</caption> |
<tr> | <tr> | ||
| − | <td> | + | <td>بعض البيانات</td> |
| − | <td> | + | <td>بعض البيانات الأخرى</td> |
</tr> | </tr> | ||
</table> | </table> | ||
| سطر 85: | سطر 89: | ||
== البنية العامة == | == البنية العامة == | ||
الخاصية <code>caption-side</code> تقبل إحدى الكلمتين المحجوزتين التاليتين. | الخاصية <code>caption-side</code> تقبل إحدى الكلمتين المحجوزتين التاليتين. | ||
| − | === | + | === <code>top</code> === |
يجب عرض لافتة الجدول <code>[[HTML/caption|<nowiki><caption></nowiki>]]</code> فوق الجدول. | يجب عرض لافتة الجدول <code>[[HTML/caption|<nowiki><caption></nowiki>]]</code> فوق الجدول. | ||
| − | === | + | === <code>bottom</code> === |
يجب عرض لافتة الجدول <code>[[HTML/caption|<nowiki><caption></nowiki>]]</code> تحت الجدول. | يجب عرض لافتة الجدول <code>[[HTML/caption|<nowiki><caption></nowiki>]]</code> تحت الجدول. | ||
=== البنية الرسمية === | === البنية الرسمية === | ||
| سطر 94: | سطر 98: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| + | == انظر أيضًا == | ||
| + | * صفحة الخاصية <code>[[CSS/top|top]]</code> التي تساهم في تحديد الموضع الرأسي لأحد العناصر التي يمكن أن يتغير مكانها. | ||
| + | * صفحة الخاصية <code>[[CSS/bottom|bottom]]</code> التي تساهم في تحديد الموضع الرأسي لأحد العناصر التي يمكن أن يتغير مكانها. | ||
| + | |||
== مصادر ومواصفات == | == مصادر ومواصفات == | ||
* مسودة [https://drafts.csswg.org/css-logical-props/#caption-side CSS Logical Properties Level 1]. | * مسودة [https://drafts.csswg.org/css-logical-props/#caption-side CSS Logical Properties Level 1]. | ||
* مواصفة [http://www.w3.org/TR/CSS2/tables.html#caption-position CSS Level 2 (Revision 1)]. | * مواصفة [http://www.w3.org/TR/CSS2/tables.html#caption-position CSS Level 2 (Revision 1)]. | ||
| − | [[تصنيف:CSS]] | + | [[تصنيف:CSS|{{SUBPAGENAME}}]] |
| − | [[تصنيف:CSS Property]] | + | [[تصنيف:CSS Property|{{SUBPAGENAME}}]] |
| − | [[تصنيف:CSS Table]] | + | [[تصنيف:CSS Table|{{SUBPAGENAME}}]] |
المراجعة الحالية بتاريخ 08:19، 12 أغسطس 2018
الخاصية caption-side في CSS تُحدِّد موضع لافتة الجدول المُعرَّفة عبر العنصر <caption>.
بطاقة الخاصية
| القيمة الابتدائية | top
|
|---|---|
| تُطبَّق على | العنصر <caption>.
|
| قابلة للوراثة | نعم |
| قابلة للحركة | لا |
| القيمة المحسوبة | كما حُدِّدَت. |
/* كلمات محجوزة */
caption-side: top;
caption-side: bottom;
/* القيم العامة */
caption-side: inherit;
caption-side: initial;
caption-side: unset;
أمثلة
سنستخدم في المثال الآتي جدولين <table> مع لافتةٍ <caption> لكل واحدٍ منهما، ثم سنستعمل الخاصية caption-side لضبط موضع اللافتة:
<table class="top">
<caption>اللافتة فوق الجدول</caption>
<tr>
<td>بعض البيانات</td>
<td>بعض البيانات الأخرى</td>
</tr>
</table>
<br>
<table class="bottom">
<caption>اللافتة تحت الجدول</caption>
<tr>
<td>بعض البيانات</td>
<td>بعض البيانات الأخرى</td>
</tr>
</table>
شيفرة CSS:
.top caption {
caption-side: top;
}
.bottom caption {
caption-side: bottom;
}
table {
border: 1px solid gray;
padding: .25em;
}
td {
border: 1px solid cadetblue;
padding: .1em;
}
دعم المتصفحات
| الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| الدعم الأساسي | 1.0 | 1.0 | 8.0 | 4.0 | 1.0 |
البنية العامة
الخاصية caption-side تقبل إحدى الكلمتين المحجوزتين التاليتين.
top
يجب عرض لافتة الجدول <caption> فوق الجدول.
bottom
يجب عرض لافتة الجدول <caption> تحت الجدول.
البنية الرسمية
caption-side: top | bottom;
انظر أيضًا
- صفحة الخاصية
topالتي تساهم في تحديد الموضع الرأسي لأحد العناصر التي يمكن أن يتغير مكانها. - صفحة الخاصية
bottomالتي تساهم في تحديد الموضع الرأسي لأحد العناصر التي يمكن أن يتغير مكانها.
مصادر ومواصفات
- مسودة CSS Logical Properties Level 1.
- مواصفة CSS Level 2 (Revision 1).