جلسه ی بیست و هفتم: خاصیت Display در CSS

خاصیت Display در CSS

همانطور که در آموزش های قبلی در مورد زبان نشانه گذاری Css صحبت کردیم مشاهده نمودید که هر یک از خاصیت های این زبان حالت خاصی به صفحه ما اضافه می کنند خاصیت Display یکی از همین خاصیت هاست.

Display چیست؟

خاصیت Display در لغت به معنای نمایش دادن است که به تنظیم نوع نمایش عنصر می پردازد. عموما عنصر در خاصیت Display هر یک دارای حالت خاصی هستند که به صورت پیشفرض بر روی آن ها وجود دارد. معمولا اکثر عناصر دارای حالت inline و Block می باشند البته نا گفته نماند که مهم ترین حالت عناصر همین حالت می باشند.

کاربرد خاصیت Display

زمانی که از این استفاده میکنیم می خواهیم نوع نمایش یک عنصر را از حالت پیشفرض اش تغییر دهیم. از طریق این می توانیم عناصر مورد نظر خود را مخفی کنیم یا نمایش دهیم و یا می توانیم به عناصر مورد نظر خود خاصیت عناصر یک جدول را بدهیم.

انواع حالت های خاصیت Display

این خاصیت حالت های بسیار زیادی دارد اما ۶ حالت زیر مهمترین و پر کاربرد ترین حالات آن می باشند که عبارتنداز:

  1. Inline
  2. Block
  3. None
  4. List-item
  5. Table
  6. Inlin-table

 

خاصیت Display:inline

به وسیله ی خاصیت Display:inline می توان عناصر مورد نظر خود را در صورت وجود فضای کافی در یک راستا قرار داد. یعنی در این ویژگی تمامی عناصر مورد نظر ما در یک راستا قرار خواهند داشت.

نکته: این حالت به نوعی صرفه جویی در استفاده از مکان می باشد یعنی زمانی که از این ویژگی استفاده می کنیم عنصر مورد نظر ما کمترین میزان حجم در صفحه را برای نمایش به خود اختصاص می دهد و فقط به میزان محتوای خود فضا اشغال می کند.

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

نمونه کد HTML:

<i>در <h2 class="kamyabiha">وب سایت کمیابی ها</h2> به آموزش طراحی سایت می پردازیم</i>

نمونه کد CSS:

h2.kamyabiha {

  display: inline;

  color:blue;

}

خروجی کد بالا:

خاصیت Display:inline در CSS

 

همانطورکه در بالا می بینید از یک تگ i که درون آن یک تگ H2 با کلاس kamyabiha قرار دارد استفاده شده است. همه ی ما می دانیم که تگ h2 یکی از عناصر Block می باشد و تمام فضای افقی را اشغال می کند اما به کمک استایل Display:inline می توانیم تگ h2 را به یک عنصر درون خطی تبدیل نماییم مانند مثال بالا.

 

خاصیت Display:block

خاصیت Display:block عموما برعکس حالت inline می باشد. در این ویژگی عموما هر عنصر در یک بلاک قرار می گیرد و تمامی فضای افقی را بدون در نظر گرفتن محتویات خود اشغال می کند. این ویژگی عموما حالت پیشفرض بسیاری از عناصر ما می باشد برای مثال تگ p یا  Heading ها عموما از این ویژگی تبعیت می کنند.

حال ممکن است در مکان هایی ما نیاز داشته باشیم عناصری که خاصیت Display:inline را دارند به block تبدیل شوند. در این صورت ما از کد Display:block استفاده می نماییم. به نمونه کد زیر توجه کنید:

نمونه کد HTML:

<p>در <i class="kamyabiha">وب سایت کمیابی ها</i> به آموزش طراحی سایت می پردازیم</p>

نمونه کد CSS:

i.kamyabiha {

  display: block;

  color:blue;

  font-weight: bold;

  padding: 20px 0

}

خروجی کد بالا:

خاصیت Display:block در CSS

تگ p یکی از تگ هایی می باشد که که به صورت پیشفرض دارای ویژگی Block می باشد درون این تگ از یک تگ i که از عناصر inline و دارای کلاس kamyabiha می باشد استفاده شده است. در این مثال ما به یک عنصر inline خاصیت Display:block را افزوده ایم و یک فاصله ی ۲۰px به بالا و پایین این مبحث اضافه نموده ایم.

 

تفاوت حالت های inline و Block

عموما متوجه شده اید که عناصر یا جز دسته ی block هستند یا inline عموما زبان CSS رفتار مشابهی با این دو حالت را دارا می باشد. برای مثال شما می توانید برای هر دوی این حالات عرض، ارتفاع، رنگ، اندازه و… را تعییین کنید اما در مواردی مانند margin و یا padding ممکن است به مشکل بخورید.

برای حل این مشکل کافیست مقدار خاصیت Display خود را به inline-block تغییر دهیم. مانند نمونه کد زیر:

Display: inline-block

خاصیت Display:none

از خاصیت Display:none زمانی استفاده می کنیم که می خواهیم عنصر مورد نظر ما بر روی صفحه نمایش داده نشود. این حالت به معنا نیست که عنصر مورد نظر ما حذف شود فقط به صورت موقت از دید عموم خارج شده است.

نکته: یادتان باشد زمانی که از خاصیت Display:none استفاده می کنیم علاوه بر خود عنصر مورد نظر ما فضای اشغال شده توسط آن نیز پنهان می شود و جای خود را به یک عنصر دیگر می دهد. به نمونه کد زیر توجه کنید:

<img src="image/img.jpg" alt="" class="ab" width="284px" height="177px">
<img src="image/img2.jpg" alt="" class="aa" width="284px" height="177px">

خروجی کد بالا:

خاصیت Display:none در CSS

این حالت اولیه ی عکس ما می باشد در صورتی که اگر از خاصیت بالا ستفاده کنیم عکس اول به همراه مکان خود حذف می شود. حال به ادامه ی کد توجه کنید:

.ab {

  display: none

}

خروجی بعد از اعمال کد بالا:

خاصیت Display:none در CSS

 

خاصیت Display:list-item

زمانی که خاصیت Display:list-item استفاده می کنیم عنصر یا عناصر مورد نظر ما مانند یک لیست نمایش داده می شوند. این خاصیت مانند یک تگ li عمل می کند با این تفاوت که در زبان CSS می باشد. البته عموما از این ویژگی زبان CSS استفاده نشده و به جای آن از تگ li استفاده می کنیم، اما لازم است بدانید که این خاصیت وجود دارد.

 

خاصیت Display:table

خاصیت Display:table عنصر یا عناصر مورد نظر ما را به یک جدول تبدیل می کند ولی از تگ Table استفاده نمی کند. مشابه این خاصیت در زبان نشانه گذاری Html تگ table می باشد. (برای دیدن آموزش تگ Table کلیک کنید)

حالت هایی در زبان CSS وجود دارد که مشابه آن ها در زبان HTML نیز هستند برخی از این خاصیت ها عبارتند از:

  1. table (css) = <table> (HTML)
  2. table-row-group (css) = <tbody> (HTML)
  3. table-column (css) = <col> (HTML)
  4. table-column-group (css) = <colgroup> (HTML)
  5. table-header-group (css) = <thead> (HTML)
  6. table-footer-group (css) = <tfoot> (HTML)
  7. table-row (css) = <tr> (HTML)
  8. table-cell (css) = <td> (HTML)
  9. table-caption (css) = <caption>

 

خاصیت Display:inline-table

برای خاصیت Display:inline-table در زبان CSS عموما ما مشابهی در زبان HTML نداریم زیرا این عنصر در کنار خاصیت جدول خاصیت inline و یا همان هم سطح بودن را به عنصر اضافه می کند.

 

خلاصه مطلب:

  1. خاصیت Display در لغت به معنای نمایش دادن است که به تنظیم نوع نمایش عنصر می پردازد. عموما عنصر در این خاصیت هر یک دارای حالت خاصی هستند که به صورت پیشفرض بر روی آن ها وجود دارد.
  2. زمانی که از از این خاصیت استفاده میکنیم می خواهیم نوع نمایش یک عنصر را از حالت پیشفرض اش تغییر دهیم.
  3. به وسیله ی خاصیت Display:inline می توان عناصر مورد نظر خود را در صورت وجود فضای کافی در یک راستا قرار داد.
  4. خاصیت Display:block عموما برعکس حالت inline می باشد. در این ویژگی عموما هر عنصر در یک بلاک قرار می گیرد و تمامی فضای افقی را بدون در نظر گرفتن محتویات خود اشغال می کند.
  5. در خاصیت Display هنگام تغییر اندازه ی مواردی مانند margin و یا padding ممکن است به مشکل بخوریم. برای حل این مشکل کافیست مقدار خاصیت خود را به inline-block تغییر دهیم.
  6. از خاصیت Display:none زمانی استفاده می کنیم که می خواهیم عنصر مورد نظر ما بر روی صفحه نمایش داده نشود.
  7. یادتان باشد زمانی که از خاصیت Display:none استفاده می کنیم علاوه بر خود عنصر مورد نظر ما فضای اشغال شده توسط آن نیز پنهان می شود.
  8. زمانی که خاصیت Display:list-item استفاده می کنیم عنصر یا عناصر مورد نظر ما مانند یک لیست نمایش داده می شوند.
  9. خاصیت Display:table عنصر یا عناصر مورد نظر ما را به یک جدول تبدیل می کند ولی از تگ Table استفاده نمی کند.
  10. برای خاصیت Display:inline-table در زبان CSS عموما ما مشابهی در زبان HTML نداریم زیرا این عنصر در کنار خاصیت جدول خاصیت inline و یا همان هم سطح بودن را به عنصر اضافه می کند.
ابوالفضل کلهری

فعال در زمینه های ui و ux و طراحی وب سایت مسلط به زبان های نشانه گذاری HTML و CSS و همچنین در زمینه ی آموزش زبان های HTML و CSS نیز فعالیت دارم . امیدوارم با آموزش هایی که در این سایت قرار می دهم موجب پیشرفت شما عزیزان باشم.

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