در جلسه قبل از آموزش CSS با انواع فرمت بندی بصری در CSS آشنا شدید. در این بخش قصد داریم شما را با خصوصیت Display در CSS آشنا کنیم.
خصوصیت display در css ، نوع نمایش جعبه ایجاد شده توسط المان را کنترل می کند.
خصوصیت display در css :
زبان CSS مقدار نمایش پیش فرض را برای تمامی المان ها تعریف می کند. به عنوان مثال المان Div به عنوان بلوک رندر می شود این در حالیست که المان Span به صورت Inline نمایش داده می شود.(در بخش قبلی فرمت بندی بصری در CSS در این باره صحبت کردیم)
تغییر مقدار پیش فرض نمایش:
تغییر مقدار پیش فرض نمایش یک المان می تواند دستکاری مهمی باشد. به عنوان مثال تغییر المان سطح Inline برای نمایش بلوکی یا تغییر المان سطح بلوک برای نمایش inline می تواند موضوع مهمی باشد.
نکته: خصوصیت display یکی از قدرتمندترین و مفید ترین خصوصیت ها در زبان CSS است. این گزینه برای ایجاد صفحات وب که ظاهر متفاوتی دارند و در عین حال از استانداردهای وب تبعیت می کنند بسیار عالی است.
نمایش بلوک :
مقدار بلوک خصوصیت display در css، المان را مجبور می کند همانند المان در سطح بلوک (block) رفتار کند. قانون سبک دهی در مثال زیر المان های <span> و <a> را به عنوان المان سطح بلوک نمایش می دهد:
|
1 2 3 4 5 6 |
span { display: block; } a { display: block; } |
نکته: تغییر نوع نمایش المان تنها رفتار نمایش یک المان را تغییر می دهد و نوع المان را تغییر نخواهد داد. به عنوان مثال المان Inline(درون خطی) که بر روی display: block تنظیم شده است نمی تواند المان های دیگر بلوکی را در خود جای دهد.
نمایش درون خطی:
مقدار درون خطی خصوصیت display در css باعث می شود یک المان به عنوان المان سطح درون خطی (inline) رفتار کند. قانون سبک دهی در مثال زیر المان های p و li را به عنوان المان inline (درون خطی) نمایش می دهد:
|
1 2 3 4 5 6 |
p { display: inline; } ul li { display: inline; } |
امکان تغییر ابعاد این المان ها (درون خطی) وجود ندارد و نسبت به محتوای قرار گرفته داخل المان رشد می کنند.
نمایش بلوکی- درون خطی:
مقدار بلوکی-درون خطی از خصوصیت display باعث می شود المان جعبه بلوکی را ایجاد کند که با محتوای اطرافش سرریز خواهد شد.
قانون استایل دهی زیر المان های Div و Span را به عنوان بلوکی- درون خطی نمایش می دهد.
|
1 2 3 4 5 6 |
div { display: inline-block; } span { display: inline-block; } |
به این معنا که هر دو خاصیت سطح بلوک و درون خطی را یکجا دارند با این تفاوت که کل سطر را نمی گیرند ولی بدلیل داشتن خاصیت block امکان تغییر ابعاد آنها با ویژگی های height , width وجود دارد
display: none
مقدار None باعث می شود المان اصلا جعبه ای ایجاد نکند. المان های اولاد نیز هیچ جعبه ای ایجاد نخواهند کرد حتی اگر خصوصیت Display آن ها چیزی به جز None باشد. به مثال زیر توجه کنید:
|
1 2 3 4 5 6 |
h1 { display: none; } p { display: none; } |
نکته: مقدار None برای خصوصیت Display جعبه نامرئی ایجاد نمی کند. این مقدار اصلا جعبه ای تولید نمی کند. پس المان مورد نظر در صفحه خروجی وب نمایش داده نخواهد شد و هیچ فضایی را هم اشغال نمی کند.
مقادیر زیاد دیگری مثل flexbox , grid هم وجود دارد که سعی خواهد شد در بخش های دیگری از این سری آموزش قرار بگیرد.
امیدوارم در این بخش آموزش CSS, از خصوصیت display در css نهایت استفاده را برده باشید.
در بخش بعدی با ویژگی Visibility در CSS آشنا می شویم.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق باشید.
