آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش نمایش و قابلیت دیده شدن در CSS

دوره های مرتبط با این مقاله

آموزش خاصیت display

خاصیت display تعیین می کند آیا المانی نمایش داده شود یا خیر و همچنین نحوه ی نمایش المان را مشخص می کند . خاصیت دیگر نیز visibility است که تعیین می کند عنصری قابل رویت باشد یا خیر (پنهان باشد) .

پنهان سازی المان – display : none یا visibility : hidden

پنهان سازی یک عنصر را می توان با تخصیص مقدار "none" به خاصیت display و یا تخصیص "hidden" به خاصیت visibility انجام داد .
با این وجود لازم است توجه داشته باشید که دو روش مذکور نتایج متفاوتی را به دست می دهند :
visibility:hidden عنصر مربوطه را پنهان می کند ولی دقیقا همان فضایی را که از قبل به خود اختصاص داده بود را اشغال می کند . به عبارتی دیگر, المان مخفی خواهد شد ولی در عین حال layout (شِمای کلی) را تحت تاثیر قرار می دهد :

نمونه یک

        h1.hidden {
            visibility: hidden;
        }
امتحان کنید

display:none عنصر مورد نظر را مخفی می سازد, ولی درست برخلاف visibility:hidden هیچ فضایی را اشغال نمی کند . المان پنهان گشته و صفحه ی مورد نظر به گونه ای نمایش داده می شود که گویی آن المان اصلاً حضور ندارد :

نمونه دو

        h1.hidden {
            display: none;
        }
امتحان کنید

خاصیت Display در CSS – عناصر Block و Inline

المان block, عنصری است کل پهنا یا عرض موجود را به خود تخصیص داده و اشغال می کند, یک خط فاصله قبل و بعد آن قرار می گیرد (در واقع به صورت عنصری مجزا و مستقل نمایش داده می شود) :
مثال هایی از المان های block زیر ارائه شده :

                 h1
                 p
                 li 
                 div
                

یک عنصر inline (درون خطی) تنها به اندازه ی لازم پهنا را می گیرد و هیچ خط فاصله ی ایجاد نمی کند, که حالت پیش فرض می باشد .
نمونه هایی از آن را زیر مشاهده می کنید :

اصلاح نحوه ی نمایش یک عنصر

تغییر یک المان درون خطی (inline element) به یک block element, و یا عکس آن, می تواند در تنظیم ظاهر وب به صورت دلخواه, ولی با رعایت استانداردهای فعلی وب برای طراح بسیار مفید واقع شود .
مثال ذیل المان های

  • را به صورت درون خطی (inline) نمایش می دهد :

    نمونه سه

            li {
                display: inline;
            }
    امتحان کنید

    حال این مثال عناصر را به صورت مجزا (block) نمایش می دهد :

    نمونه چهار

            span {
                display: block;
            }
    امتحان کنید
    نکته:

    تنظیم خاصیت display تنها نحوه ی نمایش المان را تغییر می دهد و نه نوع المان مورد نظر را . از این رو یک عنصر درون خطی (inline) با display:block اجازه ی جای دادن دیگر المان های block در خود را ندارد .

    • 3485
    •    2216
    • تاریخ ارسال :   1394/07/27

    دانلود PDF دانلود سورس کد دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
    رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
    ارسال دیدگاه نظرات کاربران
    شماره موبایل دیدگاه
    عنوان پست الکترونیک

    ارسال

    آموزشگاه برنامه نویسی تحلیل داده
    آموزشگاه برنامه نویسی تحلیل داده

    تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .