آشنایی با خصوصیت display در CSS

1395/9/24 علیرضا حاتمی نیا 2220

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

من علیرضا حاتمی نیا هستم با آموزشی دیگر از سری آموزش های طراحی وب در خدمت  شما هستم

در این جلسه با خصوصیت display در CSS آشنا میشویم تا از این پس آموزش ها در مسیر پروژه محور قرار بگیرند.

خصوصیت display :

معنی واژه display در انگلیسی "نمایش دادن یا نمایش" است و خصویت display در CSS برای نحوه نمایش یک عنصر در صفحه به کار می رود.

هر عنصر در صفحه (تصاویر، پاراگراف ها ، div ها و ....) یک مستطیل در صفحه وب  را در نظر می گیرد و نوع چهارچوب آن عنصر تعیین کننده رفتار آن عنصر در صفحه می باشد.

خصوصیت display در CSS مقادیر زیادی دریافت می کند که در ادامه با مهمترین و اصلی ترین آن ها آشنا می شویم.

مقدار block :

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

مثال:

HTML:

<div class="div1">
            Div1
</div>

<div class="div2">
            Div2
</div>

<div class="div3">
            Div3
</div>
Css:

.div1 {border: 2px solid red;}

.div2 {border: 2px solid black;}

.div3 {border: 2px solid blue;}

 

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

 

نکته:

بعضی از عناصر مانند <img> دارای مقدار inline به صورت پیش فرض هستند که با تعریف مقدار block برای display آن ها تغییر وضعیت در نمایش می دهند.

مقدار inline :

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

در مثال بالا به ترتیب مقادیر خصوصیت display را برای عناصر برابر inline قرار می دهیم.

Display:inline;

 

آموزش طراحی سایت

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

آموزش وب نویسی

نکته :

عناصری که مقدار display آن ها برابر inline می شود نمی توانند طول و عرض width و height بگیرند و تعریف مقدار طول و عرض برای آنها تاثیری نخواهد داشت. همچنین مقدار margin  و paddin  فقط برای چپ و راست آنها تاثیر دارند و برای عناصر بالا و پایین ها بی تاثیر است.

مقدار inline-block :

این مقدار دقیقا شبیه مقدار inline است با این تفاوت که تعریف مقدار برای طول و عرض (width,height) و همچنین margin  و padding در تمام جهت ها روی آن تاثیر دارد.

None :

مقدار none باعث عدم نمایش یک عنصر و تمامی فرزندان آن عنصر در صفحه می شود.

Display:none;   

                                                                                                                                                                               

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

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

دانلودPDF قسمت هفدهم آموزش طراحی وب

علیرضا حاتمی نیا
طراح و برنامه نویس وب
طراحی وبسایت های واکنش گرا
طراحی و پیاده سازی سیستم مدیریت محتوا
سئو و بهینه سازی سایت