الفرق بين المراجعتين لصفحة: «CSS/caption-side»
< CSS
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}' |
لا ملخص تعديل |
||
| (3 مراجعات متوسطة بواسطة نفس المستخدم غير معروضة) | |||
| سطر 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]. | ||
المراجعة الحالية بتاريخ 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).