آشنایی با Display , Visibility در CSS

توانایی 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>