الفرق بين المراجعتين لصفحة: «HTML/span»
< HTML
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}' |
تعديل الأمثلة |
||
| سطر 6: | سطر 6: | ||
مثال عن استخدام العنصر <code><nowiki><span></nowiki></code> داخل فقرة (العنصر <code>[[HTML/pre|<nowiki><p></nowiki>]]</code>): | مثال عن استخدام العنصر <code><nowiki><span></nowiki></code> داخل فقرة (العنصر <code>[[HTML/pre|<nowiki><p></nowiki>]]</code>): | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
<p><span> | <p><span>محتوى نصي</span></p> | ||
</syntaxhighlight>مثال آخر يستعمل العنصر <<code>span></code> لاحتواء رابط مع إضافة الخاصية <code>class</code> إليه لتنسيقه لاحقًا:<syntaxhighlight lang="html"> | </syntaxhighlight>مثال آخر يستعمل العنصر <<code>span></code> لاحتواء رابط مع إضافة الخاصية <code>class</code> إليه لتنسيقه لاحقًا:<syntaxhighlight lang="html"> | ||
<li><span class="link"> | <li> | ||
<a href=" | <span class="link"> | ||
</span></li> | <a href="#">HTML</a> | ||
</span> | |||
</li> | |||
</syntaxhighlight>شيفرة CSS لتنسيق العنصر <code><nowiki><span></nowiki></code> السابق:<syntaxhighlight lang="css"> | </syntaxhighlight>شيفرة CSS لتنسيق العنصر <code><nowiki><span></nowiki></code> السابق:<syntaxhighlight lang="css"> | ||
.link { | .link { | ||
background: | background-color: #F0F0F0; | ||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== بطاقة العنصر == | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
مراجعة 11:33، 19 فبراير 2018
العنصر <span> هو حاوية سطرية (inline container) عامة، والتي لا تُمثِّل نوعًا معيّنًا من المحتوى، ويمكن أن تستعمل تجميع العناصر من أجل التنسيق (إما باستخدام الخاصية id أو class) أو لأن تلك العناصر تتشارك في خاصيةٍ ما مثل الخاصية lang.
لا يجب أن يستعمل هذا العنصر إلا إذا لم يكن أيُّ عنصرٍ آخر مناسبًا؛ إذ إنَّ العنصر <span> يشبه العنصر <div> كثيرًا، لكن العنصر <div> هو عنصر كتلي (block-level element) بينما العنصر <span> هو عنصر سطري (inline element).
مثال عن استخدام العنصر <span> داخل فقرة (العنصر <p>):
<p><span>محتوى نصي</span></p>
مثال آخر يستعمل العنصر <span> لاحتواء رابط مع إضافة الخاصية class إليه لتنسيقه لاحقًا:
<li>
<span class="link">
<a href="#">HTML</a>
</span>
</li>
شيفرة CSS لتنسيق العنصر <span> السابق:
.link {
background-color: #F0F0F0;
}
بطاقة العنصر
| تصنيفات المحتوى | عنصر تنظيمي أو عنصر عادي. |
|---|---|
| المحتوى المسموح | محتوى عادي. |
| الوسم المختصر | لا يمكن حذف أيّ من وسمَي البداية أو النهاية. |
| العناصر الأب | أي عنصر يقبل المحتوى العادي. |
| واجهة DOM | HTMLSpanElement
|
دعم المتصفحات
| Chrome | Firefox | Edge | Safari | Opera |
|---|---|---|---|---|
| مدعوم | مدعوم | مدعوم | مدعوم | مدعوم |
الخاصيات
يمكن استخدام الخاصيات العامة في هذا العنصر.
مصادر ومواصفات
- معيار HTML Living Standard.
- مواصفة HTML5، تحولت واجهة DOM من
HTMLElementإلىHTMLSpanElement. - مواصفة HTML 4.01.