آموزش نمایش در CSS به زبان ساده

رتبه: 0 ار 0 رای sssss
CSS
نویسنده: تیم تولید محتوا زمان مطالعه 3 دقیقه

ویژگیdisplay ، نوع جعبه تولید شده توسط یک عنصر را کنترل می کند.

ویژگیdisplay در CSS

ویژگی های CSS برای همه عناصر یک مقدار نمایش پیش فرض تعریف می کند، به عنوان مثال عنصر <div> به صورت بلوکی ارائه می شود، در حالی که عنصر <span> بصورت خطی در صفحه نمایش داده می شود.

تغییر مقدار پیش فرض نمایش

بازنویسی مقدار نمایش پیش فرض یک عنصر، یک اثر مهم از ویژگیdisplay است. به عنوان مثال، یک عنصر سطح خطی را به عنوان یک عنصر سطح بلوک تغییر می دهد و یا عنصر سطح بلوک را به صورت یک عنصر سطح خطی نمایش می دهد.

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

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

نمایش بلوکی

مقدار block  برای ویژگی display، یک عنصر را مجبور می کند تا مانند یک عنصر سطح بلوک مانند عنصر <div> یا <p> رفتار کند. قوانین سبک در مثال زیر عناصر <span> و <a> را به عنوان عناصر سطح بلوک تعریف می کند:

مثال

span {

display: block;

}

a {

display: block;

}

توجه: تغییر نوع نمایش یک عنصر، نوع عنصر را تغییر نمی دهد و فقط باعث تغییر در شیوه نمایش عنصر می شود. به عنوان مثال، با تغییر نمایش یک عنصر خطی به بلوکی، عنصر خطی مجاز به داشتن یک عنصر بلوک در داخل خود نیست.

نمایش خطی

مقدارinline  برای ویژگی display  باعث می شود عنصر به صورت یک عنصرخطی، مانند <span> یا <a> رفتار کند. قوانین سبک در مثال زیر عناصر <p> و <li> را به عنوان عناصر سطح خطی نشان می دهد:

مثال

p {

display: inline;

}

ul li {

display: inline;

}

نمایش خطی-بلوکی

مقدار inline-block  برای ویژگیdisplay  باعث می شود تا عنصر یک جعبه بلوک ایجاد کند که دور محتوای آن کشیده می شود، یعنی در همان خط در کنار بقیه مطالب. قوانین سبک زیر عناصر <div> و <span> را به صورت خطی-بلوکی نمایش می دهد:

مثال

div {

display: inline-block;

}

span {

display: inline-block;

}

نمایش none

مقدارnone  به سادگی باعث می شود تا یک عنصر به هیچ وجه جعبه ایجاد نکند. عناصر فرزند هیچ جعبه ای را ایجاد نمی کنند، حتی اگر ویژگی نمایش آنها چیزی غیر ازnone  باشد. این سند به گونه ای ارائه می شود که گویی این عنصر در درخت سند وجود ندارد.

مثال

h1 {

display: none;

}

p {

display: none;

}

توجه: مقدار none برای ویژگی display جعبه نامرئی ایجاد نمی کند –این مقدار به هیچ وجه جعبه ای ایجاد نمی کند.

برچسب : سی اس اس
profile name
تیم تولید محتوا

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

مطالب پیشنهادی برای شما

محصولات مرتبط

مشاهده همه

دیدگاهتان را بنویسید

1 2 3 4 5

0 نظر درباره «آموزش نمایش در CSS به زبان ساده»

    هنوز نظری برای این بخش ثبت نشده است
مشاهده همه نظرات
سبد خرید
سبد خرید شما خالی است
× جهت نصب روی دکمه زیر در گوشی کلیک نمائید
آی او اس
سپس در مرحله بعد برروی دکمه "Add To Home Screen" کلیک نمائید