Display and Visibility در کد css

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

پنهان سازی عنصری در صحه سای می تواند به دو صورت زیر تعریف شود.

visibility: hidden;

display: none;

در هر دو صورت موجب پنهان سازی می شود اما با این تفاوت که در visibility: hidden; عنصر فضای اختصاص گرفته را می گیرد و تنها نمایش داده نمی شود. در display: none; عنصر فضایی را به خود اختصاص نمی دهد و صفحه سایت طوری به نمایش گذاشته می شود که گویی آن عنصر وجود ندارد.

خصیصه display: inline;موجب می شود که عناصر در یک خط قرار گیرند. برای مثال در تگ

  • آیتم ها را زیر هم نمایش می دهد. حال برای اینکه در یک خط نمایش داده شوند می بایست از خصیصه display: inline;استفاده نماییم.

 

خصیصه display: block; موجب می شود که بین دو بخش فاصله درج شود. تگ های

و

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

a {
display: block;
}

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