آموزش طراحی وب

مدرسه مجازی ایرانیان

دسته بندی موضوعات
سفارش تبلیغات

visibility در css

visibility

فصل چهارم : Properties در CSS

جلسه بیست و ششم : visibility در CSS

سلام به همراهان همیشگی مدرسه مجازی ایرانیان

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

 

خصوصیت visibility

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

 

مقادیر خصوصیت visibility

visible : با انتخاب این مقدار ، عنصر مورد نظر نمایان میشه.

hidden : با انتخاب این مقدار ، عنصر مورد نظر پنهان میشه.

Collapse : این مقدار برای المنت های جدول استفاده میشه، زمانی که این مقدار رو برای عناصر جدول انتخاب کنید، tr و یا td مورد نظر رو حذف میکنه و فضای اشغال رو هم از بین میبره دقیقا مثل display:none

 

قاعده دستوری visibility

در مثال زیر ما h2 رو پنهان می کنیم و چون از visibility استفاده کردیم به اندازه ۶۰ پیکسل فضای خالی باقی میمونه و فضا حذف نمیشه فقط محتوای داخل h2 پنهان میشه :

 

پشتیبانی مرورگرها از خصوصیت visibility

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

 

موفق و پاینده باشید 🙂

تهیه شده در مدرسه مجازی ایرانیان

<<

>>

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید



سفارش تبلیغات

گردآوری و تالیف : میترا رحیمی

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مدرس و مسلط به برنامه نویسی سمت سرور با PHP MVC و برنامه نویسی سمت کلاینت با html 5 , css3 , jquery , مبانی سئو و سیستم مدیریت محتوای وردپرس

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

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

  • Mj

    سلام
    جالب بود فقط اگر از این خاصیت استفاده کنیم مثلا برای مخفی کردن برخی نوشته ها یا برچسب ها تاثیری در سئو داره ؟ منظورم اینکه مثلا گوگل رتبه منفی میده ؟
    ممنون

    • میترا رحیمی

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

  • mrm

    در پاسخ به سوال Mj باید گفت بله اگر گوگل متوجه نشود در غیر این صورت بد هم هست.
    از صفحه زیر بازدید کنید مفید هست.
    http://www.google.com/insidesearch/howsearchworks/fighting-spam.html

    • میترا رحیمی

      سلام دوست عزیز
      گوگل کدهای html شمارو بررسی میکنه و چون html شما پنهان نمیشه پس مشکلی هم نخواهد داشت . اما باز برای اطمینان بیشتر میتونید استفاده نکنید.
      موفق و پاینده باشید.

  • ساسان

    ممنون. همیشه واسم سوال بود دنبالش هم نمیرفتم بدونم فرقشون چیه تا اینکه این آموزش سر راهم قرار گرفت 😀

وبلاگ مدرسه

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

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

آخرین پرسش و پاسخ ها

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟