معرفی و اموزش نرم افزار ها

اموزش و معرفی برنامه های اندروید و کامپیوتر

معرفی و اموزش نرم افزار ها

اموزش و معرفی برنامه های اندروید و کامپیوتر

خصوصیت های تگ div و span

هم راستای اموزش و معرفی تگ ها و خصوصیت ها در زبان های html و css که زبان های تحت وب هستند تصمیم داشتیم شما کاربران را با این خصوصیت های تگ div و span اشنا سازیم و به طور خلاصه از div برای ایجاد بلاک های غیر هم سطح نگهدارنده (container) سایر عناصر صفحه و از span برای ایجاد بلاک های هم سطح (inline) و معمولا برای نگهداری محتوای متنی استفاده می شود و در این مقاله خصوصیت تگ span و div را مورد بحث قرار خواهیم داد.

معرفی تگ <div>

به کمک تگ Div می‌توان بخش‌های مختلف صفحه را به طور جداگانه طراحی کرد و به عناصری که در آن Div قرار داده ایم با CSS سبک و استایل بدهیم. به عنوان مثال قسمت پایینی هر سایت (Footer) در کدهای HTML یک Div محسوب می‌شود که آیکون ها، متن و سایر المان هایی که در فوتر می‌بینید در آن دیو قرار می‌گیرند. با کمک Div عناصر قسمتی از صفحه که به دلخواه شما چیده شده اند، استایل می‌گیرند. همچنین تمامی بخش‌های یک صفحه مانند تصاویر، متن، دکمه و غیره با استفاده از این تگ قابل جداسازی هستند.

معرفی تگ <span>

از تگ span در HTML به منظور دسته بندی کردن عناصر درون خطی و اعمال استایل یا ویژگی خاص روی آن ها استفاده می‌‌شود.

کاربرد تگ <div>

همانطور که گفته شد از تگ div به منظور تقسیم بندی بخش های جداگانه از یک صفح وب و یا یک متن استفاده میشود و این تگ کاربردی ترین تگ در html است.

کاربرد تگ <span>

به منظور درک بهتر کاربرد تگ span در طراحی سایت به مثالی که برایتان می‌زنم توجه کنید فرض کنید که می‌خواهید متن یا محتوایی را در سایت خود منتشر کنید که بعضی از کلمات موجود در این متن با رنگی متفاوت نسبت به سایر کلمات نشان داده شوند، خب برای انجام این کار چه راه حلی به ذهن شما می‌رسد ؟ به چه طریقی می‌توانیم روی این کلمات استایلی متفاوت اعمال نماییم ?

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

به مثال زیر توجه کنید :