جلسه ی بیست و ششم: تگ Span

اموزش تگ Span

همه ما شاید نیاز داشته باشیم در میان کد ها یا متن هایی که می نویسیم به قسمتی از آن ها استایل خاصی بدهیم برای مثال به آن ها رنگ خاصی بیافزاییم. حال برای اینکه بخواهیم به نحوه ی کار با این تگ پی ببریم کافیست به این اموزش توجه کافی را داشته باشیم.

تگ Span چیست؟

تگ Span تگ های ریزی می باشند که کاربرد های بسیار زیادی دارند . بگذارید با یک مثال کار خود را آغاز کنیم . در همین پست به بالای صفحه بروید کلماتی مثل  آموزش طراحی سایت یا برای مثال تاریخ یا تعداد بازدید این پست را می بینید همانطور که می دانید این اطلاعات ارزش آنچنانی ندارند اما وجود آن ها لازم است پس از تاین تگ برای ایجاد این قسمت ها استفاده می کنیم .

نکته : این تگ از نوع تگ های دسته ی اول است یعنی دارای دو قسمت باز و بسته می باشد .

<span></span>

درآموزش تگ های جامع Html که قبلا آموزش داده ایم (برای دیدن آموزش مورد نظر کلیک نمایید) به تگ های Span اشاره نموده ایم. همانطور که می دانید تگ های Span تگ های ریزی هستند که کار با زبان نشانه گذاری Html را برای ما آسان تر می کنند. برای شناخت بیشتر تگ Span با ما همراه باشید.

کاربرد تگ Span

تگ های Span جز تگ ها inline بلاک هستند یعنی در صورت استفاده از این تگ ها عناصر رو به بلاک بعدی نمی فرستند، برای فهم بهتر این مبحث بگذارید آن را با یک مثال بیان کنیم.

به یک تگ H1 دقت کنید زمانی که از یک تگ H1 استفاده می کنیم پس از تمام شدن متن مورد نظر ما و بستن تگ H1  عنصر مورد نظر ما به خط بعدی منتقل می شود. به عناصری که با بسته شدن به خط بعدی منتقل نمی شوند Block می گویند. برای فهم بیشتر به مثال زیر توجه کنید:

<h1>kamyabiha</h1>

<h1>کمیابی ها</h1>

خروجی کد بالا:

آموزش تگ Span

حال که با عناصر Block آشنا شدید نیاز است با عناصر Inline نیز آشنا شوید. تگ Span یکی از این این عناصر می باشد. بارز ترین ویژگی عناصر Inline بر خط بودن آن هاست یعنی زمانی که از این عناصر استفاده کنیم محتوای مورد نظر ما به خط بعدی منتقل نمی شود. به نمونه کد زیر توجه کنید:

<span>کمیابی ها</span>

<span>kamyabiha</span>

خروجی کد بالا:

آموزش تگ Span

حال شاید به این موضوع فکر کنید که این موضوع چه کاربردی دارد و چه نیازی است که ما از عناصر inline استفاده کنیم برای گرفتن جواب سوال خود با ما همراه باشید.

 

تاثیر تگ Span بر روی تگ P

همانطور که می دانید تگ p از عناصر تگ Block می باشد و با بستن این تگ متن مورد نظر ما به خط بعدی منتقل می شود. حال فرض کنید که می خواهیم رنگ قسمتی از متن تگ p را تغییر دهیم چه راه حلی برای این کار پیشنهاد می دهید؟

شاید به این موضوع فکر کنید که از دو تگ p درون یکدیگر استفاده کنیم اما همانطور که در مبحث قبل گفتیم تگ p جز عناصر بلاک می باشد و با بستن تگ p متن مورد نظر ما به خط بعدی منتقل می شود. به نمونه کد زیر توجه کنید:

<p>شما در جلسه ی <p style="color:red">بیست و ششم از</p>طراحی سایت می باشید</p>

خروجی کد بالا:

آموزش تگ Span

 

اما راه حل درست برای حل این مسئله استفاده از تگ Span می باشد. برای حل این مشکل ابتدا باید یک تگ p ایجاد نمایید سپس درون تگ p متن مورد نظر خود را می نویسیم حال قسمتی را که می خواهیم تغییر رنگ دهد انتخاب و درون یک تگ Span قرار می دهیم. حال کافیست به تگ Span مورد نظر خود استایل مورد نظرمان را اضافه می کنیم. به نمونه کد بالا دقت کنید:

<p>شما در جلسه ی <span style="color:red">بیست و ششم از</span>طراحی سایت می باشید</p>

خروجی کد بالا:

آموزش تگ Span

شاید با خود فکر کنید که همیشه باید از استایل درونی استفاده کنید (برای دیدن آموزش انواع استایل در CSS کلیک کنید) اما لازم است بدانید که تگ Span رابطه ی خوبی با زبان CSS دارد و می تواند هر نوع استایلی را قبل کند البته در افزودن بعضی از ویژگی های خاص ممکن است دچار مشکل شویم.

برای مثال تگ Span از خاصیت Float پشتیبانی نمی کند برای اینکه از این خاصیت در تگ Span استفاده کنیم باید ابتدا از ویژگی Disply:block بنویسیم سپس از استایل Float استفاده نماییم.

دیگر کاربرد های این تگ می توان به استفاده از این تگ در بخش پست های همین سایت نام برد برای مثال به قسمت بالایی یک پست نگاه کنید مفاهیمی مانند نام نویسنده، تاریخ، نظرات و… همه به وسیله ی تگ Span ایجاد شده اند. معمولا در این تگ ها اطلاعات بی ارزش قرار می گیرد پس درست نیست که از این تگ ها در هر جایی استفاده شود.

خلاصه مطلب:

  1. تگ Span تگ های ریزی می باشند که کاربرد های بسیار زیادی دارند .
  2. تگ Span از نوع تگ های دسته ی اول است یعنی دارای دو قسمت باز و بسته می باشد .
  3. همانطور که می دانید تگ های Span تگ های ریزی هستند که کار با زبان نشانه گذاری Html را برای ما آسان تر می کنند.
  4. تگ های Span جز تگ ها inline بلاک هستند یعنی در صورت استفاده از این تگ ها عناصر رو به بلاک بعدی نمی فرستند.
  5. به عناصری که با بسته شدن به خط بعدی منتقل نمی شوند Block می گویند.
  6. بارز ترین ویژگی عناصر Inline بر خط بودن آن هاست یعنی زمانی که از این عناصر استفاده کنیم محتوای مورد نظر ما به خط بعدی منتقل نمی شود.
  7. ابتدا باید یک تگ p ایجاد نمایید سپس درون تگ p متن مورد نظر خود را می نویسیم حال قسمتی را که می خواهیم تغییر رنگ دهد انتخاب و درون یک تگ Span قرار می دهیم. حال کافیست به تگ Span مورد نظر خود استایل مورد نظرمان را اضافه می کنیم.
  8. مثال تگ Span از خاصیت Float پشتیبانی نمی کند برای اینکه از این خاصیت در تگ Span استفاده کنیم باید ابتدا از ویژگی Disply:block بنویسیم سپس از استایل Float استفاده نماییم.
  9. معمولا در این تگ ها اطلاعات بی ارزش قرار می گیرد پس درست نیست که از این تگ ها در هر جایی استفاده شود.
ابوالفضل کلهری

فعال در زمینه های ui و ux و طراحی وب سایت مسلط به زبان های نشانه گذاری HTML و CSS و همچنین در زمینه ی آموزش زبان های HTML و CSS نیز فعالیت دارم . امیدوارم با آموزش هایی که در این سایت قرار می دهم موجب پیشرفت شما عزیزان باشم.

دیدگاه ها
  • قبل از ارسال دیدگاه خود قوانین بخش دیدگاه ها را مطالعه کنید. ارسال دیدگاه به معنی پذیرش این قوانین است. قوانین بخش دیدگاه ها