الفرق بين المراجعتين ل"HTML/span"
< HTML
اذهب إلى التنقل
اذهب إلى البحث
ط (استبدال النص - ':(Content sectioning|Edits|Embedded content|Forms|Inline text semantics|Input Types|Interactive elements|Main Root|Metadata|Multimedia|Scripting|Table|Text Content)' ب':HTML $1') |
جميل-بيلوني (نقاش | مساهمات) ط |
||
(4 مراجعات متوسطة بواسطة مستخدم واحد آخر غير معروضة) | |||
سطر 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> |
− | </syntaxhighlight>شيفرة CSS لتنسيق العنصر <code><nowiki><span></nowiki></code> السابق:<syntaxhighlight lang="css"> | + | </span> |
+ | </li> | ||
+ | </syntaxhighlight>شيفرة [[CSS]] لتنسيق العنصر <code><nowiki><span></nowiki></code> السابق:<syntaxhighlight lang="css"> | ||
.link { | .link { | ||
− | background: | + | background-color: #F0F0F0; |
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
+ | {{Course|course=frontend}} | ||
+ | __TOC__ | ||
+ | |||
+ | |||
+ | |||
+ | == بطاقة العنصر == | ||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
سطر 56: | سطر 64: | ||
*مواصفة [http://www.w3.org/TR/html5/text-level-semantics.html#the-span-element HTML5]، تحولت واجهة DOM من <code>HTMLElement</code> إلى <code>HTMLSpanElement</code>. | *مواصفة [http://www.w3.org/TR/html5/text-level-semantics.html#the-span-element HTML5]، تحولت واجهة DOM من <code>HTMLElement</code> إلى <code>HTMLSpanElement</code>. | ||
*مواصفة [http://www.w3.org/TR/html401/struct/global.html#edef-SPAN HTML 4.01]. | *مواصفة [http://www.w3.org/TR/html401/struct/global.html#edef-SPAN HTML 4.01]. | ||
− | [[تصنيف:HTML]] | + | [[تصنيف:HTML|{{SUBPAGENAME}}]] |
− | [[تصنيف:HTML Elements]] | + | [[تصنيف:HTML Elements|{{SUBPAGENAME}}]] |
− | [[تصنيف:HTML Inline text semantics]] | + | [[تصنيف:HTML Inline text semantics|{{SUBPAGENAME}}]] |
المراجعة الحالية بتاريخ 16:06، 7 أكتوبر 2022
العنصر <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;
}
دورة تطوير واجهات المستخدم
- 66 ساعة فيديو تدريبية
- من الصفر دون الحاجة لخبرة مسبقة
- شهادة معتمدة من أكاديمية حسوب
- متابعة أثناء الدورة من فريق مختص
بطاقة العنصر
تصنيفات المحتوى | عنصر تنظيمي أو عنصر عادي. |
---|---|
المحتوى المسموح | محتوى عادي. |
الوسم المختصر | لا يمكن حذف أيّ من وسمَي البداية أو النهاية. |
العناصر الأب | أي عنصر يقبل المحتوى العادي. |
واجهة DOM | HTMLSpanElement
|
دعم المتصفحات
Chrome | Firefox | Edge | Safari | Opera |
---|---|---|---|---|
مدعوم | مدعوم | مدعوم | مدعوم | مدعوم |
الخاصيات
يمكن استخدام الخاصيات العامة في هذا العنصر.
مصادر ومواصفات
- معيار HTML Living Standard.
- مواصفة HTML5، تحولت واجهة DOM من
HTMLElement
إلىHTMLSpanElement
. - مواصفة HTML 4.01.