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

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

دسته بندی موضوعات
سفارش تبلیغات

display در CSS

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 صحبت میکنیم.

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

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

دموی آنلاین

<<

>>

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید



سفارش تبلیغات

گردآوری و تالیف : میترا رحیمی

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مدرس و مسلط به برنامه نویسی سمت سرور با PHP MVC و برنامه نویسی سمت کلاینت با html 5 , css3 , jquery , مبانی سئو و سیستم مدیریت محتوای وردپرس

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

لطفا تنها دیدگاه خود را در رابطه با این مطلب ارسال نمایید، سوالات را از طریق سامانه پرسش و پاسخ مطرح نمایید. سوالات در دیدگاه ها تایید نخواهد شد.

  • رسولی

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

    • میترا رحیمی

      سلام دوست عزیز
      انشالله به زودی تکمیل خواهد شد.
      موفق باشید.

  • hassany

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

    • میترا رحیمی

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

  • hassany

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

  • علی احمدی

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

    • حسین همت یار

      سلام ، از سایت fontyab.com میتونین استفاده کنین . تشکر

  • تجهیزات آشپزخانه

    خیلی عالی تشکر ولی لطفا بیشتر در مورد display:flex توضیح اضافه بفرمایید

وبلاگ مدرسه

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

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

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

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟