آموزش کامل تگ <span>
عنصر درون خطی برای استایلدهی بخشهای کوچک متن
تگ <span> چیست؟
<span> یک عنصر درون خطی (Inline) در HTML است که برای استایلدهی و گروهبندی بخشهای کوچک متن استفاده میشود.
برخلاف <div> که یک عنصر بلوک-سطح است، <span> یک عنصر درون خطی است.
<p>
این یک متن معمولی است که شامل یک
<span style=“color: red;”>کلمه قرمز</span>
میباشد.
</p>
این یک متن معمولی است که شامل یک
کلمه قرمز
میباشد.
تفاوت اصلی span و div
<span>
- عنصر درون خطی
- فقط به اندازه محتوا فضا میگیرد
- درون یک خط قرار میگیرد
- برای بخشهای کوچک متن
- ایجاد خط جدید نمیکند
<div>
- عنصر بلوک-سطح
- کل عرض را میگیرد
- خط جدید ایجاد میکند
- برای ساختاردهی صفحات
- کانتینر اصلی
| ویژگی | <span> | <div> |
|---|---|---|
| نوع نمایش | inline | block |
| فضای اشغالی | به اندازه محتوا | کل عرض والد |
| خط جدید | خیر | بله |
| کاربرد اصلی | استایلدهی متن | ساختاردهی صفحه |
کاربردهای عملی span
۱. تغییر رنگ بخشی از متن
<span style=“color: #ef4444;”>عاشق</
span>
برنامهنویسی هستم.</p>
من عاشق برنامهنویسی هستم.
۲. هایلایت کردن کلمات کلیدی
<span class=“keyword”>HTML</
span>,
<span class=“keyword”>CSS</
span>,
<span class=“keyword”>JavaScript</
span>.</p>
مهمترین زبانهای وب:
HTML,
CSS,
JavaScript.
استایلدهی پیشرفته با span
<p>
متن معمولی با
<span style=”
background: linear-gradient(90deg, #fbb6ce, #d6bcfa);
color: white;
padding: 4px 12px;
border-radius: 20px;
font-weight: bold;
margin: 0 5px;
“>گرادیان زیبا</span>
داخل آن.
</p>
متن معمولی با
گرادیان زیبا
داخل آن.
استفاده از class و id در span
<p>
قیمت:
<span id=“price” class=“highlight price-large”>
۱۲۰,۰۰۰ تومان
</span>
</p>
<!– CSS –>
<style>
/* استایل با کلاس */
.highlight {
background-color: #fef3c7;
padding: 2px 8px;
border-radius: 4px;
}
.price-large {
font-size: 1.2em;
font-weight: bold;
color: #059669;
}
/* استایل با آیدی */
#price {
border: 2px solid #f59e0b;
}
</style>
قیمت:
۱۲۰,۰۰۰ تومان
کاربردهای حرفهای
نمایش کد در متن
<span style=”
font-family: ‘Courier New’, monospace;
background: #1e293b;
color: #e2e8f0;
padding: 2px 6px;
border-radius: 4px;
“>color: red;</span>
استفاده کنید.</p>
برای تغییر رنگ از
color: red;
استفاده کنید.
ایکونهای درون خطی
⚠ هشدار:
این عملیات قابل بازگشت نیست.
✅ موفقیت:
عملیات با موفقیت انجام شد.
💡 نکته:
این قسمت را با دقت مطالعه کنید.
مثال کاربردی: ایجاد رزومه
مهارتهای فنی:
زبانهای برنامهنویسی:
Python
JavaScript
PHP
فریمورکها:
React
Vue.js
Django
سطح مهارت:
مقدماتی |
متوسط |
پیشرفته
تمرین عملی
کد زیر را تغییر دهید:
این یک
<span style=“color: blue;”>متن آبی</
span>
است.
</p>
این یک متن آبی است.
پیشنهادات برای آزمایش:
- رنگ را به قرمز تغییر دهید
- پسزمینه اضافه کنید:
background: #fef3c7; - فونت را بزرگتر کنید:
font-size: 1.2em; - حاشیه اضافه کنید:
border: 1px solid #ccc; - گردی گوشه اضافه کنید:
border-radius: 4px;
جمعبندی
نتیجه نهایی
تگ <span> برای استایلدهی
بخشهای کوچک متن
استفاده میشود. برخلاف
<div>
که یک عنصر بلوک-سطح است،
<span>
درون خطی بوده و فقط به اندازه محتوایش فضا میگیرد.