11 - Divs & Spans

به نام ایزد دانا

در این پست آموزشی در مورد Divs ها و Spans ها صحبت خواهیم کرد.

البته کمی هم به یادآوری Block Element , Inline Element ها می پردازیم.

امیدوارم این مطلب براتون مفید باشه و یادتون نره برای ما نظرات و انتقاداتتون رو ارسال کنید.

اگر سوال یا هر حرفی دارید میتونید به ایمیل من به آدرس ARiyou.public@gmail.com و یا در شبکه های اجتماعی با شناسه (ID | User name) زیر منو پیدا کنید

Telegram, Twitter, Facebook & ... By : @ARiyou2000

با تشکر از همه شما دوستان، آریو جهان

دیگه بریم سر اصل مطلب

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

عنصر Block Element چیست و چه فرقی با Inline Element دارد؟

2 دسته مهم از المان هایی که در HTML از آن ها استفاده می کنیم، المان های بلاکی (Block element) و المان های درون خطی (Inline element) هستند.

• المان های بلاکی

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

• المان های درون خطی

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

تگ Div یا Division در HTML چیست ؟

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

تگ Span در HTML چیست ؟

به کمک تگ span می توان به هر عنصر مستقل و بدون تغییر دادن سایر عناصر استایل داد. به عنوان مثال می توانید این تگ را برای یک پاراگراف <P> در کدهای خود استفاده کرده و استایل آن را تغییر دهید بدون اینکه سایر متن ها تغییری کنند.

تفاوت تگ Div با Span چیست ؟

زبان HTML به شما در شکل دهی ساختار یک صفحه کمک می کند و برای استایل دادن و افزودن ویژگی های ظاهری به صفحات سایت، باید از CSS کمک بگیرید. تگ div و تگ span در کنار CSS کاربرد زیادی دارند و در بسیاری از موارد کار طراحان وب را ساده می کنند. تا این قسمت از مطلب با کاربرد تگ ها آشنا شدیم. در لیست زیر تفاوت تگ Div و Span را بررسی می کنیم:

• تگ Div:
  تگ Div یک المان بلاکی است.
  Div برای استایل دادن به کادرهای موجود در صفحه که دارای المان های مختلفی هستند، به کار می رود.
  
• تگ Span :
  Span یک المان درون خطی است.
  این تگ برای استایل دادن به عناصر صفحه به کار می رود.
  

جمع بندی

پس به این نتیجه رسیدیم که تگ دیو در HTML برای سازمان دهی المان های مختلفی که در خود جای داده به کار می رود. درحالیکه تگ Span برای سازمان دهی متن در همان خط از کد استفاده می شود. اگرشما هم تعریف دیگری از تفاوت این دو تگ دارید خوشحال می شویم با خوانندگان در میان بگذارید.

با تشکر از سون-لرن.

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

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

مثل همیشه نظراتونو می‌خونم و جواب می‌دم و اگه از نوشته‌هام خوشتون اومد او قلب تو خالیه‌ رو قرمز کنین برام و دنبالم کنید تا انگیزه داشته باشم بنویسم❤️

شب و روزگار بر شما خوش.

بدرود.

ARiyou Jahan ‏12/01‏/2019‏ 10:34 ب.ظ