آشنایی با تگ span در HTML

مسیح دیندار
مدیریت
عضو شده: 2021-04-12 14:23:35
2021-05-24 07:16:26

یکی از تگ هایی که در طراحی یک سایت می تواند نقش زیادی ایفا کند، تگ span است. span ها می توانند برای قرار دادن عناصر کوچک و درون خطی در سایت و قالب استفاده شوند و توسط استایل بتوان آنها را راحت تر مدیریت کرد.

زمانی که در سایت خود المنت ها و متن های زیادی داشته باشید، برای استایل دهی یک کلمه، بخش یا محدوده داخل آن، توسط CSS، بهترین راه استفاده از span است چرا که این تگ به صورت درون خطی آن محدوده را نشان خواهد داد. عرض و ارتفاع تگ span دقیقا هم اندازه با محتوای داخلش تغییر خواهد کرد. یعنی اگر یک آیکن فقط داخل آن قرار دهید، اندازه آن محدوده دقیقا هم اندازه آیکن خواهد بود و در اندازه سایر بخش ها و محدوده های متنی تغییری ایجاد نخواهد کرد و طراحی شما را دچار تغییر نخواهد کرد.

از span ها معمولا برای قرار دادن آیکن ها در بلوک ها و المنت ها و متن ها استفاده میشود چرا که بدون به هم ریختن سایر بخش ها، می توان به استایل دهی آن بخش پرداخت!

کاربرد دیگر Span ها برای اضافه کردن کلمات تکی در یک محدوده است. شاید دیده باشید که کلماتی مانند "تخفیف" و "فروش" و "جدید" و ... را روی یک تصویر یا یک محصول قرار میدهند! این دقیقا با span ساخته شده است!

کاربرد بعدی برای استایل دهی یک کلمه یا یک بخش خاص درون یک متن است. متن ها که با تگ P ساخته می شوند، در حالت عادی اگر یک استایل خاص را برای بخشی از آن بخواهید اعمال کنید امکانش را نخواهید داشت و آن دستور روی کل متن اعمال خواهد شد. اما با استفاده span در میان یک تگ متن، می توان کلمه خاصی را استایل دهی کرد بدون آنکه محدوده متن را بهم بریزد! مثال:

<p>

سلام این یک متن است. شما می توانید در <span>تاکینا</span> به گشت و گذار بپردازید

</p>

در کد بالا ما کلمه "تاکینا" را در تگ span قرار دادیم. در حالت عادی و تا زمانی که استایلی برای آن تعریف نکنید، در خروجی سایت هیچ تفاوتی ایجاد نخواهد شد! اما شما می توانید توسط دستورات استایل، رنگ، حاشیه، پس زمینه، اندازه فونت و نوع فونت و ... را برای این کلمه تغییر دهید.