الفرق بين المراجعتين لصفحة: «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>.<syntaxhighlight lang="css">
الخاصية <code>caption-side</code> في CSS تُحدِّد موضع لافتة الجدول المُعرَّفة عبر العنصر <code>[[HTML/caption|<nowiki><caption></nowiki>]]</code>.
/* كلمات محجوزة */
caption-side: top;
caption-side: bottom;


/* القيم العامة */
== بطاقة الخاصية ==
caption-side: inherit;
caption-side: initial;
caption-side: unset;
</syntaxhighlight>
{| 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 ABOVE the table</caption>
   <caption>اللافتة فوق الجدول</caption>
   <tr>
   <tr>
     <td>Some data</td>
     <td>بعض البيانات</td>
     <td>Some more data</td>
     <td>بعض البيانات الأخرى</td>
   </tr>
   </tr>
</table>
</table>
سطر 42: سطر 46:


<table class="bottom">
<table class="bottom">
   <caption>Caption BELOW the table</caption>
   <caption>اللافتة تحت الجدول</caption>
   <tr>
   <tr>
     <td>Some data</td>
     <td>بعض البيانات</td>
     <td>Some more data</td>
     <td>بعض البيانات الأخرى</td>
   </tr>
   </tr>
</table>
</table>
سطر 85: سطر 89:
== البنية العامة ==
== البنية العامة ==
الخاصية <code>caption-side</code> تقبل إحدى الكلمتين المحجوزتين التاليتين.
الخاصية <code>caption-side</code> تقبل إحدى الكلمتين المحجوزتين التاليتين.
=== القيمة <code>top</code> ===
=== <code>top</code> ===
يجب عرض لافتة الجدول <code>[[HTML/caption|<nowiki><caption></nowiki>]]</code> فوق الجدول.
يجب عرض لافتة الجدول <code>[[HTML/caption|<nowiki><caption></nowiki>]]</code> فوق الجدول.
=== القيمة <code>bottom</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 التي تساهم في تحديد الموضع الرأسي لأحد العناصر التي يمكن أن يتغير مكانها.

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

مجلوبة من «https://wiki.hsoub.com/index.php?title=CSS/caption-side&oldid=14852»