دامنه (span)
«تگ span» یک ظرف «درون خطی (Inline)» است. یعنی کنار متن می نشیند و خط جدید نمی سازد. با «کلاس (class)» یا «شناسه (id)» می توانیم آن را با CSS استایل دهی کنیم یا با جاوااسکریپت دست کاری کنیم. مثل هایلایت کردن یک کلمه در انشا.
تعریف تگ span و کاربرد آن
تگ «دامنه (span)» بخشی از متن یا سند را علامت گذاری می کند. سپس با CSS رنگ، اندازه یا فونت آن قسمت را تغییر می دهی. همچنین با جاوااسکریپت می توانی روی همان بخش رویداد بگذاری.
نمونه ساده با رنگ متن
<p>
My mother has <span style="color:blue">blue</span> eyes.
</p>
span در برابر div؛ فرق مهم
«div» یک «بلوک (Block)» است و خط جدید می سازد. اما «span» درون خطی است و وسط جمله می آید. بنابراین برای تکه های کوتاه متن از «تگ span» استفاده کن و برای بخش بندی بزرگ از div.
ویژگی ها و رویدادها
تگ span از ویژگی های سراسری و ویژگی های رویدادی پشتیبانی می کند. پس می توانی کلاس بدهی، id تعیین کنی و رویدادهایی مثل onclick تنظیم کنی.
گام های عملی سریع
- متن را بنویس و بخش مهم را با «span» بگیر.
- کلاس بده و در CSS استایل بساز.
- در صورت نیاز، رویداد جاوااسکریپت اضافه کن.
لینک های داخلی مرتبط با تگ span
جمع بندی سریع
- span درون خطی است و خط جدید نمی سازد.
- برای تکه های کوتاه متن عالی است.
- با CSS و JS به راحتی کنترل می شود.
- برای بخش های بزرگ، از div استفاده کن.