تکنولوژی با طعم دوستی

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

در ادامه با کافه دوستی همراه باشید.

فرض کنید که قصد دارید متنی بنویسید که هر بخش از آن یک رنگ دارد. برای این کار می‌توانید همه را در یک تگ <p>بنویسید؛ ولی نتیجه‌ی نهایی یک رنگ دیده خواهد شد. راه حل دیگر نیز آن است که هر بار تگ <p> را ببندید و دوباره آن را باز کنید و به هر کدام یک استایل دلخواه بدهید! اگر جلسه‌های پیش را با دقت دنبال کرده باشید، می‌دانید که این راه حل هم قابل استفاده نخواهد بود؛ چرا که المان p جزء المان‌های بلاک است (در رابطه با این المان‌ها بعدا بیشتر توضیح خواهیم داد) و وقتی بسته می‌شود، المان بعدی را به خط بعدی هول می‌دهد. پس در این صورت متن شما تکه تکه خواهد شد. حالا دوست دارید بدانید که راه حل چیست؟

استفاده از المان Span

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

برای مثال ما می‌خواهیم متن زیر را با دو رنگ نمایش دهیم:

متن با رنگ و فونت دلخواه نوشته می‌شود.

برای این کار:

مرحله اول:‌ ابتدا تگ پاراگراف را باز می‌کنیم و متن را به طور کامل در آن تایپ می‌کنیم.

مرحله دوم:‌ بخشی از متن که می‌خواهیم رنگ و استایل متفاوتی داشته باشد را انتخاب کرده و در بین دو تگ <span></span> قرار می‌دهیم.

حالا نوبت به اضافه کردن استایل دلخواه به بخشی است که در درون تگ span قرار دارد. برای اضافه کردن استایل، از اتریبیوت استایل  " "= Style  استفاده می‌کنیم:

<p><span style="color: blue;">متنی که بین المان اسپن قرار می‌گیرد به رنگ آبی دیده خواهد شد</span></p>

استایلی که در این بخش قرار می‌گیرد(اکنون رنگ آبی تنها استایل ماست) با بخش‌های دیگر تگ پاراگراف متفاوت است.

مثال دیگری می‌زنیم. در این مثال قصد داریم علاوه بر رنگ متن فونت و نوع آن را نیز عوض کنیم. برای این کار ابتدا متن را با کمک <p></p> می‌نویسیم.

<p> متن با رنگ و فونت دلخواه نوشته شود</p>

 در قدم بعدی بخشی از متن را که قصد تغییر آن را داریم انتخاب کرده و دو طرف آن تگ <span> </span> قرار می‌دهیم. 

حال در آخرین مرحله، درون تگ استایل مشخصات مورد نظر  را به ترتیبی که پیش از این در بخش اتریبیوت‌ها یاد گرفته‌ایم وارد می‌کنیم.

<p>نوشته شود<span  style="color: red;  font-family: Yekan;">رنگ و فونت دلخواه</span>متن با</p>