Layout - ویژگی display

Main Page Tutorial
موارد آموزشی
۱	خانه
۲	مقدمه
۳	شیوهٔ نوشتار
۴	انتخابگرها
۵	اضافه‌کردن CSS
۶	نظرات
۷	رنگ‌ها RGB HEX HSL
۸	پس‌زمینه‌ها رنگ پس‌زمینه‌ها تصویر پس‌زمینه تکرار پس‌زمینه پیوست در پس‌زمینه کوته‌شدهٔ پس‌زمینه
۹	کادرها عرض کادر رنگ کادر اطراف کادر کوته‌شدهٔ کادر کادر گرد شده
۱۰	حاشیه‌ها شکسته‌شدن حاشیه
۱۱	Padding
۱۲	ارتفاع/عرض
۱۳	Box Model
۱۴	Outline عرض Outline رنگ Outline کوته‌شدهٔ Outline Outline Offset
۱۵	متن رنگ متن آراستگی متن تبدیل‌کردن متن فاصله‌گذاری متن سایهٔ متن
۱۶	قلم‌ها خانواده قلم استایل قلم اندازهٔ قلم کوته‌شدهٔ قلم
۱۷	آیکن‌ها
۱۸	لینک‌ها
۱۹	لیست‌ها
۲۰	جداول
۲۱	ویژگی Display
۲۲	ویژگی Max-Width
۲۳	ویژگی Position
۲۴	ویژگی Overflow
۲۵	ویژگی Float ویژگی Clear مثال‌های Float
۲۶	مقدار Inline-block
۲۷	ترازکردن
۲۸	ترکیب کننده‌ها
۲۹	شبه کلاس
۳۰	شبه عنصر
۳۱	ویژگی Opacity
۳۲	نوار Navigation ناوبری ناوبری عمودی ناوبری افقی
۳۳	منو آبشاری
۳۴	گالری تصویر
۳۵	Image Sprites
۳۶	انتخاب‌گرهای خاصیت
۳۷	فرم‌ها
۳۸	شمارنده‌ها
۳۹	چیدمان وب‌سایت
۴۰	واحدها
۴۱	اولویت‌بندی
CSS پیشرفته
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

ویژگی displayمهمترین ویژگی CSS برای کنترل چیدمان (به انگلیسی: Layout) است.

ویژگی display

ویژگی displayمشخص می‌کند اگر/چطور یک عنصر نمایش داده شود.

هر عنصر HTML با توجه به نوع عنصر خود دارای یک مقدار پیش‌فرض display است. مقدار پیش‌فرض display برای بیشتر عناصر blockیا inline است.

40px ساخت نمونه مثال این بخش در دست اقدام است.

عناصر block-level (سطح بلوک)

یک عنصر block-level همیشه در یک خط جدید آغاز می‌شود و تمام عرض موجود را اشغال می‌کند (تا جایی که می‌تواند به سمت چپ و راست کشیده می‌شود).

عنصر <div> یک عنصر block-level است.

مثالهایی از عناصر block-level:

• <div>
• <h1> - <h6>
• <p>
• <form>
• <header>
• <footer>
• <section>

عناصر درون خطی (Inline)

یک عنصر درون خطی در ابتدای خط جدید آغاز نمی‌شود و تنها میزان عرض مورد نیاز را اشغال می‌کند.

این یک عنصر <span> از نوع درون خطی در داخل یک پاراگراف است.

مثالهایی از عناصر درون خطی:

• <span>
• <a>
• <img>

Display: none;

display: none; معمولاً با Javascript استفاده می‌شود و برای مخفی کردن و نمایش عناصر بدون حذف و ساخت مجدد آنها به کار می‌رود. اگر می‌خواهید بدانید که این کار چگونه انجام می‌شود نگاهی به آخرین مثال در این صفحه بی‌اندازید

عنصر <script> بطور پیش‌فرض از display: none; استفاده می‌کند.

نادیده گفتن مقدار پیش‌فرض Display

همان‌طور که گفته شد، هر عنصر یک مقدار پیش‌فرض display دارد. اما، می‌توان این مقدار را بازنویسی کرد.

تغییر یک عنصر درون خطی به یک عنصر سطح بلوک، یا برعکس، می‌تواند برای اینکه صفحه به شکل خاصی باشد و باز هم استانداردهای وب را رعایت کند، مفید باشد.

یک مثال رایج، تبدیل عناصر <li> برای منوهای افقی است:

مثال

li {
  display: inline;
}

مشاهدهٔ نتیجه

نکته: تنظیم ویژگی display یک عنصر تنها نحوه نمایش عنصر را تغییر می‌دهد، نه نوع عنصر را؛ بنابراین یک عنصر درون خطی با ویژگی display: block; اجازه ندارد که عنصر دیگری از نوع بلوک در درون خود داشته باشد.

مثال زیر عناصر <span> را همانند عناصر بلوک نمایش می‌دهد.

مثال

span {
  display: block;
}

مشاهدهٔ نتیجه

مثال زیر عناصر <a> را همانند عناصر بلوک نمایش می‌دهد.

مثال

a {
  display: block;
}

مشاهدهٔ نتیجه

مخفی کردن یک عنصر - display:none یا visibility:hidden؟

مخفی کردن یک عنصر می‌تواند با تنظیم ویژگی display برابر با none انجام شود. عنصر مخفی خواهد شد، و صفحه طوری نمایش داده می‌شود که گویی عنصر در آنجا وجود ندارد:

مثال

h1.hidden {
  display: none;
}

مشاهدهٔ نتیجه

همچنین visibility:hidden; نیز عنصر را مخفی می‌کند.

اما، عنصر همچنان فضا را مانند قبل اشغال خواهد کرد. عنصر مخفی خواهد شد، اما همچنان روی چیدمان تأثیر می‌گذارد:

مثال

h1.hidden {
  visibility: hidden;
}

مشاهدهٔ نتیجه

مثال‌های بیشتر

این مثال تفاوت دستور؛ display:none را در برابر؛ visibility:hidden را نمایش می‌دهد.

استفاده از CSS با javascript برای نمایش محتوا

این مثال نحوه استفاده از CSS و Javascript را برای نمایش یک عنصر هنگام کلیک برروی آن نمایش می‌دهد.

ویژگی‌های Display/Visibility در CSS

ویژگی	توضیحات
display	مشخص می‌کند که یک عنصر چگونه باید نمایش داده شود
visibility	مشخص می‌کند که یک عنصر باید نمایش داده شود یا خیر

صفحهٔ بعد»

«صفحهٔ قبل