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

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


امیر سروری ۱۲ دیدگاه CSS , HTML , اصول طراحی وب سایت جمعه, ۱۶ام اردیبهشت , ۱۳۹۰ 17726 بازدید

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



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

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


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


  1. وحید
    ۲۸ اردیبهشت ۱۳۹۰

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




  2. hadi
    ۲۲ خرداد ۱۳۹۰

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




  3. صابر
    ۲۳ مهر ۱۳۹۰

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




  4. ali
    ۲۴ دی ۱۳۹۰

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




  5. وحید
    ۲۸ دی ۱۳۹۰

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




  6. برزین
    ۳۰ تیر ۱۳۹۱

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




  7. مهدی
    ۲۶ آذر ۱۳۹۱

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




  8. نواحی
    ۷ دی ۱۳۹۱

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




  9. misagh
    ۳۰ خرداد ۱۳۹۲

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




  10. آرش
    ۲۱ دی ۱۳۹۲

    سلام

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

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

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

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




  11. samira
    ۳ مهر ۱۳۹۳

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



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





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

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

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

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

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



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

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