تفاوت div و span در طراحی وب

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



دانلود فیلم آموزش تفاوت div و span در طراحی وب – حجم 22 مگ

[quote font_size=”14″ bgcolor=”#” color=”#000″ bcolor=”#” arrow=”no”]فایل ویدئویی آموزشی و متن زیر، دقیقا یک محتوا را توضیح میدهند. ولی توضیحات فایل‌ ویدئویی جامع‌تر و دقیق‌تر می‌باشد. از هرکدام که راحت تر هستید برای یادگیری‌ استفاده کنید و لذت ببرید :)[/quote]

تفاوت div و span در طراحی وب

شاید برایتان سوال باشد که چه زمان هایی باید از تگ div و چه زمان هایی باید از تگ span  استفاده کنیم. در این بخش به بررسی این موضوع میپردازیم و میفهمیم که کاربرد و تفاوت div و span در دنیای طراحی وب چیست؟

تفاوت المان های inline و block

در دنیای طراحی وب ما با دو نوع از المان ها همیشه سر و کار داریم:

  1. المان های in-line
  2. المان های block

المان های in-line المان هایی هستند که اگر قبل و بعد از آن ها متنی قرار دهیم، تمام آن متن را در یک خط قرار میدهند. مثل تگ span.

اما المان های block به این صورت هستند که اگر قبل و بعد از آن‌ ها متنی قرار دهیم، آن محتوایی که بین آن تگ block نوشته شده است، برای ما در یک خط جدید آورده میشود. مثل تگ div, p, h1, h2 و… .

در تصویر زیر و همانطور در فیلم آموزشی بالا این موضوع بهتر توضیح داده شده است:

تفاوت div و span

کاربرد تگ div

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

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

تفاوت div و span

کاربرد تگ span

اما از تگ span زمانی استفاده میشود که بخواهیم به یک قسمت خاص از متن،‌ یک استایل خاص بدهیم.

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

مانند تصویر زیر که نوشته «مرکز آموزشی زنبیل» را داخل یک تگ span قرار داده ایم و سپس به آن استایل متفاوت داده‌ایم تا به شکل دیگر، نمایش داده شود:

تفاوت div و span

 

طراحی یکسان در مرورگرهای مختلف با CSS Reset ها

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

dl-btnدانلود فیلم آموزشی معرفی و کار با CSS Reset ها با کیفیت بالا (با حجم 15 مگ)dl-btn
dl-btnدانلود فایل reset.cssdl-btn

آموزش متنی

برای کار با CSS Reset ها فقط کافی است کدهای CSS Reset  را از لینک بالا دانلود کنید و آنرا با دستور import@ در اول فایل CSS اصلی خودتان لود کنید :

@import "reset.css";

CSS Reset خودتان را همچنین میتوانید در اول فایل HTML خود با دستور link لود کنید ولی در دنیای طراحان وب مرسوم است که CSS Reset خود را در فایلی جداگانه با اسم reset.css ذخیره میکنند و بعد آن فایل را در ابتدای فایل استایل اصلی خودشان با دستور بالا وارد میکنند.

توجه کنید که شما میتوانید CSS Reset را با توجه به نیاز و پروژه خودتان دست‌کاری کنید و قسمت‌هایی از آن که کار شما را خراب میکنند حذف و یا قسمت‌های جدید که کار شما را توسعه می‌دهند به آن اضافه کنید.