توانایی Display مشخص کننده نحوه نمایش یک عنصر در صفحه است و توانایی Visibility مشخص کننده قابل مشاهده بودن یا مخفی بودن یک عنصر است .
مخفی نمودن عناصر به وسیله CSS با استفاده از display:none , visibility:hidden
برای مخفی نمودن یک عنصر با استفاده از CSS میتوانید از دو توانایی display , visibility استفاده نمائید که هر یک دارای خصوصیات متفاوتی هستند.
با تعیین خصوصیت و توانایی display:none و یا visibility:hidden شما میتوانید یک عنصر را مخفی کنید اما نتایج متفاوت خواهند بود .
visibility:hidden
با استفاده از این روش عنصر نمایش داده نمیشود و در واقع مخفی میشود ولی همچنان مانند قبل دارای ( طول و عرض ) است . این عنصر بعد از مخفی شدن نیز فضای خود را از دست نمیدهد.
display:none
این توانایی عنصر را به صورت کامل حذف میکند به طوری که در نمایش صفحه شما اثری از عنصر حذف شده ملاحظه نخواهید کرد در صورتی که این عنصر در کدها و Source صفحه قابل ملاحظه خواهد بود .
آشنایی با عناصر Inline , Block
عناصر Block تمامی فضای کناری ( قبل و بعد – Before and After ) خود را اشغال می کنند ( full width ) و در ابتدا و انتهای این عناصر شکست خط ( Line Break – br ) انجام میگیرد و عناصر کناری با نیروی عناصر Block به خط و فضای سطح پایین تر حرکت میکنند.
تعدادی از عناصری که دارای خصوصیت Block هستند .
<h1> <p> <div> <li> <br/>
عناصر Inline به اندازه محتوای خود فضا را اشغال میکنند و دیگر عناصر کناری خود را با استفاده از شکست خط به فضای پایین تر حرکت نمیدهند .
تعدادی از عناصری که دارای خصوصیت Inline هستند .
<span> <a>
تغییر نحوه نمایش عناصر به وسیله خصوصیت Display در CSS
تغییر نحوه نمایش از حالت inline به block و یا بلعکس در طراحی وب سایت بسیار کاربردی خواهد بود و کمک بزرگی برای ساختن یک وب سایت استاندارد و حرفه ای میکند.
در مثال زیر خواهید دید با استفاده از تغییر خصوصیت پیش فرض اجزاء ( li ) یک لیست ( ul ) میتوانید یک منوی بسیار کاربردی بسازید.
li {display:inline;} li a {color:#0A0;font-weight:bold;}
<p>Display this link list as a horizontal menu:</p> <ul> <li><a href="/category/html/" target="_blank">HTML</a></li> <li><a href="/category/css/" target="_blank">CSS</a></li> <li><a href="http://www.webtarget.ir" target="_blank">طراحی وب سایت</a></li> </ul>
نمایش منوی ساخته شده با استفاده از خصوصیت display:inline برای لیست
وحید
18 May 2011
من موندم که چرا وبسایت به این باحالی با کلی آموزش مفید اینجا بوده و من هیچ اطلاعی ازش نداشتم؟
مطالبتون خیلی بدردم خورد.خیلی ازتون ممنونم
امیر سروری
18 May 2011
خواهش میکنم وحید جان ، شما لطف داری .
hadi
12 June 2011
داداش اگه برامون مثل اينها php هم آموزش بدي معركه هست
صابر
15 October 2011
واقعا آموزشتون محشره تا حالا آموزش css زو به این زیبایی و حرفه ای ندیده بودم دستتون درد نکنه
ali
14 January 2012
واقعا دستتون درد نکنه،خیلی خیلی خیلی سایت خوبی
دارید
وحید
18 January 2012
سلام میخواستم ازتون با این سایت خیلی خیلی خوبتون تشکر کنم
اگر میشه ایجاد عناصر شیشه ای در سایت رو آموزش بدین یعنی عناصری که اجزای زیرشون به صورت کدر معلوم باشه
برزین
20 July 2012
دوست عزیز من کد تغییر نحوه نمایش عناصر به وسیله خصوصیت Display در CSS
را با سی اس اس و بدون آن اجرا کردم تفاوتی نداره.
مهدی
16 December 2012
خیلی عالی بود!!!
ممنون میشم اگه منظم و سریالی هم بنویسید!!
نواحی
27 December 2012
این کامنت فقط به نشانه احترام به زحمات شما در جهت ارتقای وب فارسی ست.
misagh
20 June 2013
تشکر..مطالبتون خیلی مفیدند
خسته نباشید
آرش
11 January 2014
سلام
فرق بین inline با inline-block در چیست ؟
آیا من میتوانم از inline-block در ساخت منو استفاده کنم یا باید حتماً از inline استفاده کنم ؟
در چه جاهای میشود از inline استفاده کرد , و در چه جاهای میشود از inline-block استفاده کرد ؟
لطفاً من را راهنمایی کنید .
متشکرم .
samira
25 September 2014
خیلی عجیبه تو ایران یک سایت پیدا کنی که بدون اینکه ازت بخواد عضو شی مطالبش رو اونم به طور رایگان در اختیار کاربراش بزاره .
اونم مطالب به این کاملی .
بی نهایت به خاطر سخاوتتون سپاسگذاریم
نیما
18 February 2018
فقط میتونم بگم دمت گرم و سرت خوش باد