الفرق بين المراجعتين لصفحة: «HTML/div»

من موسوعة حسوب
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}'
إضافة قسمين ومثال
 
سطر 4: سطر 4:
مثال نموذجي عن استخدام العنصر <code><nowiki><div></nowiki></code>:<syntaxhighlight lang="html">
مثال نموذجي عن استخدام العنصر <code><nowiki><div></nowiki></code>:<syntaxhighlight lang="html">
<div>
<div>
   <p>Any kind of content here. Such as
   <p>يمكنك وضع أي نوع من أنواع المحتوى هنا، بما في ذلك الجداول وخلافه.</p>
  &lt;p&gt;, &lt;table&gt;. You name it!</p>
</div>
</div>
</syntaxhighlight>
</syntaxhighlight>


== بطاقة العنصر ==
{| class="wikitable" style="width: 100%;"
{| class="wikitable" style="width: 100%;"
|-
|-
سطر 48: سطر 48:
== ملاحظات الاستخدام ==
== ملاحظات الاستخدام ==
لا يجب أن يستعمل العنصر <code><nowiki><div></nowiki></code> إلا إذا لم يكن أيّ عنصر تنظيمي مثل <code>[[HTML/article|<article>]]</code> أو <code>[[HTML/nav|<nav>]]</code> مناسبًا.
لا يجب أن يستعمل العنصر <code><nowiki><div></nowiki></code> إلا إذا لم يكن أيّ عنصر تنظيمي مثل <code>[[HTML/article|<article>]]</code> أو <code>[[HTML/nav|<nav>]]</code> مناسبًا.
== أمثلة ==
مثال عن استخدام العنصر <nowiki><div> لتنسيق جزء من المستند يحتوي على فقرة (</nowiki><code>[[HTML/p|<nowiki><p></nowiki>]]</code>) وجدول (<code>[[HTML/table|<nowiki><table></nowiki>]]</code>):<syntaxhighlight lang="html">
<div id="styled-div">
  <p>هذا بعض المحتوى الموجود داخل العنصر &lt;div&gt;</p>
  <table>
    <tr>
      <th>العمود الأول</th>
      <th>العمود الثاني</th>
    </tr>
    <tr>
      <td>الخلية الأولى</td>
      <td>الخلية الثانية</td>
    </tr>
  </table>
</div>
</syntaxhighlight>شيفرة [[CSS]] المستخدمة لتنسيق العنصر:<syntaxhighlight lang="css">
#styled-div {
  background-color: #fcfcfc;
  border: 1px solid #ccc;
  padding: 0.5em 1em;
}
</syntaxhighlight>
== التنسيق الافتراضي ==
تعرض أغلبية المتصفحات العنصر <code><nowiki><div></nowiki></code> مع ضبط الخاصية <code>[[CSS/display|display]]</code> إلى <code>block</code>:<syntaxhighlight lang="css">
div {
  display: block;
}
</syntaxhighlight>


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

المراجعة الحالية بتاريخ 04:58، 18 فبراير 2018

العنصر <div> هو حاوية عامة للمحتوى التي لا تُمثِّل شيئًا معيّنًا، يمكن استخدامها لتجميع العناصر لأغراض مثل التنسيق (باستخدام خاصيتَي class أو id)، أو إنشاء قسم جديد في المستند بلغةٍ أخرى (باستخدام الخاصية lang)، وهلم جرًا.

مثال نموذجي عن استخدام العنصر <div>:

<div>
  <p>يمكنك وضع أي نوع من أنواع المحتوى هنا، بما في ذلك الجداول وخلافه.</p>
</div>

بطاقة العنصر

تصنيفات المحتوى عنصر تنظيمي.
المحتوى المسموح عنصر تنظيمي.
الوسم المختصر لا يمكن حذف أيّ من وسمَي البداية أو النهاية.
العناصر الأب أي عنصر يقبل المحتوى التنظيمي، إضافةً إلى العنصر <dl>.
واجهة DOM HTMLDivElement

دعم المتصفحات

Chrome Firefox Edge Safari Opera
مدعوم مدعوم مدعوم مدعوم مدعوم

الخاصيات

يمكن استخدام الخاصيات العامة في هذا العنصر.

أصبحت الخاصية align قديمة ومهملة وغير مدعومة في HTML5، فلا تستعملها.

ملاحظات الاستخدام

لا يجب أن يستعمل العنصر <div> إلا إذا لم يكن أيّ عنصر تنظيمي مثل <article> أو <nav> مناسبًا.

أمثلة

مثال عن استخدام العنصر <div> لتنسيق جزء من المستند يحتوي على فقرة (<p>) وجدول (<table>):

<div id="styled-div">
  <p>هذا بعض المحتوى الموجود داخل العنصر &lt;div&gt;</p>
  <table>
    <tr>
      <th>العمود الأول</th>
      <th>العمود الثاني</th>
    </tr>
    <tr>
      <td>الخلية الأولى</td>
      <td>الخلية الثانية</td>
    </tr>
  </table>
</div>

شيفرة CSS المستخدمة لتنسيق العنصر:

#styled-div {
  background-color: #fcfcfc;
  border: 1px solid #ccc;
  padding: 0.5em 1em;
}

التنسيق الافتراضي

تعرض أغلبية المتصفحات العنصر <div> مع ضبط الخاصية display إلى block:

div {
  display: block;
}

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