الفرق بين المراجعتين لصفحة: «HTML/div»
< HTML
لا ملخص تعديل |
إضافة قسمين ومثال |
||
(3 مراجعات متوسطة بواسطة نفس المستخدم غير معروضة) | |||
سطر 4: | سطر 4: | ||
مثال نموذجي عن استخدام العنصر <code><nowiki><div></nowiki></code>:<syntaxhighlight lang="html"> | مثال نموذجي عن استخدام العنصر <code><nowiki><div></nowiki></code>:<syntaxhighlight lang="html"> | ||
<div> | <div> | ||
<p> | <p>يمكنك وضع أي نوع من أنواع المحتوى هنا، بما في ذلك الجداول وخلافه.</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>هذا بعض المحتوى الموجود داخل العنصر <div></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> | |||
== مصادر ومواصفات == | == مصادر ومواصفات == | ||
سطر 53: | سطر 83: | ||
* مواصفة [http://www.w3.org/TR/html5/grouping-content.html#the-div-element HTML5]، حذفت هذه المواصفة الخاصية <code>align</code>. | * مواصفة [http://www.w3.org/TR/html5/grouping-content.html#the-div-element HTML5]، حذفت هذه المواصفة الخاصية <code>align</code>. | ||
* مواصفة [http://www.w3.org/TR/html401/struct/global.html#h-7.5.4 HTML 4.01]. | * مواصفة [http://www.w3.org/TR/html401/struct/global.html#h-7.5.4 HTML 4.01]. | ||
[[تصنيف:HTML|{{SUBPAGENAME}}]] | |||
[[تصنيف: | [[تصنيف:HTML Elements|{{SUBPAGENAME}}]] | ||
[[تصنيف:HTML]] | [[تصنيف:HTML Text Content|{{SUBPAGENAME}}]] | ||
[[تصنيف:HTML |
المراجعة الحالية بتاريخ 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>هذا بعض المحتوى الموجود داخل العنصر <div></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;
}
مصادر ومواصفات
- معيار HTML Living Standard.
- مواصفة HTML5، حذفت هذه المواصفة الخاصية
align
. - مواصفة HTML 4.01.