آموزش تنظیمات نمایش display در css

بازدید: 553 بازدید
آموزش تنظیمات نمایش در css

با سلام خدمت شما همراهان همیشگی سایت پرنیان طرح

ویژگی نمایش یا display. همانطور که از نام آن پیداست برای تنظیم نحوه نمایش عناصر در صفحات وب به کار می رود.

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

در اموزش امروز قصد داریم خاصیت های این ویژگی، و تنظیماتی که میتوان با ان اعمال کرد را مرور کنیم.

همراه ما باشید در آموزش تنظیمات نمایش display در css.

نمایش display، یکی دیگر از چندین ویژگی هایی است که css در اختیار شما قرار می دهد.

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

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

در ادامه آموزش امروز همراه ما باشید.

 

 

تنظیمات نمایش

 

 

همه عناصر موجود در صفحات وب سایت، بسته به نوع خود، دارای یک مقدار نمایش پیشفرض هستند.

این مقدار پیشفرص برای اکثر عناصر، بلوک block یا دورن خطیinline است.

 

معرفی عناصری که دارای مقدار بلوک blockهستند:

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

  • <div>
  • <h1> – <h6>
  • <p>
  • <form>
  • <header>
  • <footer>
  • <section>

معرفی عناصری که دارای مقدار دورن خطی inline هستند:

عناصر درون خطی inline، از خط جدید شروع نمی شوند. و فقط تا حد لزوم کشیده می شوند.

  • <span>
  • <a>
  • <img>

 

خاصیت Display: none;

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

برای مثال عنصیر <script> یکی از عناصری است که مقدارپیشفرض آن none است.

 

نادیده گرفتن مقدار پیشفرض و اعمال تغییرات

همانطور که بالاتر گفته شد، هر عنصری دارای یک مقدار پیشفرض می باشد. css به شما امکان میدهد که این مقادیر را کنترل کرده و آنها را تغییر دهید.

تغییراتی مثل تبدیل کردن یک عنصر درون خطی inline، به یک عنصر بلوکی block. و بالعکس. و بسیاری تغییرات دیگر.

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

[php]
li {
display: inline;
}
[/php]

نتیجه را از این لینک مشاهده کنید.

[cdb_icon_box icon_style=”icon-font” icon=”fa fa-pencil-square-o” icon_position=”top” icon_type=”circle” icon_size=”icon-box-medium” title=”توجه داشته باشید که:” title_text_transform=”” title_text_font_weight=”” icon_color=”#1e73be” icon_background_color=”#e8c1b7″]تغییراتی که در display ایجاد میکنید، تنها نحوه نمایش المان ها را تغییر میدهد. نه نوع آنها را!

این یعنی یک عنصر درون خطی با ویژگی نمایش: block؛ مجاز به داشتن عناصر بلوک دیگر در داخل آن نیست.

مثال زیر عنصر <span> را به صورت بلوکی نمایش میدهد:

[php]
span {
display: block;
}
[/php]
نتیجه را از اینجا ببینید.[/cdb_icon_box]

پنهان کردن یک المان –  display:none یا visibility:hidden ؟

مخفی کردن یک عنصر، با تنظیم دستور display روی none امکان پذیر است. در این حالت عنصر غیر قابل دیدن است، به طوری که انگار المان آنجا نیست!

برای مثال:

[php]
h1.hidden {
display: none;
}
[/php]

نتیجه را از اینجا ببینید.

 

 

دستور visibility:hidden; نیز یک عنصر را پنهان می کند.

مثال زیر این دستور را نمایش می دهد:

[php]
h1.hidden {
visibility: hidden;
}
[/php]

نتیجه را از اینجا ببینید.

 

تمرینات بیشتر و مشاهده تفاوت بین dysplay:none و visibility:hidden

استفداه از css همراه با javascript برای نمایش دادن محتوا

 

میخواهم درباره نمایش display بیشتر بدانم.

دسته بندی آموزش css
اشتراک گذاری
مقالات مرتبط

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

سبد خرید

هیچ محصولی در سبد خرید نیست.