آموزش طراحی وب

display در CSS

در این جلسه ی آموزشی در رابطه با display و مقادیر این خاصیت صحبت می کنیم . این خاصیت ۱۸ مقدار داره که همراه با مثال و دموی انلاین این مقادیر رو توضیح دادیم .

display

فصل چهارم : Properties در CSS

جلسه بیست و سوم  : display در CSS

سلام به همراهان همیشگی مدرسه مجازی ایرانیان

در این جلسه ی آموزشی در رابطه با display و مقادیر این خاصیت صحبت می کنیم .

 

خاصیت display

با استفاده از خاصیت display شما میتونید عناصر رو مخفی کنید و یا نمایش بدید ، و میتونید خاصیت block و inline رو در عناصر تنظیم کنید ، پیشنهاد می کنم برای اینکه در رابطه با عناصر block و inline بطور کامل اطلاعات کسب کنید جلسه ی ” عناصر Block و inline در HTML ” رو مطالعه بفرمایید.

 

مقادیر خاصیت display

خاصیت display شامل مقادیر زیر میشه :

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

block : این مقدار به عنصر خاصیت block میده . عناصری که block باشند یک خط کامل رو اشغال میکنند بدون اینکه توجهی به اندازه ی محتوای درونشون داشته باشند .

flex : این مقدار در css3 به display اضافه شد . این مقدار در مرورگرهای IE9 به پایین و safari پشتیبانی نمیشه . flex عرض بلاک هارو نسبت به هم تنظیم میکنه . در رابطه با این مقدار در جلسات آینده به طور کامل صحبت خواهیم کرد .

inline-block : این مقدار به عنصر هم خاصیت inline میده و هم block . اگر جلسه ی ” عناصر Block و inline در HTML ” رو کامل مطالعه کرده باشید متوجه میشید که فرق این دو مقدار در چیه .

inline-flex : این مقدار هم در css3 روی کار اومد که به عنصر هم خاصیت inline رو میده و هم flex .

inline-table : این مقدار به عنصر هم خاصیت inline رو میده و هم خاصیتی که یک جدول داره به عنصر اختصاص میده.

list-item : این مقدار خاصیت لیست شدن به عناصر میده . مانند یک لیست که با li ایجاد می کنید.

run-in : این مقدار چندان استفاده ای نداره . هم خاصیت inline و هم خاصیت block رو به عنصر میده ، بستگی به خود عنصر داره که از جنس inline باشه و یا از جنس block باشه . در کل کار خاصی انجام نمیده مگر اینکه مثلا در ابتدای css تون به عنصر p مقدار inline رو داده باشید و در جای دیگه ای از استایلتون بخواین خاصیت اصلی p رو بهش برگردونید یعنی همون block ؛ در این صورت از این مقدار استفاده می کنید که بازهم میتونید از همون block استفاده کنید .

table : خاصیتی که یه table داره به عنصر میده . عنصر table خاصیت block داره پس عنصری که display اون برابر با table باشه خاصیت block میگیره.

table-caption : خاصیتی که یک caption جدول داره رو به عنصر اختصاص میده .

table-column-group: خاصیتی که یک عنصر colgroup داره به عنصر اختصاص میده .

table-header-group  : خاصیتی که یک عنصر thead داره به عنصر میده .

table-footer-group : خاصیتی که یک عنصر tfoot داره به عنصر میده .

table-row-group : خاصیتی که یک عنصر tbody داره به عنصر میده .

table-cell : خاصیتی که یک عنصر td داره به عنصر میده .

table-column : خاصیتی که یک عنصر col داره به عنصر میده.

table-row : خاصیتی که یک عنصر tr داره به عنصر میده.

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

 

 برای درک بهتر این مقادیر میتونید دموی آنلاین رو مشاهده کنید .

خوب امیدوارم این مقاله براتون مفید بوده باشه. در جلسه ی آینده راجع به visibility صحبت میکنیم.

موفق و پاینده باشید 🙂

تهیه شده در مدرسه مجازی ایرانیان

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۹

  • با عرض سلام
    تشکر از مطلب عالی تان
    میخواستم بگویم لینک های
    قوانین در CSS ، کلاس های کاذب ، قواعد چاپ ، محتوای داینامیک و Media Qury
    خراب است و کار نمی دهد.

  • سلام
    وقتی میگیم display:inline-block یعنی چی؟
    بالاخره یه عنصر یا inline هستش یا block دیگه میشه اینو برای من توضیح بدین؟
    در ضمن درباره display:flex هم اگه میشه یه کم بیشتر توضیح بدین.

    • سلام دوست عزیز
      در رابطه با display:flex باید بصورت مجزا یه مطلب آموزشی در سایت قرار بدم.
      زمانی که عنصر inline باشه مثل span ها یه سری از خصوصیات css رو به خودش نمیگیره مثل margin-top و برای اینکه تمامی خصوصیات رو بگیره مثل عناصر block میایم بهش خاصیت inline-block میدیم که هم خاصیت inline ی خودش و حفظ کنه هم خاصیت block یی بگیره.
      موفق و پاینده باشید

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

  • سلام
    آقای همت یار سایت خیلی حرفه ای و خوب است
    زحمت زیادی کشیدین
    میخواستم برای توسعه سایتم یک تعداد فونت خوب و قشنگ فارسی پیشنهاد کنین
    با تشکر

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

آخرین پرسش و پاسخ ها

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

ما هم مثل شما از دریافت ایمیل های مزاحم خوشمون نمیاد. فقط مطالب جدید و خبرهای ویژه رو به اطلاع شما میرسونیم. قول میدیم اسپم نکنیم :)

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