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

مخفی نمودن عناصر به وسیله CSS با استفاده از display:none , visibility:hidden


امیر سروری 13 دیدگاه CSS , HTML , اصول طراحی وب سایت Friday, 6th May , 2011 27262 بازدید

توانایی 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 برای لیست



نویسنده / مترجم : امیر سروری

امیر سروری هستم علاقه مند به بازاریابی و تبلیغات آنلاین , طراحی وب سایت و البته آموزش


13 دیدگاه برای این نوشته ثبت شده است


  1. وحید
    18 May 2011

    من موندم که چرا وبسایت به این باحالی با کلی آموزش مفید اینجا بوده و من هیچ اطلاعی ازش نداشتم؟
    مطالبتون خیلی بدردم خورد.خیلی ازتون ممنونم




  2. hadi
    12 June 2011

    داداش اگه برامون مثل اينها php هم آموزش بدي معركه هست




  3. صابر
    15 October 2011

    واقعا آموزشتون محشره تا حالا آموزش css زو به این زیبایی و حرفه ای ندیده بودم دستتون درد نکنه




  4. ali
    14 January 2012

    واقعا دستتون درد نکنه،خیلی خیلی خیلی سایت خوبی
    دارید




  5. وحید
    18 January 2012

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




  6. برزین
    20 July 2012

    دوست عزیز من کد تغییر نحوه نمایش عناصر به وسیله خصوصیت Display در CSS
    را با سی اس اس و بدون آن اجرا کردم تفاوتی نداره.




  7. مهدی
    16 December 2012

    خیلی عالی بود!!!
    ممنون میشم اگه منظم و سریالی هم بنویسید!!




  8. نواحی
    27 December 2012

    این کامنت فقط به نشانه احترام به زحمات شما در جهت ارتقای وب فارسی ست.




  9. misagh
    20 June 2013

    تشکر..مطالبتون خیلی مفیدند
    خسته نباشید




  10. آرش
    11 January 2014

    سلام

    فرق بین inline با inline-block در چیست ؟

    آیا من میتوانم از inline-block در ساخت منو استفاده کنم یا باید حتماً از inline استفاده کنم ؟

    در چه جاهای میشود از inline استفاده کرد , و در چه جاهای میشود از inline-block استفاده کرد ؟

    لطفاً من را راهنمایی کنید .
    متشکرم .




  11. samira
    25 September 2014

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




  12. نیما
    18 February 2018

    فقط میتونم بگم دمت گرم و سرت خوش باد



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





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

کامنت های شما بعد از تأیید توسط نویسنده وبلاگ، منتشر خواهند شد.

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

شما میتوانید با مراجعه به سایت گراواتار یک آواتار اختصاصی برای خود تعریف کنید، تا در کنار نام شما نمایش داده شود

برای قرار دادن کدهای نمونه می توانید از تگ های [php] ، [html] ، [css] و [js] استفاده کنید.
به عنوان مثال کدهای php را می توان به صورت زیر قرار داد:
[php] var $whoLoveIranians = "WebTarget!"; [/php]



کلیه حقوق مادی و معنوی برای وب سایت وب تارگت محفوظ است ©2024 وب‌تارگت

استفاده از مطالب وب سایت در سایر وب سایت‌ها و نشریات چاپی با ذکر منبع آزاد است.